Favicons and touch icons

You know the icon that your browser displays when you visit a page, the favicon, or the icon that get displayed on your mobile. They look so simple; 1 or 2 image you think and that should do it. Boy, was I wrong. It turns out there's a plethora of sizes for different purposes, devices and operating systems. Detailed information can be found in the favicon cheat sheet.

I am not an expert on all these different icons and formats. The information gathered here is based on what I found in the links listed in the references section. If you find any mistakes or outdated information feel free to let me know in the comments.

For the simple shopping list application I picked a simple shopping cart logo in SVG format. SVG format because vector graphics scale much better. To add proper support for all devices and operating systems the logo will have to be resized to 14 different sizes!

Resizing and converting an SVG image

For resizing the SVG image I am going to use the convert tool from imageMagick; ImageMagick is a free set of graphics identification and manipulation tools.

Assuming you have already installed the brew package manager on macOs, installation is as simple as executing the following command:

$ brew install imagemagick

On linux/bsd use your favourite package manager to install imagemagick. For windows follow the instructions on the download page of the imageMagick website.

The following command can then be used to resize and convert an SVG file to a 16x16 PNG file:

$ convert -size 16x16 shopping-cart.svg icon-16.png

Favicon.ico

Let's first start with the actual favicon.ico file. A .ico file is actually a single so-called container file which contains multiple small icon images in different sizes! The following sizes are needed: 16x16, 24x24, 32x32, 48x48, and 64x64 so let's do some resizing:

$ convert -size 16x16 shopping-cart.svg icon-16.png
$ convert -size 24x24 shopping-cart.svg icon-24.png
$ convert -size 32x32 shopping-cart.svg icon-32.png
$ convert -size 48x48 shopping-cart.svg icon-48.png
$ convert -size 64x64 shopping-cart.svg icon-64.png

And then we will have to combine all these separate small images into the final favicon container file:

$ convert icon-16.png icon-24.png icon-32.png icon-48.png icon-64.png favicon.ico

Touch icons (for iOS and Android)

Touch icons introduced by apple have had quite a number of supported sizes throughout the years: 57x57, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152, 167x167, 180x180, and 192x192 for android. However, some of these sizes are only used on old versions of iOS. To keep things simple I am going to stick to the original 57x57 size, the 192x192 size for android, and the sizes that Apple currently recommends: 152x152, 167x167, and 180x180.

Resize time!

$ convert -size 57x57 shopping-cart.svg apple-touch-icon.png
$ convert -size 152x152 shopping-cart.svg apple-touch-icon-152x152.png
$ convert -size 167x167 shopping-cart.svg apple-touch-icon-167x167.png
$ convert -size 180x180 shopping-cart.svg apple-touch-icon-180x180.png
$ convert -size 192x192 shopping-cart.svg touch-icon-192x192.png

Notice that we did not include a size in the 57x57 image. By convention this file is expected to be named apple-touch-icon.png and present in the root folder of our application. Therefor we will keep this file in the root folder but we will move the other icon files into an icons folder. This will keep our project a bit cleaner and easier to manage.

Now we just need to reference these touch icons from the head section of our index.html:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="icons/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon-180x180.png" />
<link rel="icon" sizes="192x192" href="icons/touch-icon-192x192.png" />

IE11 tiles for Window 8.1

For tiles on windows we are going to have to some more resizing to 70x70, 150x150, 310x150, and 310x310.

$ convert -size 70x70 shopping-cart.svg smalltile.png
$ convert -size 150x150 shopping-cart.svg mediumtile.png
$ convert -size 310x150 shopping-cart.svg widetile.png
$ convert -size 310x310 shopping-cart.svg largetile.png

This will cause the widetile.png to display a stretched version of the shopping cart. In a real application you will want to replace that with a nicer looking image, but for our testing purposes it will be just fine.

To keep things a bit tidy in the root of our application we will put these files in a tiles folder. These images will then have to be referenced from a separate file called browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="tiles/smalltile.png" />
      <square150x150logo src="tiles/mediumtile.png" />
      <wide310x150logo src="tiles/widetile.png" />
      <square310x310logo src="tiles/largetile.png" />
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Which in turn will have to be referenced from our index.html:

<meta name="application-name" content="Simple Shopping List" />
<meta name="msapplication-tooltip" content="Simple List" />
<meta name="msapplication-config" content="browserconfig.xml" />

References

• ImageMagick website: http://www.imagemagick.org
• Favicon cheat sheet: https://github.com/audreyr/favicon-cheat-sheet
• Apple documentation: Configuring web applications
• Shopping cart icon by Gregor Cresnar from http://www.flaticon.com

Simple shopping list bitbucket link