How to add a browser tab icon (favicon) for a website?

Comprehensive favicon guide

When it comes to favicons, there's more to the story. Let's dive into the details, ensure compatibility across devices, and master those best practices to turn your website into an eye-candy!

Mastering formats and sizes

Your favicon should be like a chameleon, adapting to different environments. Include multiple sizes like 16x16, 32x32, and 96x96 pixels, to please those picky devices.

<!-- Chameleon meets Swiss Army knife? Spawn of favicon magic! -->
<link rel="icon" sizes="32x32" href="/favicon-32x32.png">


Now, ICO is your old faithful - not exciting but works everywhere, especially with those retro browsers. PNG is the new kid on the block, with a knack for transparency, loved by modern browsers.

Use a favicon generator to transform your image into a masterpiece of different sizes and formats - because who doesn't love tools doing the hard work!

Apple and Microsoft customizations

Be the host with the most. Welcome Apple and Microsoft with open arms:

<!-- Apple loves to feel special. We treat it right! -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Microsoft too likes some love. Customize away! -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">


Android and Chrome

Don't forget your friends Android and Chrome M39+. A well-planned manifest.json will go a long way:

<!-- Welcome to Andrew and Chrome's crib. Make yourself at home with manifest.json. -->
<link rel="manifest" href="/manifest.json">


Within manifest.json, define icons and theme colors for a consistent user experience on these platforms.

Advantages of SVG

SVG favicons are like versatile ninjas. They scale excellently and can have CSS-based theming. Why create extra HTTP requests when one SVG can do the job?

<!-- SVG: the One Ring of favicons. :) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">


Just keep an eye on your SVG's performance and test across different platforms.

Get the most out of your favicons

Go the extra mile with browserconfig.xml for Windows or a well-configured .htaccess file. Cache your favicon and enable GZIP compression.

Craft a cross-device favicon strategy

Take your favicon to the next level by catering to the specific requirements of various browsers and devices.

Taming browsers

Different browsers follow different rulebooks. So, it's important to accommodate the individual needs of IE, Edge, iOS devices and others.

Here's how you can customize the Windows Start screen pins with browserconfig.xml:

<!-- It's not a Transformer. It's a browserconfig.xml! -->
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/smalltile.png"/>
      <square150x150logo src="/mediumtile.png"/>
      <wide310x150logo src="/widetile.png"/>
      <square310x310logo src="/largetile.png"/>
      <TileColor>#FFFFFF</TileColor>
    </tile>
  </msapplication>
</browserconfig>


iOS devices and Android Chrome also have their nuances, which can be captured with certain meta tags:

<!-- Apple has feelings too. Let's color its world. -->
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
<!-- Google is no different. Let's customize it to perfection. -->
<meta name="theme-color" content="#ffffff">


Consistency & performance

Having a well-performing, visually consistent favicon across platforms is not optional - it's essential. Websites like Can I Use provide current compatibility tables, especially when considering SVGs or newer formats.