davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>How to Favicon in 2021: Six files that fit most needs (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>How to Favicon in 2021: Six files that fit most needs</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <article class="post__intro">
  <p>It is time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Currently, frontend developers have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs.</p>
</article>

<p>The favicons proved to be a more exhaustive topic that anyone could wish for, so I also summarized a whole article in just two code snippets for those who suffered enough and know exactly what to do. Still, I recommend geeking out to the rest of it!</p>

<h2 id="extremely-short-version">Extremely short version</h2>

<p>Instead of serving dozens of icons, all you need is just <strong>five</strong> icons and one JSON file.</p>

<p>In your HTML, for the browser:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/favicon.ico"</span> <span class="na">sizes=</span><span class="s">"any"</span><span class="nt">&gt;</span><span class="c">&lt;!-- 32×32 --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/icon.svg"</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"/apple-touch-icon.png"</span><span class="nt">&gt;</span><span class="c">&lt;!-- 180×180 --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"manifest"</span> <span class="na">href=</span><span class="s">"/manifest.webmanifest"</span><span class="nt">&gt;</span>
</code></pre></div></div>

<p>And in your web app manifest:</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">//</span><span class="w"> </span><span class="err">manifest.webmanifest</span><span class="w">
</span><span class="p">{</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<p>That is it. If you want to know how I arrived at this, which compromises I had to take, and how to build a set like this from scratch in a step-by-step fashion, tune in for the rest of the article.</p>

<h2 id="long-version-where-everything-is-explained">Long version, where everything is explained</h2>

<div class="post__note">
  <p>“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”</p>

  <p>—Antoine de Saint-Exupéry, Airman’s Odyssey</p>
</div>

<p>A concept of a favicon, short for “favorite icon”, have been around since the early 2000s. We all see those cute little images in your browser’s tab bar that help tell open websites apart every day. Users <em>expect</em> your website to have a favicon. It’s one of those little things that make other people take you seriously.</p>

<p>Even Apple, which always had some aesthetic beef with icons that don’t come from Cupertino and downplayed favicons in Safari for years, had finally given up and now displays them properly across all of its devices.</p>

<blockquote>
  <p>If you have a public-facing website, it has to have a favicon. Sadly, what users perceive as one icon—is actually <em>a lot</em> of them.</p>
</blockquote>

<p>So it is common to offload the grueling task of generating necessary files for the ever-growing list of screens and devices to favicon generator tools. No human in their right mind would want to spend hours creating them by hand. We are here to build websites, after all, not make browser vendors happy.</p>

<figure class="post-media post-media--centered">
  <p><img class="post-media__object" alt="A set of favicons generated by a popular online generator" src="https://cdn.evilmartians.com/front/posts/how-to-favicon-in-2021-six-files-that-fit-most-needs/generated-e1f0bbd.png"></p>
  <figcaption class="post-media__caption">
    <p>A set of favicons generated by a popular online generator</p>
  </figcaption>
</figure>

<p>As a creator of <a href="https://github.com/ai/nanoid/">NanoID</a> and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises?</p>

<p>So, I set out to create a minimal list of favicons that will work in all cases and in all browsers, barring some edge cases where it will still work, just not 100% perfectly.</p>

<h2 id="the-ultimate-favicon-setup">The Ultimate Favicon Setup</h2>

<p>Instead of creating many images with different sizes, I decided to rely on SVG and browser downscaling. If you are concerned about performance, I am here to set the record straight:</p>

<ul>
  <li>browsers download favicons in the background, so a bigger favicon image does not affect website performance;</li>
  <li>SVG is a great way to reduce image size for images that are not supposed to be bitmaps in the first place; for many <em>logos</em>, the resulting file will be much smaller than a PNG;</li>
  <li>With just three PNG images in this minimum set, you can use advanced tools to optimize their size. It solves a problem for Internet users that don’t have unlimited data plans.</li>
</ul>

<p>Here comes the minimal set of icons that I came up with in my research and practice. It should work with all popular browsers and devices, old and new.</p>

<h4 id="i-faviconico-for-legacy-browsers">I. favicon.ico for legacy browsers</h4>

<p>ICO files actually have a <a href="https://en.wikipedia.org/wiki/ICO_(file_format)#Icon_resource_structure">directory structure</a> and can pack files with different resolutions. I recommend sticking to a single 32×32 image, unless the one you have doesn’t downscale well to 16×16 (becomes blurry, for instance). In that case, you can ask your designer to come up with a special version of the logo that is tailored to fit small pixel grids.</p>

<p>Don’t get smart with folder static asset folder structure and cache busters. <code>https://example.com</code> website should have a favicon on <code>https://example.com/favicon.ico</code>. Some tools, like RSS readers, just request <code>/favicon.ico</code> from the server and don’t bother looking elsewhere.</p>

<p>We need <code>size="any"</code> for <code>&lt;link&gt;</code> to <code>.ico</code> file to fix <a href="https://twitter.com/subzey/status/1417099064949235712">Chrome bug</a> of choosing ICO file over SVG.</p>

<h4 id="ii-a-single-svg-icon-with-lightdark-version-for-modern-browsers">II. A single SVG icon with light/dark version for modern browsers</h4>

<p>SVG is a vector format that describes curves instead of pixels. On large sizes, it is more efficient than raster images. <a href="https://caniuse.com/link-icon-svg">72% of all browsers</a> support SVG icons as of this writing.</p>

<p>Your HTML page should have a <code>&lt;link&gt;</code> tag in its <code>&lt;head&gt;</code> with <code>rel="icon"</code>, <code>type="image/svg+xml"</code> and <code>href</code> with a link to SVG file as attributes.</p>

<p>SVG is an XML format and can contain a <code>&lt;style&gt;</code> tag that describes CSS. As any CSS, it can contain media queries like <code>@media (prefers-color-scheme: dark)</code>. This will allow you to toggle the same icon between <a href="https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/">light and dark system themes</a>.</p>

<h4 id="iii-180180-png-image-for-apple-devices">III. 180×180 PNG image for Apple devices</h4>

<p>Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. Your HTML page should have <code>&lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;</code> tag in a <code>&lt;head&gt;</code>.</p>

<p>iPads since iOS 8+ require a 180×180 resolution. Other devices will downscale the image, but if we provide the source with a good-enough quality, the downscaling won’t hurt the end-user (I’ll come back to it later).</p>

<p>Small note: an Apple touch icon will look better if you add a <code>20px</code> padding around the icon and put some background color. You can use any image editor for that.</p>

<h4 id="iv-web-app-manifest-with-192192-and-512512-png-icons-for-android-devices">IV. Web app manifest with 192×192 and 512×512 PNG icons for Android devices.</h4>

<ul>
  <li>Web app manifest is a JSON file with all details for a browser to install your website as a system application. The format came from Google for its <a href="https://en.wikipedia.org/wiki/Progressive_web_application">PWA</a> initiative.</li>
  <li>Your HTML page should have a <code>&lt;link rel="manifest" href="path.webmanifest"&gt;</code> tag with a link to manifest file.</li>
  <li>Manifest should have an <code>icon</code> field that links to two icons: 192×192 displayed on a home screen and 512×512 that will be used as a splash screen as PWA is loading.</li>
</ul>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<h2 id="did-we-forget-anyone">Did we forget anyone?</h2>

<p>There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some less successful formats out there.</p>

<h4 id="windows-tile-icon">Windows Tile Icon</h4>

<p>Microsoft Edge used to <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/hh772707(v=vs.85)">support</a> a special icon format to pin websites to Start Menu. For recent versions of Windows, this is no longer required.</p>

<h4 id="safari-pinned-icon">Safari Pinned Icon</h4>

<p>Safari used to have a separate requirement to display an icon in <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html">pinned tabs</a>. However, since Safari 12, we can use a regular favicon for pinned tabs. Even <a href="https://www.apple.com/">apple.com</a> doesn’t use the <code>mask-icon</code> anymore.</p>

<h4 id="relshortcut">rel=”shortcut”</h4>

<p>A lot of (now outdated) tutorials will include a <code>favicon.ico</code> into HTML like this:</p>

<pre><code>&lt;link rel="shortcut icon" href="/favicon.ico" sizes="any"&gt;
</code></pre>

<p>Be warned that <code>shortcut</code> is not, and never was a valid link relation. Read this <a href="https://mathiasbynens.be/notes/rel-shortcut-icon">amazing article</a> by Mathias Bynens from ten years ago that explains why we never needed shortcuts and <code>rel="icon"</code> is just fine.</p>

<h4 id="yandex-tableau">Yandex Tableau</h4>

<p><a href="https://browser.yandex.com/">Yandex Browser</a> is a Chromium-based browser from the biggest Russian search engine. In Russia, it has a 20% market share. It has <a href="https://yandex.com/support/browser-beta/personalization/tableau.html">a nice feature</a> that allows website to display live data in widgets on a home screen through a special JSON manifest provided by the <code>yandex-tableau-widget</code> link. However, the feature proved not to be very popular, and now Yandex has removed the technical documentation for it from its website. Regular icon manifests will work just as well.</p>

<h4 id="opera-coast">Opera Coast</h4>

<p>Opera Coast, an experimental browser for iOS, used to require a special 228×228 icon. The browser left the App Store in 2017, and I doubt it has survived multiple iOS updates since then.</p>

<p>Now, as we waved good-bye to fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing.</p>

<h2 id="how-to-build-our-ultimate-favicon-set">How to build our Ultimate Favicon Set</h2>

<p>Here’s how to build our ultimate, minimalistic favicon set in six quick steps. All you need to start is an SVG file for the logo that you want to use.</p>

<h4 id="step-1-prepare-the-svg">Step 1: Prepare the SVG</h4>

<p>Be sure that the SVG image is <em>square</em>. Open the source file in your system viewer and check the image’s width and height. It is easy to adjust the SVG size in any SVG editor. In <a href="https://inkscape.org/">Inkscape</a>, you can change document size in File → Document Properties and center the logo using Object → Align and Distribute.</p>

<p>Save your file as <code>icon.svg</code>. Now let’s fiddle with our SVG, so it plays well with modern system <em>themes</em>. Ask your designer how the colors should be inverted in a dark theme (for B&amp;W logos, you just change black to white).</p>

<p>Now, open your SVG file in a <em>text</em> editor. Find a <code>&lt;path&gt;</code> with dark or missing <code>fill</code>. Add a CSS media query that triggers on theme changes and change <code>fill</code> to the colors you want:</p>

<div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"&gt;
<span class="gi">+   &lt;style&gt;
+     @media (prefers-color-scheme: dark) {
+     .a { fill: #f0f0f0 }
+     }
+   &lt;/style&gt;
</span><span class="gd">-   &lt;path fill="#0f0f0f" d="…" /&gt;
</span><span class="gi">+   &lt;path class="a" fill="#0f0f0f" d="…" /&gt;
</span>  &lt;/svg&gt;
</code></pre></div></div>

<h4 id="step-2-create-an-ico-file">Step 2: Create an ICO file</h4>

<p>Open your <code>icon.svg</code> file in a raster graphics editor. I recommend <a href="https://www.gimp.org/">GIMP</a>; it’s free and multi-platform.</p>

<p>Accept rendering SVG to raster. Set width and height to 32 pixels. Export file to <code>favicon.ico</code> using <em>32 bpp, 8-bit alpha, no palette</em> settings.</p>

<p>If you do not have GIMP you can install <a href="https://inkscape.org/">Inkscape</a> and <a href="https://www.imagemagick.org/script/download.php">ImageMagick</a> and convert SVG to ico in terminal:</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>32 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./tmp.png"</span>
<span class="c"># In Windows call `magick convert ./tmp.png ./favicon.ico`</span>
convert ./tmp.png ./favicon.ico
<span class="nb">rm</span> ./tmp.png
</code></pre></div></div>

<p>Scale the image down to 16×16 and check icon visibility. If it became too blurry, it would be better to ask your designer for a custom tiny version of the logo.</p>

<p>To include a separate 16×16 version of an icon:</p>

<ol>
  <li>Open <code>favicon.ico</code> with 32×32 icon.</li>
  <li>Create a new layer with 16×16 size.</li>
  <li>Put a 16×16 version of an icon into this layer.</li>
  <li>Export the file. GIMP will save each layout as a separate version of an icon.</li>
</ol>

<p>Or you can do the same in ImageMagick by:</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>convert ./icon-32.png ./icon-16.png ./favicon.ico
</code></pre></div></div>

<h4 id="step-3-create-png-images">Step 3: Create PNG images</h4>

<p>Open your source SVG file in a raster graphics editor again and create a 512×512 image. Export it as <code>icon-512.png</code>.<br>
Scale the image to 192×192 and export it to <code>icon-192.png</code>. Now scale the image itself to 140×140 and set the canvas to 180×180, and export as <code>apple-touch-icon.png</code>.</p>

<p>Or you can do the same in Inkscape by:</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>512 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./icon-512.png"</span>
inkscape ./icon.svg <span class="nt">--export-width</span><span class="o">=</span>192 <span class="nt">--export-filename</span><span class="o">=</span><span class="s2">"./icon-192.png"</span>
</code></pre></div></div>

<h4 id="step-4-optimize-png-and-svg-files">Step 4: Optimize PNG and SVG files</h4>

<p>The best tool to optimize SVGs is <a href="https://github.com/svg/svgo">SVGO</a>. Run:</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx svgo <span class="nt">--multipass</span> icon.svg
</code></pre></div></div>

<p><a href="https://squoosh.app/">Squoosh</a> is a great web app to optimize raster images.</p>

<ol>
  <li>Open your <code>icon-512.png</code> in Squoosh.</li>
  <li>Change Compress setting to <code>OxiPNG</code>.</li>
  <li>Enable “Reduce palette”.</li>
  <li>Set 64 colors.</li>
  <li>Compare before/after by moving a slider. If you see a difference, increase the number of colors.</li>
  <li>Save the file.</li>
</ol>

<p>Repeat these steps for <code>icon-192.png</code> and <code>apple-touch-icon.png</code>.</p>

<h4 id="step-5-add-icons-to-html">Step 5: Add icons to HTML</h4>

<p>You need to add links to <code>favicon.ico</code> and to <code>apple-touch-icon.png</code> into your HTML.</p>

<p>For static HTML:</p>

<div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;title&gt;My website&lt;/title&gt;
<span class="gi">+ &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
+ &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
+ &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
</span></code></pre></div></div>

<p>However, we recommend using a bundler to generate cache busters (include file’s hash in a name as a fingerprint). If you are using Webpack with [<code>html-webpack-plugin</code>]:</p>

<ol>
  <li>
    <p>Create <code>index.html</code> template.</p>
  </li>
  <li>
    <p>Add template to plugin options:</p>

    <div class="language-js highlighter-rouge">
<div class="highlight"><pre class="highlight"><code><span class="k">new</span> <span class="nx">HtmlWebpackPlugin</span><span class="p">({</span> <span class="na">template</span><span class="p">:</span> <span class="dl">"</span><span class="s2">./view/index.html</span><span class="dl">"</span> <span class="p">});</span>
</code></pre></div>    </div>
  </li>
  <li>
    <p>Define HTML template with links (examples use ERB used to include files, but can be your templating language of choice):</p>

    <div class="language-html highlighter-rouge">
<div class="highlight"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;title&gt;</span>My website<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width,initial-scale=1"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"/favicon.ico"</span> <span class="na">sizes=</span><span class="s">"any"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span> <span class="na">href=</span><span class="s">"&lt;%=
      require('./icon.svg').default
    %&gt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">href=</span><span class="s">"&lt;%=
      require('./apple-touch-icon.png').default
    %&gt;"</span>
   <span class="nt">&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>    </div>
  </li>
  <li>
    <p>Use <a href="https://www.npmjs.com/package/copy-webpack-plugin"><code>copy-webpack-plugin</code></a> to copy <code>favicon.ico</code> <em>without</em> adding a hash to file name.</p>
  </li>
</ol>

<h4 id="free-tip-separate-icon-for-staging">Free Tip: Separate icon for staging</h4>

<p>Favicons are a nice way to distinguish your production environment from a staging one. I find using an alternative icon for staging super effective in avoiding expensive confusions.</p>

<p>Create a <code>favicon-dev.ico</code> with the same logo, but invert the colors (or do something else that makes sense for you). Same for SVG, create <code>icon-dev.svg</code>.</p>

<p>Now, replace icons in your HTML template depending on <code>process.env.NODE_ENV === 'production'</code> condition:</p>

<div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My website&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
<span class="gd">-     &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
</span><span class="gi">+     &lt;link rel="icon" sizes="any" href="&lt;%=
+       process.env.NODE_ENV === 'production'
+         ? '/favicon.ico'
+         : require('./favicon-dev.ico').default
+     %&gt;"&gt;
</span>      &lt;link rel="icon" type="image/svg+xml" href="&lt;%=
<span class="gd">-       require('./icon.svg').default
</span><span class="gi">+       process.env.NODE_ENV === 'production'
+         ? require('./icon.svg').default
+         : require('./icon-dev.svg').default
</span>      %&gt;"&gt;
      &lt;link rel="apple-touch-icon" href="&lt;%=
        require('./apple-touch-icon.png').default
      %&gt;"&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;

</code></pre></div></div>

<h4 id="step-6-create-a-web-app-manifest">Step 6: Create a web app manifest</h4>

<p>For static HTML, create a JSON file named <code>manifest.webmanifest</code>:</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"My website"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"icons"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-192.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"192x192"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"src"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/icon-512.png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"image/png"</span><span class="p">,</span><span class="w"> </span><span class="nl">"sizes"</span><span class="p">:</span><span class="w"> </span><span class="s2">"512x512"</span><span class="w"> </span><span class="p">}</span><span class="w">
  </span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<p>Link it in your HTML:</p>

<div class="language-diff highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;title&gt;My website&lt;/title&gt;
<span class="gi">+ &lt;link rel="manifest" href="/manifest.webmanifest"&gt;
</span>  &lt;link rel="icon" href="/favicon.ico" sizes="any"&gt;
  &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
  &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
</code></pre></div></div>

<p>With Webpack, you can use <a href="https://www.npmjs.com/package/webpack-pwa-manifest">webpack-pwa-manifest</a> plugin:</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="nx">plugins</span><span class="p">:</span> <span class="p">[</span>
    <span class="err">…</span><span class="p">,</span>
    <span class="k">new</span> <span class="nx">WebpackPwaManifest</span><span class="p">({</span>
      <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">My website</span><span class="dl">'</span><span class="p">,</span>
      <span class="na">icons</span><span class="p">:</span> <span class="p">[</span>
        <span class="p">{</span> <span class="na">src</span><span class="p">:</span> <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">./icon-192.png</span><span class="dl">'</span><span class="p">),</span> <span class="na">sizes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">192x192</span><span class="dl">'</span> <span class="p">},</span>
        <span class="p">{</span> <span class="na">src</span><span class="p">:</span> <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">./icon-512.png</span><span class="dl">'</span><span class="p">),</span> <span class="na">sizes</span><span class="p">:</span> <span class="dl">'</span><span class="s1">512x512 }
      ]
    })
  ]
</span></code></pre></div></div>

<hr>

<p>Thank you for reading! As you can see, with modern web standards, the task of creating an ultimate favicon set becomes quite straightforward. And even though following the steps manually shouldn’t take much of your time, having an automated tool to do the same will be even more amazing! Feel free to ping me on <a href="https://twitter.com/sitnikcode">Twitter</a> if you’re willing to build one; I will be more than happy to help!</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>