How to create site icons in 2022 – all about favicon


This article is an English translation articles by Andrey Sitnik from the blog Evil Martians.

It’s time to rethink how we create icon packs for modern browsers and stop the crazy generators. Front-end developers are now forced to create over 20 PNG files to display a tiny website logo on a browser tab or touchscreen. This article will show you how to take a smarter approach and create a minimal icon set that meets most of today’s needs.

The article dives deep into the topic, so I give two code snippets at the beginning for those who have already suffered enough and understand what to do. However, I recommend everyone to read the article in its entirety!

Extremely short version

Instead of creating dozens of icons, let’s get by with creating five icons and one JSON file.

HTML:

<link rel="icon" href="https://habr.com/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="https://habr.com/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://habr.com/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="https://habr.com/manifest.webmanifest">

And the web manifest file:

// manifest.webmanifest
{
	"icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
	]
}

That’s all. If you want to know how I came to this, what compromises I had to resort to, and how to create such a set from scratch step by step, read the main part of the article.

Long version, with all explanations

The favicon concept (short for favorite icon) has been around since the early 2000s. We see those cute little images on our browser tab bar every day, they help us distinguish between open websites. Users expect your site to have a favicon. It’s one of those little things that makes people take you seriously.

Even Apple, which has always had some kind of aesthetic war with icons (they weren’t accepted in Cupertino, hiding the favicon in Safari for years) has finally given up and now displays them correctly on all of its devices.

If you have a public website, it must have a favicon. Many people think that one icon is enough for all devices, but, unfortunately, this is not the case.

As a rule, the grueling task of creating all the necessary files for an ever-growing list of screens and devices is left to the favicon generator tools. No one in their right mind would ever want to spend hours creating them by hand. After all, we’re here to build websites, not to cater to the whims of different browsers.

A set of favicons generated by a popular online generator
A set of favicons generated by a popular online generator

Like a creator Nano ID and a proponent of minimalist libraries, I prefer to think otherwise. What is the most effective website icon set? What formats are outdated? What types of icons can be replaced with small compromises?

So my goal is to create a minimal list of favicons that will work in all cases and in all browsers, except for some rare cases, but even there everything will work, just not 100% perfect.

Perfect Favicon Set

Instead of creating many images of different sizes, I decided to rely on SVG and browser scaling. Don’t worry about performance:

  • Browsers load the favicon in the background, so a large favicon file size does not affect website performance.

  • SVG is a great way to reduce icon size for images that shouldn’t be bitmaps; for many logos, the resulting file will be much smaller than a PNG.

  • With only 3 PNG files, you can afford to optimize them more by tweaking the parameters in sophisticated tools. This will solve the problem of those users who pay for each MB on their Internet tariff.

Now let’s move on to the minimum set that I deduced from my research and excrement. This list should work with all popular browsers and devices, both old and new.

  1. favicon.ico for legacy browsers
    ICO files may contain inside multiple versions images for different sizes. I recommend sticking with a single 32×32 image. The 16×16 version is only worth creating if the logo doesn’t get too blurry or your designer can manually redraw it to that size.

    It is this file that is best kept at the exact address: https://example.com without cache busters and tricky ways. The icon must be on https://example.com/favicon.ico. Some tools, like RSS readers, simply ask /favicon.ico from the server and don’t bother looking elsewhere.

    We need sizes="any" for <link> per file .icoto fix Chrome errordue to which it selects the ICO file instead of the SVG.

  2. Single SVG icon with light/dark version for modern browsers
    SVG is a vector format that describes curves instead of pixels. At larger sizes, this is more efficient than bitmaps. At the time of this writing 72% of all browsers support SVG icons.

    Your HTML page must have the tag <link> in <head> With rel="icon", type="image/svg+xml" and with hrefcontaining a link to an SVG file with attributes.

    SVG is an XML format, it can contain a tag <style> to describe CSS. As with any CSS, it can contain media queries such as @media(preferences-color-scheme: dark). This will allow you to toggle the same icon between light and dark system themes.

  3. 180×180 PNG image for Apple devices

    The Apple touch icon is an image for the iPhone or iPad desktop. Your HTML page should have the tag <link rel="apple-touch-icon" href="https://habr.com/ru/post/672844/apple-touch-icon.png"> inside <head>.

    Starting with iOS 8+, iPad requires a 180×180 resolution image. Older devices will scale it down. The issue of performance is explained above.

    A quick note: the Apple touch icon will look better if it’s padded to the size 20 pixels and add a background color. You can use any graphics editor for this.

  4. Web application manifest with 192×192 and 512×512 PNG icons for Android devices

    – The web application manifest is a JSON file containing all the information the browser needs to install your website as a system application. This format appeared at Google as part of an initiative PWA.

    Your HTML page must contain the tag <link rel="manifest" href="https://habr.com/ru/post/672844/path.web manifest"> with a link to the manifest file.

    The manifest must have a field iconwhich refers to two icons: 192×192 to display on the home screen and 512×512 to be used as a splash screen when loading the PWA.

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Have we forgotten someone?

