Favicons not showing up in all browsers after website files uploaded to server

Question

My favicons are not showing up across browsers after I uploaded my website files onto the server. I have tried the following solutions on stackoverlow and nothing worked:

1. cleared cache on browsers
2. renamed the href <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> to something else, "favicon.ico", "favicon.ico?"

Does anyone have any suggestions?

Thanks..

Answer 1

Perhaps try the following:

1. Place the file in the root - some browsers automatically look here for the favicon so may as well put it there if you can;
2. Drop "shortcut" - it is not a valid relation and isn't required from IE9 anyway (see: https://mathiasbynens.be/notes/rel-shortcut-icon). It may be complicating parsing. If needed to support IE8 and earlier, perhaps try a separate declaration.
3. Check that you have declared the "profile" in the head.
4. Consider adding variants for cross browser and purpose support (see: https://css-tricks.com/favicon-quiz/ - old, but shows issues).

Personally, can't wait till they all support svg.