If only we lived in a world where everybody used non-IE browsers. Web design would be so much easier. The latest thing I’ve discovered IE 7 can’t do, is display a PNG favicon. What can you do?
- Make a sweet little 16×16 PNG favicon in your favorite paint application
- Butcher it into an ICO file using favicon.cc
- Upload both files to your web server
- Stick the following code in the HEAD section of your webpage
- Reassure yourself that IE users are pretty used to a sub-standard web browsing experience, and won’t be bothered by the lack of proper transparency or 24bit color in the favicon they see
<link rel="icon" type="image/png" href="favicon.png" /> <!--[if IE]> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <![endif]-->
September 25th, 2008 at 12:45 pm
“If only we lived in a world where everybody used non-IE browsers.”
Exactly how I feel. The best we can hope for is a less arrogant disregard for standards in IE8.
November 30th, 2008 at 7:57 pm
96 bytes of wasted space really.
IE blindly asks for favicon.ico so leave out the conditional statement and either have an actual .ico in the root, or a zero size file called favicon.ico to save the log filling up with crud.
January 12th, 2009 at 9:00 am
Yegags: The point of the conditional is to stop non-IE browsers using the ICO
July 7th, 2009 at 6:26 am
@ Rowan, good thinking
July 15th, 2009 at 2:54 pm
Has anyone else tried this?
I wasn’t able to display the PNG favicon in FF until I changed the type to “images/x-icon” or removed the type value. I ended up removing it because the conditional statement wasn’t working in IE with the value in place for the PNG file. The version I finally got working cross browser looked like this:
and I only got it working after I deleted everything in IE–not just the temporary internet files–and refreshed the page.
July 18th, 2009 at 10:35 pm
Good work.. thanks for http://www.favicon.cc site..