A favicon or favorite icon is the little icon that is associated with a particular web site that you see sometimes next to a browser’s url. This alerts the web surfer that you are at a specific site address and brand’s the site with a memorable identity. If you bookmark the site, the icon shows up next to the address in the favorites dropdown list, hence the name favicon or favorite icon.
This holds true for most popular browsers in use today. Simply pull up the address and the icon appears magically. There is one catch though. Internet Explorer is still the most popular browser on the market and the way it displays a web site needs to be addressed when designing a site so it looks good to the surfer and does not detract any potential customer or information seeker from exploring further. Internet Explorer has a nasty habit of not registering objects correctly. They also do not show favicons regularly so some site’s favicon fail to show up and only the familiar “broken page” symbol with the little “e” displays.
So how do you avoid this little side effect? After spending hours designing a neat looking 16×16 pixel icon that looks good, you upload the new web page with the icon code included along with the icon file itself but notice that nothing appears in the browser window next to the address.
In the past if you searched for the term favicon in a search engine you would get the code as presented below:
<link rel=”icon” href=”favicon.ico” />
This would work in years gone by, but is not generally recommended any more. The new style of adding favicons to a website would be to use the new code listed below:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon” />
<link rel=”shortcut” href=”favicon.ico” type=”image/x-icon” />
Remember to replace href=”favicon.ico” with the full address:
href=”http://www.mysite.com/favicon.ico”
This would cover most bases and alert Internet Explorer the exact location of the icon file and the type of file to process. Most of the time it works as expected, but Internet Explorer still does not handle these types of requests on every visit to a web site and even with the most care, avoids showing the favicon.
If you think a favicon is not showing simply slide the “broken e icon” onto the web page itself. This would force the page to reload and most of the time cause the hidden icon to suddenly appear. It is still hit or miss as in this blog, but adding a favicon to a website is still reccomended for all sites designed today.