I want to set the favicon for a fairly large number of pages. But, instead of using the HTML <head> tag <link rel="shortcut icon" href="favicon.ico">, 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.
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.
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
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.
Source: Stackoverflow.com