Back

The favicon is dead, long live the favicon

31 August 2018

Simon Foster

Who doesn’t love a favicon? These tiny little logos have been a mainstay of web design for almost 20 years and show no sign of abating. Originally introduced by Microsoft for IE5, the favicon meant web designers could add their own tiny bit of branding to a users list of bookmarked pages. At the time, a chance to make your page stand out with your own colourful logo was an opportunity no web designer could resist, as such adoption was quick and favicons soon became a staple of the modern web experience.

Fast forward to 2018, and the online landscape is barely recognisable. Unlike back in 1999, our browsers now support multiple tabs, and our screens are littered with these tiny little icons – we use them constantly to easily identify which browser tab we want to access. There’s also the proliferation of devices, screen sizes and resolutions; from smartphones and tablets through to smart TVs, games consoles, ebook readers and wrist watches – the list goes on and on. So what role does the old-fashioned favicon have to play in our multi-device, 4k, PWA era?

The truth is the favicon may be with us in spirit, but its significance is waning, even if the number of branded icons decorating the screens of our many devices is growing. The favicon format has been superseded by more modern implementations that use high quality images for a whole new set of uses.  The problem with modern day favicons (as anyone who’s encountered vendor prefixes when writing CSS will understand) is that each browser has their own take on how to best to display your icon, meaning instead of including one simple favicon image you are now required to create a whole host of images in different sizes and formats. Supporting the four most popular browsers (Chrome, Firefox, Safari, Edge) running on the four most popular operating systems (Windows, macOS, iOS, Android) can get complicated.

Favicons in 2018

What made the old .ico format popular in the first place was its ability to support multiple images. A correctly made favicon.ico would actually be 3 different images in a single file (usually 16×16, 32×32 and 48×48). With HTML5 and the ‘sizes’ image attribute, this can now be done with markup. So instead of a single .ico file, use 3 different PNG graphics. We also use updated sizes, to account for modern screen resolutions.

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

Perfectly simple so far, right? Wrong. Sadly PNG favicons are not supported on older versions of IE, so if you want to support IE9 and below, you’ll need to include an old style favicon.ico, too. Given that even Microsoft have stopped supporting anything older than IE11, this isn’t something to worry about unless you have a specific reason to support those older versions of IE.

Apple touch icons

Touch icons were introduced by Apple, so that users could save a link to your website on their mobile desktop, via the ‘Add to Homescreen’ option. This makes your website appear on the users phone like just like an app, and as such it requires a larger image. The original touch icons were 57×57, but there have been a whole host of different Apple devices running iOS released since, plus the introduction of retina screens that have made that obsolete. In order to support modern Apple devices, including the following, with the default (ie. the one not using the ’sizes’ attribute) sized to 120×120:

<link rel="apple-touch-icon" href="apple-touch-120x120.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-180x180.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-152x152.png"> 
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-167x167.png">

So that’s Apple devices taken care of, right? Once again, it’s not that simple. In actual fact, you don’t need any of the above markup for your touch icons to work on modern Apple devices. If the images are included in the root folder of your website, then the most appropriate touch icon will automatically be displayed by iOS. So why do we include them in our markup? Well, touch icons have become weirdly ubiquitous, meaning a whole host of non-Apple products use them, including Google’s own Android and Chrome (yes, really). So for now at least, it’s best to include the above to support all those non-Apple products.

Icons on Android

As mentioned above, Google use the ‘apple-touch-icon’ on a whole range of their own applications, but to optimise for Android, you need to create a web app manifest file (without one of these, users will not get an ‘Add to home screen’ option). This might sound complex, but it’s actually just a tiny JSON file that tells Android how to display your site. Firstly, you’ll want to create a file called ‘site.webmanifest’ and paste something like this into it:

{
  "name": "Your Awesome Site",
  "short_name": "Your Site",
  "description": “Your description goes here.“,
  "background_color": "#000000",
  "theme_color": "#cccccc",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
}

You’ll notice there are links to 2 more icons here. Google recommends including 192×192 and 512×512 icons, Android will then select the most appropriate one depending on the device being used. Once you’ve created your manifest file and icons, you’ll need to add a link to it.  That goes in your document’s <head>:

<link rel="manifest" href="/site.webmanifest">

For further customisation you can also change the colour of the browser, by adding your own theme colour. Simply add the following underneath the link to your manifest file:

<meta name="theme-color" content=“#000000” />

Icons on Windows

So now we have icons for Apple devices (and all the other applications using ‘apple-touch’), and now we’ve set up a manifest for Android. What’s left? Well, only the worlds most popular operating system, our old friend Windows.

Since Microsoft introduced ‘Metro’ in Windows 8, users can add websites to their Windows start screen in the form of a ‘tile’. To control how this tile is displayed, you’ll need to create another file, this time an XML file called ‘browserconfig.xml’. Inside this file, you’ll need to paste in something like this:

<?xml version="1.0" encoding="utf-8"?>
  <browserconfig>
    <msapplication>
      <tile>
        <square70x70logo src="/mstile-70x70.png"/> 
        <square150x150logo src="/mstile-150x150.png"/>
        <square310x310logo src="/mstile-310x310.png"/>
        <wide310x150logo src="/mstile-310x150.png"/>
        <TileColor>#000000</TileColor>
    </tile>
  </msapplication>
</browserconfig>

For Windows, you’ll need to add four more icons, again in PNG format. These icons will sit in the middle of a tile, so they will look best with a transparent background. You can then specify the colour of the tile that appears ‘behind’ your logo. For the final step, just add this link to your website’s <head>, pointing at your newly created XML file:

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

Anything else? There sure is…

Not content with using their own ‘apple-touch-icon’, those guys at Apple have created another icon type, this one is called ‘mask-icon’. Currently, this is used specifically when a browser tab in Safari is ‘pinned’. This is a pretty niche use, but there is something unique about the ‘mask-icon’ that means it’s probably worth doing. Unlike all the above, the mask-icon uses SVG files instead of PNGs. Whilst at first it might seem incredibly annoying to use a different file type, progression to SVG favicons makes a great deal of sense. When you consider all the above icons and all their different sizes – it would save a lot of work if instead we could use 1 image that was scalable to different sizes. This is where SVGs come in, and why the mask-icon (or something very similar) might just be the future of favicons.

To add your mask icon, simply add the following line to your <head> and create a suitable SVG graphic, sized at 700×700 and in a single colour. Your icon will appear as dark grey when not being used but when the user switches to your tab, the SVG graphic will change to the colour you specify.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#000000">

I did say it was complicated!

That is how to setup favicons for all the major browsers and operating systems. It might seem like a lot, but the scary thing is you could add even more icons, if you want to support older versions of iOS and a bunch of niche Android uses. At some point we have to draw a line, and my line is somewhere around here. With that in mind, this is in the final code you’ll need in your website’s <head>:

<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="apple-touch-icon" href="apple-touch-120x120.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-167x167.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content=“#000000” />
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#000000">

Don’t forget, you’ll need to create the ‘site.webmanifest’ and ‘browserconfig.xml’ files too. It’s certainly a lot more work than the single favicon.ico file we grew to love so quickly, but the above will mean you cover most modern uses for favicons across the most popular devices and browsers.

If you are looking for a quick automated solution to create your icons, check out RealFaviconGenerator, a great tool that covers all of the above and plenty more.