Make a favicon
Improve your visibility with a favicon
Help your visitor to easily identify your website. For his reason, many websites add a favicon. This is a small logo or icon that is displayed in the address bar of the browser when visitors visit your website. Also, if the visitor decides to bookmark your website, the favicon is displayed in the list of bookmarks. If a visitor opens his list of bookmarks, the favicon will help to easily identify your website.
How can you add a favicon?
Although this is a must have for every website, not all websites do have a favicon. It is very easy to add a favicon with a few steps.
- Make an icon or logo sized 16x16 or 32x32 pixels.
- Name the file "favicon.ico".
- Upload the picture to your website.
- Add the following code in your html, between the <head> and </head> tags.
<link rel="shortcut icon" href="http://url-to-the-favicon/favicon.ico" type="image/x-icon">
If you have a Wordpress website you can add the favicon.ico file directly in your theme directory, in the same place as the index.php. Use the following code to have Wordpress automatically fill in the right url.
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory');?>/favicon.ico" type="images/x-icon">
If this is all to technical, use the favicon manager wordpress plugin. You can now upload the favicon from your admin panel.
How do you make a favicon
So uploading is the easy part. Making a logo or icon can be challenging.
There are a few websites that can help you make a favicon.
- Easy to use on-line favicon generator. Pick a color and type in some text. The generator will do the rest.
- If you already have an image you can use the favicon maker. You can also merge the favicon with a desktop icon.
- For the real perfectionist there is this favicon editor. In a 32x32 grid you can set the color of each pixel separately.
For the professionals there are also the specialized software products.
- Try using the demo of Microangelo toolset.
- Download the pixeltoolbox
- Use the freeware program Goldicon to edit and make your own favicon.
- Use photoshop starting with this tutorial to make a favicon.
If you are lazy, you could use existing favicons. Look at the following sites to download examples of favicons.
- Large collection of free icons.
- Download free icons from Yellowpipe.
- Fantastic paid for icons
- Download single icons for a low price starting at a few dollars.
Update: animated favicons
I forgot to mention the animated icons. As far as I know this is a firefox only possibility. You can use animated favicons just as you would use normal favicons. So the code is the same, only the image is different. It is advisable to use the html code above to include the favicon image into your html, you can then also use other filenames and other extensions.
You can find free animated favicons at this website.
Stay tuned
Did you like this information? Keep tuned by following our RSS feed
(No Ratings Yet)
Loading ...
Great overview of favicons! I think it’s great to see more favicon coverage in the blogosphere. I find them to be an invaluable marketing tool. For a closer look at the “ins and outs” of favicons, check out Everything You Ever Wanted to Know About Favicons. Hopefully it will add further benefit to your already excellent article. Cheers!
Thank you.
Favicons are not very difficult but underestimated. To few people use a favicon to cheer up their internet presence.
[...] To help your visitor even more to quickly find your website you can add the logo to the address bar of the browser. You can read how to do this in our article “make a favicon“. [...]
Hi,
I am using
http://www.mobilefish.com/services/favicon/favicon.php to create my favicons. This site also contains other useful tools.
Leave your response!
Recent posts
Recent comments
Most Viewed
1,347 views
809 views
497 views
476 views
474 views
Highest Rated
(3, 1 votes)
(1, 1 votes)
(0, 0 votes)
(0, 0 votes)
(0, 0 votes)
About Wwohn.com
Statistics
Most Commented
Most Viewed
1,347 views
809 views
497 views