Problem
When the simplest things don’t work it can drive you nuts. I had a task to add a favicon to a website so that it shows in the browser. To do this all I thought I had to do was get the PNG, convert it to a .ICO file on one of the many online converters and place it in the home directory of the website. What do you do when the image shows at http://mydomain.com/favicon.ico but doesn’t show as the browser’s page icon?
Solution
- Clear the browser cache
- Make sure you have the link tag in the <head> part
<link REL="SHORTCUT ICON" HREF="/favicon.ico">
- Go here and make sure your icon is up to the standards
When I looked at Firebug I saw that there was a tag <link rel=”icon” href=”” type=”image/x-icon” >. I thought it was a little strange, but I also thought Firebug was just interpreting the icon location since it wasn’t in the source code I was looking at. (Firebug shows the real-time values of elements instead of the actual code. ie. if you use javascript to move an element, it will show the new coordinates instead of the original ones).
After a while, I found the website that validates favicons. Once I saw that extra “image/x-icon” again, I looked through my PHP code and saw that it was including that, which is why I didn’t see it in the main html code.