nashape

web development

Big Favicons

Introduction

The original favicon was a 16x16 pixel file named favicon.ico that 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 pixels.

Retina Displays

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.

Internet Explorer

As you can see on the wikipedia entry for favicons Internet Explorer only supports the .ico type. 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 supply a favicon.png version as well.

  • Supply a 64x64 favicon.ico file (with 4 various sized images embedded in it - see below) and put it in the root directory of your web files. In your HTML <HEAD... section add:
    <link rel="shortcut icon" href="http://example.com/favicon.ico" />
  • Supply a 64x64 favicon.png somewhere else and in your HTML <HEAD... section add:
    <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 .ico file 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 access the 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.

Apple’s developer library discusses this. And this is a good article about getting icons ready for Safari’s Reader.

Basically you need four .png icons:

  • 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.

Chrome

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.

Safari

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).

Safari 5

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”

Safari 6

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.

Links

A couple of other sites worth reading: