Posted on by gdevnet.com

Add a favicon.ico for Multiple Platforms

favicon.ico

In web design, a favicon.ico file is an icon associated with a particular website,  displayed in the address bar of a browser accessing the site or in the list of bookmarks. In the early days of Internet, this was all there was to know about these icons.

But, nowadays, with the need to address as many platforms as possible, desktop or mobile browsers, Android or iOS, phone or tablet, even if your site is dedicated to desktop browsers, we don’t want to ignore mobile browsers altogether or any other platform.

This can be achieved by producing and publishing a large set of icons of different sizes and format on your website.

Multi-platforms icon sets

The icons sets required to achieve a good compatibility with multiple platforms are 4 distinct icons:

  • favicon.ico, for legacy browsers, containing the sizes 16×16, 32×32, 48×48 (as advised by Microsoft)
  • PNG icon, size 192×192 in PNG format, for modern desktop browsers and Android
  • Apple Touch icon, size 180×180 in PNG format, for iOS mobile browsers
  • A Tile icon, size 144×144 in PNG format, for Windows 8/10 tiles

Convert a logo into all sizes

The solution to produce these icons is to use command line tools provided in Linux: convert and icotool. convert resizes images, and icotool bundles images of multiple sizes into a single favicon.ico.

On a Debian/Ubuntu system, the pre-requisite packages to use the tools needs to be installed with the following command:

$ sudo apt install imagemagick icoutils

An original logo file (logo.png in our example) can now be converted in all required sizes:
-16×16
-32×32
-48×48
-144×144
-180×180
– 192×192

The list of following commands will convert the icons for us:

$ convert logo.png -resize 16x16   favicon-16x16.png
$ convert logo.png -resize 32x32   favicon-32x32.png
$ convert logo.png -resize 48x48   favicon-48x48.png
$ convert logo.png -resize 144x144 favicon-144x144.png
$ convert logo.png -resize 180x180 favicon-180x180.png
$ convert logo.png -resize 192x192 favicon-192x192.png

The next step is to create the favicon.ico file itself, bundling 3 lower resolution size for compatibility with legacy browsers:

$ icotool -c -o favicon.ico favicon-16x16.png favicon_32x32.png favicon_48x48.png

Thats it! You should now have the additional icons in addition to your original logo.

Publishing the icons

You can now publish the 4 required formats to your websites in the root / of the website or the images/ folder as followed:

favicon.ico
favicon-144x144.png
favicon-180x180.png
favicon-192x192.png

The header of your web page should now contain the following tags to server the icons properly for the multiple platforms mentioned:

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180x180.png">
<link rel="icon" sizes="192x192" href="favicon-192x192.png">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">

Resources