using favicon with css

Question

I want to set the favicon for a fairly large number of pages  But  instead of using the HTML  lt head gt  tag  lt link rel  shortcut icon  href  favicon ico  gt   I d like to set it in the CSS file  I have limited access to some of the html files  and limited control to their life cycle

User · Answer

You don t need to - if the favicon is place in the root at favicon ico  browsers will automatically pick it up   If you don t see it working  clear your cache etc  it does work without the markup  You only need to use the code if you want to call it something else  or put it on a CDN for instance

User · Answer

If  1  you need a favicon that is different for some parts of the domain  or  2  you want this to work with IE 8 or older  haven t tested any newer version   then you have to edit the html to specify the favicon

User · Answer

You can t set a favicon from CSS - if you want to do this explicitly you have to do it in the markup as you described   Most browsers will  however  look for a favicon ico file on the root of the web site - so if you access http   example com most browsers will look for http   example com favicon ico automatically

User · Answer

There is no explicit way to change the favicon globally using CSS that I know of  But you can use a simple trick to change it on the fly   First just name  or rename  the favicon to  favicon ico  or something similar that will be easy to remember  or is relevant for the site you re working on  Then add the link to the favicon in the head as you usually would  Then when you drop in a new favicon just make sure it s in the same directory as the old one  and that it has the same name  and there you go   It s not a very elegant solution  and it requires some effort  But dropping in a new favicon in one place is far easier than doing a find and replace of all the links  or worse  changing them manually  At least this way doesn t involve messing with the code   Of course dropping in a new favicon with the same name will delete the old one  so make sure to backup the old favicon in case of disaster  or if you ever want to go back to the old design

[html] using favicon with css

Examples related to html

Examples related to css

Examples related to favicon