Of course, there are other favicon options as well. Next, I explain why they are deprecated. Perhaps it’s time to say goodbye to some of the less successful formats.

Windows tile icon

Microsoft Edge before supported a special icon format for pinning websites to the start menu. For recent versions of Windows, this is no longer required.

Pinned Safari Icon

Previously, Safari required a monochrome SVG icon for pinned tabs. However, since Safari 12, we can use the regular icon for pinned tabs. Even apple.com no longer uses mask-icon.

rel=”shortcut”

Many (now obsolete) manuals will include an icon favicon.ico in HTML like this:

<link rel="shortcut icon" href="https://habr.com/favicon.ico" sizes="any">

Keep in mind that shortcut is not, and never was, valid in relation to a link. Read this amazing article Matthias Bynens ten years ago, which explains why you need to write simply iconbut not shortcut icon.

Yandex Tableau

Yandex browser is a Chromium-based browser from the largest Russian search engine. In Russia, its market share is 20%. He has nice featurewhich allows a website to display current data in widgets on the home screen using a custom JSON manifest provided by the link yandex-tableau-widget. However, this feature did not prove to be very popular, and Yandex has now removed the relevant technical documentation from its website. Regular icon manifests will work just as well.

Opera Coast

In the past, Opera Coast, an experimental browser for iOS, required a special 228×228 icon. This browser left the App Store in 2017 and I doubt it has experienced numerous iOS updates since then.

Now that we’ve said goodbye to our fallen comrades, let’s take a look at how to create the perfect favicon set for those still standing.

How to create the final favicon set

Here’s how to create our perfect minimalist icon set in six quick steps. All we need to get started is the SVG file of the logo you want to use.

Step 1: Preparing the SVG

Make sure the SVG image is square. Open the source file in your system viewer and check the width and height of the image. SVG size is easy to adjust with any SVG editor. AT inkscape you can resize the document by selecting File → Document Propertiesand then center the logo with Object → Align и Distribute.

Save your file as icon.svg. Now let’s work with the SVG and make it work well with modern system themes. Ask your designer how to invert colors for a dark theme (in black and white logos, you just change black to white).

