A favicon for the mobile era

You know the favicon, this small icon displayed in the tabs of the web browser. They look like minor elements but someday Google updates its own favicon and everyones loses their minds. It is common practice to generate a favicon along with any new web site. The procedure is familiar to all web designers: get a master picture, usually the web site’s logo. Give it to a favicon generator to get a favicon.ico file. Declare this file in all HTML pages of the site. Task completed!

Or not.

This procedure was ok a few years ago, when so-called “smartphones” were Nokia phones running Windows Mobile 6 and surfing the web meant using a PC. Now that smartphones and tablets are overtaking PC, the favicon must become versatile. Web design became responsive, so should favicon.

What the favicon often is vs What it should be

First, PC. The favicon is shown in the browser tabs. This is its primary usage and it works fine. Yet, did you know you can create a kind of bookmark in the Windows task bar? If your favicon has not the proper resolution, it will appear as pixelated.

What the favicon often is. What it should be

Then, iOS and its major representatives, iPhone and iPad. The favicon (here called “touch icon”) appears in the bookmarks and in the home screen of the device. When iOS cannot find suitable pictures for the task, it generates… a miniature of the web page:

What the favicon often isWhat it should be

Let’s not forget Android. It works a bit like iOS but only provides a default icon when it cannot find one:

What the favicon often isWhat it should be

What to do about it

A long time ago, generating a single file named favicon.ico was enough to get the jo done. Today, the situation is a bit more complex. To support major browsers on images/fav/pc/Mac, iOS, Android and Windows 8, we need more than a dozen of pictures. That’s a lot. In addition, different platforms means different designs. For example, while favicons often use transparency, iOS favors opaque pictures. As a consequence, taking a single picture and resizing it multiple times is not enough to complete the task.

Unless you are willing to spend hours just to get a decent favicon that works everywhere, you need a next generation favicon generator, designed to handle no only the classic favicon for PC but also for the (not that) new mobile platforms.

To follow the next instructions, find a 260×260 or more picture. It might be the logo of your web site. In case you don’t have such picture at your disposal, you can use a demo mode and take advantage of this tutorial.

Go to RealFaviconGenerator and click the “Select your favicon picture” button. Select your picture. If you don’t have a picture, click the “Demo with this picture” button instead. This is what this tutorial does by the way.

Once your picture is uploaded to the service, a favicon editor appears.

With the demo picture, you can first notice that the iOS touch icon is transparent. Android uses this picture, too. This does not follow the Apple guidelines, which favor opaque icons. Beyond Apple recommendations, an opaque icon will fit your visitor’s home screen well.

We fix this with two clicks: a first one to add a solid background to the icon and another one to add margins around the original picture.

Windows 8 is another story. Its Metro UI and plain tiles require different adjustments. The initial icon is ok, although not perfect:

The first thing we do is saturating the master picture so it is now white. This setting fits nicely in the Windows 8 desktop. We also pick another background color among the ones suggested by Microsoft. Again, the idea is to achieve the best integration as possible.

In the options, choose the location of your pictures:

• At the root of your web site (like http://mysite.com).
• Elsewhere (for example or http://myothersite.com).

You can also choose to compress the generated picture. Bandwidth is always precious, in particular in mobile environments.

Click the “Generate your Favicons and HTML code” button to generate the picture and code. On the result page, both the favicon package (a zip file) and the HTML code are available. Start by downloading the package:

When checking the compression option, the archive is composed of two directories: compressed and uncompressed. Copy all files from the compressed folder to the location you chose in the options. Let’s suppose you chose the “Files in root” option. If your web site is named mysite.com, then copy all files so that is available.

Finally, take the generated HTML code and paste it to the <head> markup of your HTML pages:

Your favicon is ready! Whatever the platform your visitors use to access your site, they will be greeted with a good looking icons. Expect your site to be bookmarked more often!