a guide to the favicon mystery

Favicon Explained: Demystifying Functionality Across Browsers

Knowledge Base on March 29th, 2010 1 Comment

Following the release of AmberPanther Favicon for WordPress some questions were raised, and we feel they should be addressed. In this article we attempt to explain the mystic behavior of the Favicon or Website Shortcut Icon. The investigations are focused on the five most common browsers – Mozilla Firefox, Opera, Google Chrome, Safari and Internet Explorer – and using the latest version available today. We do not conclude or claim that neither prior or future versions will have the same behavior.

In order to solve the Favicon mystery we laid down eight questions, answered them and compiled the Guide to the mystic behavior of the Favicon shown in Table 1.

Questions:

  1. Does it need a link tag if the favicon file is named favicon.ico and is located in the site’s root directory (e.g. http://www.example.com/favicon.ico)?
  2. Does it need a link tag if the favicon file is named favicon.png or favicon.gif and is located in the site’s root directory (e.g. http://www.example.com/favicon.png or http://www.example.com/favicon.gif)?
  3. Does need a link tag if the favicon file is named somename.ico and is located in the site’s root directory (e.g. http://www.example.com/somename.ico)?
  4. Does it need a link tag if the favicon file is named somename.png or somename.gif and is located in the site’s root directory (e.g. http://www.example.com/somename.png or http://www.example.com/somename.gif)
  5. Does it need a link tag if the favicon file is is located in a sub-directory (e.g. http://www.example.com/somedirectory/favicon.ico)?
  6. Does the favicon specified by a link tag override the default favicon.ico found in the site’s root directory?
  7. Does it support multiple link tags?
  8. Does the GIF have priority over PNG and the PNG over ICO favicons?
Table 1: Guide to the mystic behavior of the Favicon
Browser ICO PNG GIF Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
Mozilla Firefox 3.6.2 Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
Opera 10.51 Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
Google Chrome 4.1 Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
Internet Explorer 8 Yes No No No N/A Yes N/A Yes Yes N/A N/A
Safari 4.0.5 Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes

These guide should suffice in helping you to understand and control the behavior of the Favicon on your site. And if you are running on WordPress, do not forget the AmberPanther Favicon for WordPress plugin, to demystify things even more.

Tags:

One Response to “Favicon Explained: Demystifying Functionality Across Browsers”

  1. [...] in the site’s root directory (detected automatically) or in a custom directory. Read the Guide to Demystifying the Favicon Behavior to understand better how to setup the favicon for your [...]

Leave a Reply

We stop spam together!

RSS Feed
on facebook
@twitter
footer