Generate a favicon that works everywhere
Favicon has been around for more than 10 years. Creating it is now a classic step of every Web project. However, the world has changed since the favicon.ico file was first introduced. Smartphones are now in every pockets and tablets are never out of reach. With these new devices come new features and requirements.
A few years ago, creating the favicon meant generating the favicon.ico file. Today, more than a dozen of files are necessary to cover all major platforms. iOS alone uses no less than 8 pictures (mix Retina/non-Retina, iPhone/iPad and iOS7/prior and you got them). Android is gentle enough to re-use these pictures. But Windows 8 and 8.1 add 5 other pictures with completely different resolutions. Add some more pics for exotic platforms, such as the 96x96 picture for Google TV, and you end up with a nice TODO list.
There's more. Different platforms mean different look-and-feel. For example, the classic favicon for PC often uses transparency. This setting fits well the tabs of desktop browsers. But iOS abhors it and prefers opaque icons. Now take Windows 8 and look at its tiles: many builtin icons are withe with a colored background. A trully portable favicon must adress these differences.
Sounds like favicon generation became a little bit tedious.
In this tutorial, we will use a favicon generator designed with these concerns in mind. Unlike the other favicon generators you used in the past, this tool takes new platforms into account, not only the classic desktop environments. You will generate a set of pictures and HTML code to make your favicon work everywhere, in a matter of minutes.
Get a square picture (260x260 or more). Probably the logo of the web site you are working on. If you don't have any picture at hand, you can use a demo picture, just proceed to the tutorial.
Go to RealFaviconGenerator. Click the "Select your favicon picture" button and pick the master picture on your PC. Or click the "Demo with this picture" button if you have no picture.
A favicon editor appears. This editor allows you to tune the favicon for the various platforms.
When using the demo picture, we can see that the default icon does not fit iOS. The icon is transparent, which is awkward compared to the icons of native applications.
We can change this by ading a background to the icon and add borders to prevent the logo from touching the borders.
Regarding Windows 8, the situation is better. The demo icon is good enough for the job with the default settings.
However, this can be improved by saturating the icon so it becomes white. We also change the background color to dark blue, one of the colors suggested by Microsoft.
In the options, choose the location of your pictures. They can be:
- At the root of your web site (eg.
http://mysite.com). - Elsewhere (eg.
http://mysite.com/iconsorhttp://myothersite.com).
Also check the compression option. Your users will download lighter pictures, which is especially important on mobile devices.
Click the "Generate your Favicons and HTML code" button, which triggers the favicon generation.
On the next page, download the favicon package.
If you have checked the compression option, the archive contains two folders: compressed and uncompressed. Copy all files contained in the compressed directory to the desired location (the one you entered in the options a minute ago). For example, if you have chosen to place your pictures in the root directory of your web site named mysite.com, copy all files so that http://mysite.com/favicon.ico is accessible.
Then, copy the HTML code to the <head> section of your HTML pages.
It's over! Your favicon now looks great on all major platforms.
