How to create a favicon and not die trying

Kutu — Sat, 18 Mar 2023 14:15:25 +0000

Where to start?

First you need your icon in SVG without background, this will simply a lot of things after.

Note: If you want to see that your website has a good icon compability you can use the Real Favicon Generator Checker.

HTML Favicon

First link your SVG favicon

<link rel="icon" type="image/svg+xml" href="./favicon.svg">

To handle old web browsers that aren't compatible with SVG you can have a ICO favicon with 16x16, 32x32 and 48x48 resolutions.

<link rel="icon" type="image/x-icon" href="./favicon.ico" sizes="any">

Use sizes="any" to avoid Chrome to ICO insead of the SVG.

Android favicons and PWAs

PWAs and android shortcut icons use two resolutions 192x192 and 512x512. They are defined in the manifest.webmanifest that you should link in your HTML.

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

The manifest.webmanifest is highly configurable but a simple config only for the high res icons looks like this. See MDN Web manifest for more info.

{
    "icons": [
      {
          "src": "./manifest-192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "any maskable"
      },
      {
          "src": "./mainfest-512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "any maskable"
      }
    ]
}

Note: manifest-192.png and manifest-512.png can have a background to make them look better in the Android shortcut icon.

Apple Touch Icon

The Touch icon for Apple devices should have 180x180 resolution, background and a 20px margin to maximize compatibity and make it look good.

<link rel="apple-touch-icon" href="./touch-icon-180.png">

Safari Mask Icon

Safari sometimes use the Touch icon but the tab favicon and favorites it uses the shape for a only-black SVG image with a custom color, so you need to have your SVG icon only in black and transparent and link to your web this way.

<link rel="mask-icon" href="./mask-icon.svg" color="#ffffff">

Windows 8/8.1/10 and Non-Chromium Edge

The tiles shortcuts in Windows 8/8.1/10 have its own configuration file called browserconfig.xml and, in the same way you do it with the manifest.webmanifest you should link it in your HTML this way.

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

Windows Tiles needs 4 resolutions to work correctly 70x70, 150x150, 310x150 and 310x310 but Microsoft recommends to use 126x126, 270x270, 558x270 and 558x558 to maxime compatiblity with high resolution screens. A basic browserconfig.xml configuration only for the high res icons looks like this. I haven't found any official docs about this config file unfortunately.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo   src="./tiles-126.png"/>
      <square150x150logo src="./tiles-270.png"/>
      <wide310x150logo   src="./tiles-558x270.png"/>
      <square310x310logo src="./tiles-558.png"/>
      <TileColor>#000000</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Note: You can put any color you want to the <TileColor> tag if plain black looks bad with your logo.

Automatize all with a script

As you can see the are plenty of images that you will need (even more that I don't going to talk about because are deprecated). To spend less time making the favicon I writed this simple Bash script using inkscape cli and imagemagick. See it in this GitHub Gist. This script should be in the same directory of your SVG favicon, it will create all the needed favicons and the ones that are icons for apps (PWA, Android, Apple Touch, Windows Tiles, etc) will be centered with a black background (you can change the background color for anything you want).

Thanks for reading!

This is my first time writing and article of this type, also I am not a native english speaker so any correction is welcome.

DEV Community: Kutu