Favicons, touch icons, tabs, tiles and browser themes for pixel perfect logos across devices

Gone are the days where one size fits all for websites. We are living in a time where almost every modern device is able to connect to the internet. From smartphones and tablets to TVs and fridges, users can browse your website from all of these devices so it’s essential that your site is responsive and delivers an enjoyable user experience.

Also, if you value your brand then you’ll want to ensure your company logo looks good, and is on-brand, at the range of sizes used for favicons and touch icons. This post gives you the guidance to achieve that along with helpful explanations and examples.

What is a Favicon?

A favicon is a small icon that represents your website. It is normally your logo or a variation of it and will often appear on the tab in your browser. You have probably seen them around, here is ours.

tab-with-favicon

If a website doesn’t include a favicon, the visitor is presented with a boring page icon.

tab-without-favicon

Not only does this look bad, it will cause a 404 error on your server when the browser tries to look for an icon. They are also seen in other places such as smartphone homescreens when site shortcuts are added.

 

styled-ios-touch

Unfortunately for people maintaining websites, there are lots of different devices that all treat favicons in slightly different ways. As a result, website maintainers need to create a lot of images (or a lot of versions of the same image). To give you an idea of just how many, I created 25 different Favicon images for the site I am currently working on to ensure maximum compatibility with as many browsers and systems as possible.

Before we start

404 errors

Throughout this blog, I will refer to something called a 404 error. This is an error that occurs if you look for a web page that doesn’t exist. Interestingly, they are also given if an image, or any other file, is requested but cannot be found. They should be avoided because every 404 error that is issued is recorded in a log file. This log file can get big very quickly and could result in you running out of space on your server. Another issue is that looking for a file that doesn’t exist can slow the server down. This could result in a slow website for your visitors. Page speed is also a key factor now in search engine rankings. If your page loads slowly, you are less likely to appear high up on Google’s listings.

Image size vs Picture size

Image size and picture size are two different, although related measurements. Picture size refers to the dimensions of the picture: how tall it is and how wide it is. Image size refers to the amount of storage space the image file takes up on a computer.

Let’s start at the beginning – favicon.ico

In the days before lots of mobile devices, you could get away with a single .ico file named favicon.ico. This type of file is able to contain multiple sizes within it. The standard dictates that a 16×16, a 32×32 and a 48×48 pixel version of the image should be available. Now this type of file is hardly used for favicons when alternatives are available although some social networking sites look for this file when a link is shared. This means that without it, you could get 404 errors if the file is not present.

To add this to your website you should add the following to the head section of your websites.

<link rel="shortcut icon" href="path/to/favicon.ico">

PNG Favicons

PNG files are generally smaller in filesize than ICO files, partly because they only contain one version of the image. This, in turn, can make pages load faster. The recommended file sizes for png favicons are 16×16, 32×32 and 96×96 pixels. As you can see, we don’t include a 48x48px version of the image but do add a 96×96. The smaller version is not required by any browser that supports PNGs and the 96x96px image is included for use on large screen devices. Things like web-enabled TVs will often fetch the larger image.

To add the images, add the following to the head of each page of your website.

<link rel="icon" type="image/png" href="path/to/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="path/to/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="path/to/favicon-16x16.png" sizes="16x16">

iOS Touch Icons

This is where the fun really starts. The iPhone was, and still is, a huge success. It brought the smartphone to the masses and not just business professionals. One of the things that made the iPhone special was its ability to browse the internet comfortably and conveniently. You were, and still are, able to add a shortcut to a website to your homescreen. Unfortunately, Apple decided that the standard favicons weren’t good enough to put here. This is understandable as the favicons that most websites have are too small and would look terrible if they were scaled up. However, instead of adding the first letter of the name of the website, or a similar workaround, Apple decided to add a tiny screenshot of the website as the icon.

default-ios-touch

This almost always looks terrible but, fortunately, there is an alternative. There is now a lot of iOS devices, each with different types of screen and different sizes. That means lots of different images. The suggested sizes are as follows:

  • 57x57px
  • 60x60px
  • 72x72px
  • 76x76px
  • 114x114px
  • 120x120px
  • 144x144px
  • 152x152px
  • 180x180px

We then need to tell Safari on the iPhone/iPad where all the images are stored.

<link rel="apple-touch-icon" sizes="57x57" href="path/to/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="path/to/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="path/to/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="path/to/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="path/to/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="path/to/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="path/to/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="path/to/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="path/to/apple-touch-icon-180x180.png">

iDevices also have a nice way to change the default text. To do so, add the following:

<meta name="apple-mobile-web-app-title" content="Application Name">

A final point: any transparency in the iOS Touch icons will be rendered as black. Chances are this isn’t what you want so any transparency in the icon will normally have to be filled with white.

