Let’s get rid of default favicons! And at the same time tackle the touch-icon issue.
It’s 2013 (or even later), so let me give you a short list of things we don’t want to see on the internet anymore:
The favicon ( /ˈfævɪkɒn/ ) just turned 25. It’s that small monk on your active browser tab. And you shouldn’t treat it like a dinosaur that’s about to become extinct – it’s probably more important than ever.
Back then, when people working at Internet Explorer still had remarkable influence on the direction the web was going, Bharat Shynam came up with the idea of putting a favicon.ico in the main website folder (read the whole story). It used to be put next to the bookmarks. And still is. But it evolved over time, like browsers did. Now we have tabs, and the colorful icons are visible for hours and hours every day.
But there’s more. Now we have smartphones, tablets or even some kind of data glasses, soon there will be watches… and the favicon is always there. It might not be referred to as such in all cases, but that’s where it originates from. It’s basically your logo put in a square. Don’t miss that part of your branding. It’s so easy to score these points!
Now Available in High-Res
And wow, that baby’s grown up. From a tiny 16x16px up to 152x152px for the retina iPad’s home screen icon (in fact Opera’s new approach to touch based browsing Coast even prefers 228x228px, but this can’t be considered a standard just yet). And there are multiple versions in-between. Let’s see (November 2013):
- 16x16px: regular favicon
- 32x32px: retina favicon
- 57x57px: regular iPhone home screen icon
- 72x72px: regular iPad home screen icon
- 114x144px: old retina iPhone home screen icon
- 120x120px: new retina iPhone home screen icon
- 144x144px: old retina iPad home screen icon
- 152x152px: new retina iPad home screen icon
- (228x228px: Coast browser webapp icon)
Thankfully Android is not very demanding and pulls one of the so called apple-touch-icons, depending on the device’s DPI. But still: it’s two different favicons and 6 different touch icons. If you want to be a perfectionist, that’s quite a bit of work. For obvious reasons, the best practice tendency goes towards a simpler solution: offering only the largest one instead of offering 6 different touch icons. This means that an old non-retina iPhone has to use a larger version as it’s meant to be, and scale it down. But most people can live with that.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. — Antoine de Saint-Exupery
Checking the current best practice can be done by having a look at the latest HTML5 Boilerplate on GitHub. While this link might look frightening to some, it’s a relief of crystal clear consensus to others. It is an open source version of a “get started” website, including all current best practices. Favicons, apple-touch-icon(s), but way more: the latest versions of all little helpers and components needed for building a modern website. And this consensus has been using only one touchicon since two months ago, so let us feel morally ok to do so too. Let’s reduce the numbers game to the necessary, and leave the rest behind us. We’ve still some more to cover.
How to Set Them Up
Before you can care about technical details, you have to have a design. You probably have a logo or at least an iconic font displaying your project’s name on your website. That’s a good basis, as decisions about color scheme and typography are already made, and you might even have a pictogram next to the name.
Crop it! Make it a square and see if it works in 16x16px. What works in the smallest size can be adapted to higher resolutions – not the other way around. We zoomed in quite a bit and used only a fraction of our little monks’ face. As long as it is still recognizable, that’s fine!
So go ahead prepare three separate image files (e.g. PSD, sketch): 16x16px, 32x32px and 152x152px. Of course do not simply scale up the 16x16px, that’s bad. Also scaling down might be not ideal. You could use fewer details or a larger font in the small version. Create individual high quality files for each size. Save them as PNG files, including transparency if you need it.
The .ico format is as mysterious as the Internet Explorer was in 1998. But there are some online tools which make life feel like 2013 again, e.g. x-icon editor. We’ll use that one for merging the 16x16px and 32x32px PNG files into one icon file. The browser will automatically choose the larger one for Retina and other HiDPI displays.
- Open x-icon editor.
- Click ‘Import’.
- ‘Upload’ the 16x16px PNG file and uncheck all boxes except the ’16×16′ one. Confirm with ‘Ok’.
- Click ‘Import’ again.
- ‘Upload’ the 32x32px PNG file and uncheck all boxes except the ’32×32′ one. The ’16×16′ box should still contain your previously uploaded image. Confirm with ‘Ok’.
- Note that the 16×16 and 32×32 boxes in the right column should be displaying your two different sized icons as in the screenshot below.
- Click on ‘Export’ and again on ‘Export Your Icon’. A download should automatically start and download the favicon.ico.
- Use an FTP client (e.g. FileZilla) for connecting to your site’s FTP server. Upload the favicon.ico into your main directory. This is where the main index.html/index.php is placed. On some hosting providers you manually have to browse into the /public_html/ (or something similar) folder first, to see the index.html.
- It should work once you reload your website. If not, try deleting your browser cache.
Things are a bit easier here. As of now, you just have to upload the 152x152px PNG file in your main server directory (see last two steps above). Make sure it’s called apple-touch-icon-precomposed.png and devices will detect it automatically. The precompose states that we don’t want any gloss or lighting effects being added by any mobile OS. Because we don’t! There is no need to make round corners. Square is better, the mobile OS will do the rest.
We’ve tackled an issue in the last paragraphs, that is evolving quite a bit. It’s good to see that things are actually becoming easier. A couple of months ago the technical information on how to implement an apple-touch-icon would have filled a whole, techie blog post. Nowadays we only have to create three sizes and two files:
- favicon.ico, including 16x16px and 32x32px versions
- apple-touch-icon-precomposed.png in 152x152px
Both go in the main directory of your server and you’re set up. Let’s finally get rid of default favicons!