The original favicon was a 16x16 pixel file named
lived in the top directory of your public web files but with “retina” displays
becoming more common, and with favicons used in many places other than browser
tabs, the approach now is to provide a much larger image, at least 64x64
The Apple retina displays works by redefining the pixel. On the Macbook Pro Retina 15 inch there’s 2880x1800 physical pixels available, but they give you 1440x900 CSS pixels. That is, a CSS pixel on this display is actually 2x2 physical pixels. On non-retina displays the mapping is 1-to-1 and you didn’t have to talk about physical vs CSS pixels, just pixels. So instead of a larger canvas (with everything on it being much smaller) they give you the same size canvas but with much more detail.
Towards a Retina Web is an excellent and in-depth article about CSS for retina displays.
There is also an interesting article on anandtech discussing how the Macbook Pro Retina handles scaling.
How to add a (Big) Favicon
So how does this relate to favicons? Well if you continue to supply a 16x16 pixel favicon, a Macbook Pro with a retina display will upscale this to make it fit in the 32x32 physical pixels it needs to fill. And it will look crap. When browsing you’ll see many sites that still have “low res” favicons, and they look blocky or blurry on the retina display (even many native Mac OS X applications have yet to be updated with high resolution assets).
As you can see on the Microsoft site even IE7 can handle 32x32 pixel favicons.
And because favicons are now being used in many other places, such as Safari’s Reader and IE9’s pinned sites, the best approach is to supply a higher resolution favicon, at least 64x64 pixels.
As you can see on the wikipedia entry for favicons
Internet Explorer only supports the
Therefore we must supply an
.ico (unless we don’t want to develop
for IE which is always tempting).
The “Best” Approach
It’s probably fine just to supply the
favicon.ico file, but I
favicon.png version as well.
- Supply a 64x64
favicon.icofile (with 4 various sized images embedded in it - see below) and put it in the root directory of your web files. In your HTML
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
- Supply a 64x64
favicon.pngsomewhere else and in your HTML
<link rel="icon" type="image/png" href="http://example.com/images/image.png" />
Creating the Favicon for http://nashape.com
The only file that was hand built was the original 64x64 pixel png file. I then
used http://www.xiconeditor.com/ to convert this into an
with 4 images of various sizes - 16x16, 24x24, 32x32 and 64x64 - embedded in it.
This site has good
instructions for creating
.ico favicons (specifically for IE9).
You can even create the
.ico file with Gimp!
Very Old Browsers
Supposedly very old browsers can’t read the
<link rel... and will just try to
favicon.ico in the home directory. With the approach
above we’ve got this situation covered (but who is going to be bothered
testing their site on IE5?).
iOS Homescreen Icons
When using an iPhone or iPad you have the option to turn the link to any webpage into an icon on the homescreen. When this occurs iOS automatically turns an image that you supply (not the favicon, see below) into an icon. It applies reflective shine and rounded corners to the image.
Basically you need four
- Non-retina iPhone (there won’t be too many of these soon) - 57x57 pixels
- Retina iPhone - 114x114 pixels
- Non-retina iPad (still a few around) - 72x72 pixels
- Retina iPad - 144x144 pixels
Another good blog post describing these iOS homepage icon images.
Clearing the Favicon from the Browser Cache
This is something you obviously need to do when developing web applications.
I’m currently using Canary Version 23. To clear the favicon images:
- Open “Preferences…”
- Click on “Show advanced settings…”
- Under the “Privacy” heading click the “Clear browsing data…” button
- Check (only) “Empty the cache” and submit the form
If that doesn’t work, try this suggestion.
Read this for how to force a favicon refresh in a production environment.
This section is for reference only. As a developer you need to check your site on as many browser as you decide to handle (for viewing various versions of IE on a Mac BrowserStack is worth considering). However as a user, there is no way I would use Safari - I’ll use Chrome until something better comes along (and I’m betting that something better won’t be Safari 7).
In Safari 5 (I don’t know about earlier versions and I can’t imagine they are used too much) you could simply:
- Go to Safari->Reset Safari..
- From the pop-up modal select “Remove all website icons”
To delete favicons in Safari 6 you have to delete your history. This is quite a change from Safari 5.
This is a useful article about how to remove the Favicon Database if you really want (or need) to.
Safari 6 seems somewhat flakey when it comes to grabbing favicons too. I’ve had to reload pages dozens of times, or open up the Web Inspector to click on the favicon link in the HTML to force Safari 6 to get the image.
A couple of other sites worth reading: