Favicons are difficult. Do I need a .ico still? What about Apple touch icon? What sizes? Can’t I just do SVG everywhere? How the hell do you even generate a .ico file?

Thankfully, a static site generator like Eleventy—and its plugin system—can answer all these questions (this might be a short post).

Using the Eleventy Favicon Generation plugin, all I need to do is provide an SVG file, add an include in my base template, and add the plugin to my Eleventy configuration. Then, per the plugin’s documentation:

Given a single square input icon file (preferably .svg), the following is generated:

  • /favicon.svg (only if a svg is provided)
  • /favicon.ico - 64x64/32x32/16x16 legacy icon
  • /apple-touch-icon.png - 180x180 Apple home screen icon including 20px (configurable) colored padding
  • /icon-192.png - Google home screen icon
  • /icon-512.png - Google loading screen
  • /manifest.webmanifest - Manifest linking the Google icons; can be customized with additional data

This greatly simplifies things. In the past, I remember using a tool like RealFaviconGenerator.net and then having to download a bunch of generated files, throw those on the server, and paste in provided markup. This is all handled by the Favicon Generator plugin now.

I created a new favicon in Inkscape (which is way better than I remember it being when I last used it many years ago), exported it, then placed it in my Eleventy site. That’s it.

Well, almost. Here’s what I had to add to my eleventy.config.js:

import faviconsPlugin from "eleventy-plugin-gen-favicons";

// blah blah blah…

eleventyConfig.addPlugin(faviconsPlugin);

And this is what I added to my base.njk template:


<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

This then generates all those files listed above, and places the following in my site’s head:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

And now my favicons are back and better than ever. This should fix the missing favicon.ico that was causing issues with no icon showing in my RSS reader of choice, Reeder.