Now open your SVG file in a text editor. Find <path> with dark or no fill. Add a CSS media expression that will fire when the theme changes, and change the fill to the colors you want:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+   <style>
+     @media (prefers-color-scheme: dark) {
+     .a { fill: #f0f0f0 }
+     }
+   </style>
-   <path fill="#0f0f0f" d="…" />
+   <path class="a" fill="#0f0f0f" d="…" />
  </svg>

You can also use this method with an SVG media expression to add P3 colors with a wide gamut to your icons.

Step 2: Create an ico file

Open your file icon.svg in the raster graphics editor. I recommend GIMP; it is free and multi-platform.

Agree to convert SVG to bitmap. Set the width and height to 32 pixels. Export the file to favicon.ico using settings: 32 bpp, 8-bit alpha, no palette settings (32 bpp, 8-bit alpha, no palette).

If you don’t have GIMP you can install inkscape and ImageMagick and convert SVG to ICO in terminal:

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# In Windows call `magick convert ./tmp.png ./favicon.ico`
convert ./tmp.png ./favicon.ico
rm ./tmp.png

Scale down the image to 16×16 and check how the icon looks. If it gets too blurry, it’s best to ask your designer to make a tiny custom version of the logo.

To enable a separate 16×16 version of the icon:

  1. open icon favicon.ico with a 32×32 icon.

  2. Create a new layer 16×16.

  3. Place a 16×16 version of the icon on this layer.

  4. Export the file. GIMP will save each layout as a separate version of the icon.

Or you can do the same in ImageMagick with:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Step 3: Create png images

Open the original SVG file again in a bitmap editor and create a 512×512 image. Export it asicon-512.png.

Scale the image to 192×192 and export it to icon-192.png. Now scale the image itself to 140×140 and set the canvas size to 180×180, then export it as apple-touch-icon.png.

Or you can do the same in Inkscape:

inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"

Step 4: Optimizing SVG and PNG files

The best tool to optimize svg is SVGO. To use it, run:

npx svgo --multipass icon.svg

Squoosh – great web application for optimizing bitmaps:

  1. Open icon-512.png in Squosh.

  2. Change the compression setting to OxiPNG.

  3. Enable palette reduction: “Reduce palette”.

  4. Set 64 colors.

  5. Compare “before” and “after” by moving the slider. If you see a difference, increase the number of colors.

  6. Save the file.

    Repeat these steps for icon-192.png and apple-touch-icon.png.

Step 5: Adding Icons to the HTML

You need to add links to favicon.ico and in apple-touch-icon.png to your HTML.

For static HTML:

  <title>My website</title>
+ <link rel="icon" href="https://habr.com/favicon.ico" sizes="any">
+ <link rel="icon" href="https://habr.com/icon.svg" type="image/svg+xml">
+ <link rel="apple-touch-icon" href="https://habr.com/apple-touch-icon.png">

However, we recommend using a package to create cache busters (a hash of the file in the name so that when the file changes, the browser will download the new version). If you are using webpack with [html-webpack-plugin]:

  1. Create index.html sample.

  2. Add template to plugin options:

    new HtmlWebpackPlugin({ template: "./view/index.html" });
  3. Define an HTML template with links (examples use HtmlWebpackPlugin to include files, but it can be the templating language of your choice):

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>My website</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="icon" href="https://habr.com/favicon.ico" sizes="any">
        <link rel="icon" type="image/svg+xml" href="https://habr.com/ru/post/672844/<%=
          require("./icon.svg').default
        %>">
        <link rel="apple-touch-icon" href="https://habr.com/ru/post/672844/<%=
          require("./apple-touch-icon.png').default
        %>"
       >
      </head>
      <body></body>
    </html>
  4. Use copy-webpack-plugin to copy favicon.ico without adding a hash to the filename.

Step 6: Create a web app manifest

For static HTML, create a JSON file named: manifest.webmanifest:

{
  "name": "My website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

And add to your html file:

  <title>My website</title>
+ <link rel="manifest" href="https://habr.com/manifest.webmanifest">
  <link rel="icon" href="https://habr.com/favicon.ico" sizes="any">
  <link rel="icon" href="https://habr.com/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="https://habr.com/apple-touch-icon.png">

When working with Webpack you can use the plugin webpack-pwa-manifest:

  plugins: [
    …,
    new WebpackPwaManifest({
      name: 'My website',
      icons: [
        { src: resolve('./icon-192.png'), sizes: '192x192' },
        { src: resolve('./icon-512.png'), sizes: '512x512 }
      ]
    })
  ]

Thank you for reading! With modern web standards, it’s easy to create your own set of icons, even by hand. But this does not mean that we are against automation. If you have something to add to the icon set – write to me at Twitter.

Author: Andrey Sitnik
Website, twitter

Translation: Mikhail Gok

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *