HD Favicons

As you can see, 16px favicons are pixelated as shown below. Thankfully there is an easy fix.

Macbook Pro (Retina)
Original (16px X 16px – 1kb)
New (32px X 32px – 7kb)

Macbook Pro (pre Retina)
Original (16px X 16px – 1kb)
New (32px X 32px – 7kb)

How to make your favicon high pixel density (Retina) compatible.
1. Replace your 16px by 16px favicon with a 32px x 32px favicon at the default location: http://www.yourdomain.com/favicon.ico.
2. That’s it.

You can see our favicon here: http://enrappture.com/favicon.ico. Seems to work, let us know if you see issues.

24%* of top 50 global sites (Alexa) are already using at least 32px x 32px favicons.
Apple
Amazon
Blogger.com
Sina
MSN
WordPress
Weibo
Babylon
Microsoft
IMDB
BBC
Flickr

So if you haven’t updated your favicon, now may be a good time.

*This figure is not particularly accurate, as some sites are not consumer facing. Also, there are probably better ways.

5 Responses to HD Favicons

What's Yours?

  1. DeltaHF says:

    Glad to find out this so easy, thanks for clarifying this! Worth noting that only Safari seems ready to display these HiDPI favicons on the retina Macbook Pro at the moment, but I’m sure that will change soon.

  2. Enrappture says:

    You are right. There is more complicated ways, but it seems to work for now.

  3. admin says:

    Sure, I like to throw in a multisized .ico for incsnates other than browser nav. Embedding 16,32,64,124 for scalability. I mentioned having a combined 16 16/32 32 because I’ve run across incsnates where server-side scripts on outside servers wouldn’t pull the favicon if it was over 20k in size. It is a compromise that functions/looks nice in feeds/bookmarks/etc.And to the latter the 32 32 size wouldn’t fit into standard’ nav/tab, yet gracefully falls back to 16 16.If the resources and situation permit, go all out. Sexy icons on one’s dock are never a bad thing.

  4. Ashfame says:

    Its also 32 X 32 now.

Leave your reply

You must be logged in to post a comment.

Plan Your Project