Android Devices

Old Android devices can use the iOS icon as a fall back, although it supports transparency in the icons.

android-touch-icon-with-transparency

New versions of Chrome on Android look for the images in a file called manifest.json.

This means that the appropriate version can be selected depending on device you are using. To add the manifest.json file, include

<link rel="manifest" href="path/to/manifest.json">

The json file should look something like this:

{
    "name": "app name",
    "icons": [
        {
            "src": "\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": 0.75
        },
        {
            "src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": 1
        },
        {
            "src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": 1.5
        },
        {
            "src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": 2
        },
        {
            "src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": 3
        },
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": 4
        }
    ]
}

To properly support older versions of Chrome, add the 192x192px image to the header. It can be scaled if necessary.

<link rel="icon" type="image/png" href="path/to/android-chrome-192x192.png" sizes="192x192">

To set the default name for the icon, add

<meta name="application-name" content="Application Name">

Windows 8 Tiles

Similarly to the way that Android and iOS let you add icons to your home screen, Windows 8 lets you add tiles to the Start Screen. To set the colour of the tile, and add an icon you will need a 144x144px image and two meta tags.

<meta name="msapplication-TileColor" content="#hexColour">
<meta name="msapplication-TileImage" content="path/to/mstile-144x144.png">

Windows 8.1 and Windows 10

Windows 8.1 and Windows 10 use a different method for obtaining the colour and the icon. Helpfully though, if it’s not available, they will both use the Windows 8 way above.

By default, a file will be looked for in the top level of your website called browserconfig.xml. If you don’t want it there, you can specify the location with the following tag:

<meta name="msapplication-config" content="path/to/browserconfig.xml" />

This file can do lots of different things although, for now, we’ll just worry about the home screen tiles’ picture and colour. Due to the fact that Windows allows you to resize the tiles, we need to include 4 different sized images: 70x70px, 150x150px, 310x310px and 310x150px. Once these images have been created, the browserconfig.xml should look something like this:

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="path/to/mstile-70x70.png"/>
            <square150x150logo src="path/to/mstile-150x150.png"/>
            <square310x310logo src="path/to/mstile-310x310.png"/>
            <wide310x150logo src="path/to/mstile-310x150.png"/>
            <TileColor>#ffffff</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Safari’s Pinned Tab

Unlike most other browsers, safari does not normally show a favicon when viewing a website.

safari-tab

However, when you pin a tab it can show a specified icon:

safari-pinned-tab

This icon has to be an SVG icon. It cannot have a background and each vector must be 100% black. You also need to specify a colour to show when the icon is either being hovered over or is active.

This would be done with the following line of code:

<link rel="mask-icon" href="path/to/safari-pinned-tab.svg" color="color">

Theme Colour

The theme colour of a website should reflect a corporate colour on your website. On Chrome for Android, the header will be made the colour specified here.

<meta name="theme-color" content="#color">

How hard can it be?

You might be sitting there thinking: ‘OK, there are lots of different sizes, but surely you can just save the image a whole bunch of times with different sizes, can’t you?’. And you’re right, you could do that. Unfortunately, different systems have different capabilities. We have already discussed the fact that for touch icons, Android allows transparency and iOS does not. To take full advantage of that, and make your site icon look good on both platforms, the images need to be different. Another difference is between iOS/Android and Windows tiles. Android and iOS both only allow small, square icons. Windows accommodates for much larger tiles as well as rectangular tiles. To take advantage of both of these, you need yet more variations of the file. All this means that it can take a long time to get things right.

So, what is needed?

In an ideal world, every site would have all of these different images available. If, however, the time or budget is not available initially, then below is a list of 6 steps that we would suggest as a minimum. All the other items can be added when the budget permits or, if you’re one of our clients, under a Support Contract.

  • favicon.ico, this file is a bare minimum.  If it is not available, 404 errors could start to occur.
  • favicon-__.png, as the images are the same but in a different format, creating the PNGs isn’t much work if the .ico file has already been designed and created.
  • iOS Touch Icon, 180x180px version. Apple will scale down from this if necessary although you might be downloading files that are larger than necessary. Old versions of Android should also use this if Android-specific files are not available.
  • Manifest.json with Android PNGs, As a minimum, include the 192x192px png and then Chrome on Android will scale down the image.
  • Single Windows 8.1+ Tile, for basic support, a single 150x150px will provide an icon for the medium tile on Windows 8.1+.
  • Safari Pinned Tab, this will conclude basic support for all updated devices.

How can we help?

Hopefully this article will enable you to create a fantastic favicon and touch icons for your website. If, however, you’re still having problems and would like some help, just email Matt or call us on 01284 774775.

let’s work together