Favicon Explained: Demystifying Functionality Across Browsers
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:
- Does it need a link tag if the favicon file is named
favicon.icoand is located in the site’s root directory (e.g. http://www.example.com/favicon.ico)? - Does it need a link tag if the favicon file is named
favicon.pngorfavicon.gifand is located in the site’s root directory (e.g. http://www.example.com/favicon.png or http://www.example.com/favicon.gif)? - Does need a link tag if the favicon file is named
somename.icoand is located in the site’s root directory (e.g. http://www.example.com/somename.ico)? - Does it need a link tag if the favicon file is named
somename.pngorsomename.gifand is located in the site’s root directory (e.g. http://www.example.com/somename.png or http://www.example.com/somename.gif) - 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)?
- Does the favicon specified by a link tag override the default
favicon.icofound in the site’s root directory? - Does it support multiple link tags?
- 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.
, or by using our 
One Response to “Favicon Explained: Demystifying Functionality Across Browsers”
[...] 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 [...]