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.
5 Answers
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.
-
38That's lame. Favicon is actually about styling a webpage, it should definitly be moved to css ! Jun 17, 2013 at 7:59
-
6@AugustinRiedinger - How is a favicon part of the page? It never shows up on the page itself.– OdedJun 17, 2013 at 9:42
-
That's right. I guess it depends on what you include into styling a webpage. In my case, I've been cutomizing an open-source webservice and there was some special css for this purpose. I though favicon should have been part of this customization and it would have been easy in a css file! Jun 17, 2013 at 17:02
-
@AugustinRiedinger - Do you know of any initiative for changing this? I want to contribute to it.– GriffinJul 25, 2013 at 1:26
-
7Interesting question. I would say: 1. Search about this question deeper in google. 2. Look for W3C articles/specs about favicon. 3. Be in touch with either W3C member or Mozilla member (more chances of answers than google I guess). 4. Write a blog article about this, see people reactions. 5. Make a webpage dedicated to this. Try to make it buzz! Basically, try to find more people that would support this evolution to get more weight! :) Jul 25, 2013 at 10:11
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.
Adding this is as a modern update:
Set an icon like this
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
You can also use a png file.