Here's Everything You Need to Know About Favicons in 2017

Favicons

Favicons have long existed on the web (these are the little icons that appear next to the webpage title in a browser tab), but since many websites are intended as web-apps these days, it’s commonplace to design app icons (known as touch icons) even for websites, and because device resolution varies from device to device, those icons should come in a variety of sizes.

Woah, that was a lot to take in right? Lets run through fav icons and touch icons, and I’ll explain which devices use which icons, and at which size they require those icons to be.

Lets start with favicons.

Favicons

Back in the day we used a little file called a favicon.ico file, and this .ico file contained several .png files at a range of different sizes (because favicons, even back then, were also used for desktop shortcut icons). Since the introduction of the sizes attributes in HTML5, we don’t have to compress the .png files into an .ico format anymore (even though browsers do support .ico still). Favicons are always .png.

But which sizes (px) do we need to support?

  • 16x16: browser favicon
  • 32x32: taskbar shortcut icon
  • 96x96: desktop shortcut icon (and Google TV)

It really comes down to what you want too create support for — this is the HTML5 syntax for displaying favicons:

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

Apple Touch Icons

Apple iOS has a feature called “Add to Home Screen”, which basically makes your mobile website look like an app (it hides the browsers’ address bar and everything); the Apple touch icon offers a device-specific app icon for this makeshift app.

Here’s an updated breakdown of the sizes (px) required:

  • 120x120: iPhone Retina (iOS 7)
  • 180x180: iPhone 6 Plus (iOS 8+)
  • 152x152: iPad Retina (iOS 7)
  • 167x167: iPad Pro (iOS 8+)

And the syntax:

<link rel="apple-touch-icon" href="older-iPhone.png"> // 120px  
<link rel="apple-touch-icon" sizes="180x180" href="iPhone-6-Plus.png">  
<link rel="apple-touch-icon" sizes="152x152" href="iPad-Retina.png">  
<link rel="apple-touch-icon" sizes="167x167" href="iPad-Pro.png">  

Note: anything “retina” and earlier will resize the default 120px icon since no sizes attribute was specified.

For more information on touch icons, see Apple’s official documentation, which also explains how to remove the status bar, add a custom app title, and even a launch screen for your web-app.

Do you actually need to declare these HTML tags in the <head>? No. As long as the touch icons are uploaded to the root folder of the website, Apple will know to look for them there, however other operating systems also use these icons — even Android! It’s better to define them in the <head>.

Windows Metro

Windows 8.1 (Metro UI) uses a tile format to display app icons (with an alternative “Add site to Apps” option), which is a little more complex when compared to other methods, but we’ll start with the sizes (px) before discussing implementation.

  • 70x70
  • 270x270
  • 310x310
  • 310x150

Note: the 270x will be scaled to 150x on low-density screens.

A browserconfig.xml file with the following code should be uploaded to the root directory of your website:

<?xml version="1.0" encoding="utf-8"?>  
<browserconfig>  
  <msapplication>
    <tile>
      <square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>
      <square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
      <square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
      <wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>  

Other Icons

Are there any more? Of course, to name a few:

  • 128x128: Chrome Webstore icon
  • 196x196: Android Chrome icon
  • 228x228: Opera Coast icon

Social Media Shares

You can also specify custom images for those that share your webpages on social media (if you don’t, the sharer can instead choose an image that appears in the webpage’s content). While theoretically, these images can be almost any size, there will be a recommended size depending on where the webpage is being shared (Facebook, Twitter, etc). 1200x630 and larger (and under 1mb, and with a 1.91:1 ratio) is ideal overall.

Each social media site has their own size recommendation for images; this brilliant social media cheatsheet from CSS Tricks will explain which sizes are recommended and their HTML syntax.

Conclusion

People use websites in more ways today, compared to how they did back in the earlier days of the web. Some of us still bookmark webpages, some of us add websites to the home screen and use them like apps, some of us use bookmarking sites like Pocket.

It’s important to keep up to date on each operating system’s requirements for displaying icons; if you don’t, icons will appear blurry and that doesn’t look impressive at all!