A favicon (short for ‘favorites icon’) is a small 16×16 icon that will show up in the address bar of some browsers e.g. Firefox or Opera, to identify the website. In Internet Explorer it is the icon that appears when you make a shortcut to the website. It will be displayed in bookmarks and bookmark bars in many browsers and is an excellent way to identify your site.
It’s easy to make a favicon. You can use a graphics program e.g. Photoshop or Gimp or use one of the on-line favicon generators. Here are some to get you started.
Dynamic Drive Favicon Generator
Favicon examples
Once you have your favicon how do you add it to your site?
Place the image in your theme folder and name it as favicon.ico.
You need to make a link to your favicon in the header.php file of your theme. For instance, this site used a theme called goldenflower so the header.php file is in the folder wp-content/themes/goldenflower. Open this file in a text browser and add a line between the <head> and the </head> tags.
The line for this site is:
<link rel=”shortcut icon” href=”wp-content/themes/goldenflower/favicon.ico” />
Substitute the path to your favicon.
Save the file and your done!
or use a plugin for the favicon (no changes in template nessesary), use this one:
http://www.digitalramble.com/favicon-manager-wordpress-plugin/
het thanks Alexh I didn’t know about that plugin.
I wonder if you have faced any problem with favicons displaying in IE?
That’s because a lot of my visitors say that IE is not behaving when it comes to favicon.
Firefox and safari displays just fine. Any idea?
Hi amos
IE 6 only uses icons when you bookmark the site not in the address bar. It’s supposed to be supported in the address bar for IE7 but I can’t test it as I don’t have IE7. I use linux and run IE6 on a virtual machine and I haven’t upgraded it to IE7 yet. “The Mozilla web browser added support for favicons in a way that conformed to web standards through the use of rel=”icon” and letting web designers add favicons in any supported graphics format” from Wikipaedia. I must admit I’m lazy and tend to use any format file and just rename it as an ico file as my graphics program won’t open ico files. This works in anything but IE which I suspect has to have a proper ico file.
I like this quote from a comment I saw recently “I suspect some degree of witchcraft is needed for complete cross-browser coverage.”
Hey good advice. I use SM Favicon Generator. This one works great and its fast.
Yeah favicons are cool, most decent sites have one now, but i would recommend that you incude both the the below link rel favicon strings within your
to ensure full cross browser compatibility, also notice the type=”image/x-icon”, that should really be included too.
I don’t have mine yet but i’ll go to the links to get the right one for my site. Thank you all here.
Many websites don’t have this feature but it shows which websites care for small details like this. Thanks for the tips.
Favicon is recommended to make our sites stands out the crowd