Originally published on Netskills voices
After launching Netskills Voices, I was pleased to see people adding the site to their favourites. However, I was less pleased to see that the icon being used to represent the site was sometimes less than pretty. That was because we didn’t have quite the right combination of ‘favicons’ in place. This post explains how we put that right.
What are Favicons?
Favicons are icons used by browsers and web services like Google Reader to represent a site visually. They’re used when you add a site as a favourite or as an icon to your mobile home screen. As such, you want them to represent your site well.
Choose your Favourite
In our last visual identity update, we had a series of avatars created. We use these across our social media sites as they tend to work better than our full logo at such small size and in square aspect.These seemed good qualities for favicons too, so I was happy to make use one of them rather than having to design something from scratch.
However, I still needed to do some work on the source image to make it work the way I wanted. The main task was to produce images in all the formats and sizes required and to make sure each device uses the right one.
Everyone has their Favourites
Browsers tend to use .ico files. So we made one of these at the standard 64 x 64 pixels size. This is also good practice as a fall back for cases other images can’t be used.
Then we started to think about mobile, with this being driven mainly by iOS developments, though having advantages for other devices too. In order to work well on different generations of Apple mobile devices with different screen resolutions, from an old iPod touch to the latest iPad with “retina” display, we needed to serve favicons at a variety of sizes.
So, we created PNG files at the following sizes for different iOS home screens:
- 57px for iPod Touch, iPhone 1st generation to 3G
- 72px for iPad home screen icon
- 114px for retina display iPhone (twice standard size)
- 144px for retina display iPad
Serving up your Favourite
To make sure the right devices get the right icons, you need code like that below. The “sizes” attribute does the switching. The “precomposed” bit means please don’t add a shiny overlay Apple, our icon is shiny enough already.
<!-- For desktop browsers --> <link href="/assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/> <!-- For retina-display iPads --> <link href="/assets/images/apple-touch-icon-xlarge.png" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png"/> <!-- For retina-display iPhones --> <link href="/assets/images/apple-touch-icon-large.png" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png"/> <!-- For iPad 1 --> <link href="/assets/images/apple-touch-icon-medium.png" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png"/> <!-- For iPhone 3G, iPod Touch and Android --> <link href="/assets/images/apple-touch-icon-small.png" rel="apple-touch-icon-precomposed" type="image/png"/>
So, hopefully now if you add Voices to your favourites, you’ll see a nice looking icon.
I Don’t Get It
If you don’t see our favicon, or you get one that just looks bad, please let us know. We’re aware of some issues. For example, I can’t find a way to make Google Reader see it as Voices is part of a multisite install of WordPress and we can’t put the file in the right place (as in, our favicons have to live in the theme folder, but Google Reader will only look for them at the top/root site level).
The posts below were very helpful to me. They go into more detail than I could here, particularly the .net article, so if you need to know more…
- Create the perfect favicon | .net
- Multi-Resolution Favicons and Safari’s Reading List
- Configuring Web Applications | Apple