Adding a Favicon

A favicon is the small icon that appears in browser tabs, bookmarks, and home-screen shortcuts. This starter already ships with a favicon set in src/assets/favicons/, and because the whole src/assets folder is already passthrough-copied in .eleventy.js, swapping in your own brand is just two steps: replace the files and the icons are served automatically. They're already linked in base.html.

Step 1

Generate a full favicon set

Best practice

Start from a square source image (512×512 or larger, or an SVG) and run it through a generator like realfavicongenerator.net or favicon.io. It outputs every size and format you need for modern browsers, iOS, and installable web apps.

Step 2

Drop the files into src/assets/favicons/

Replace the placeholder icons in src/assets/favicons/ with the files your generator produced (keep the same filenames so the existing <head> links keep working):

project structure

my-codestitch-site/
├─ .eleventy.js
└─ src/
   ├─ _includes/
   │  └─ layouts/
   │     └─ base.html
   └─ assets/
      └─ favicons/
         ├─ favicon.svg
         ├─ favicon.ico
         ├─ favicon-96x96.png
         ├─ apple-touch-icon.png
         └─ site.webmanifest

You don't need to touch .eleventy.js, the kit already passthrough-copies the entire src/assets folder, so anything inside it is served as-is:

.eleventy.js

module.exports = function (eleventyConfig) {
  // The whole assets folder is copied to the output, so
  // src/assets/favicons/* is served at /assets/favicons/*
  eleventyConfig.addPassthroughCopy("./src/assets");

  return {
    dir: { input: "src", output: "public", includes: "_includes" },
  };
};

Eleventy only copies files you opt in with addPassthroughCopy. Because this kit copies ./src/assets with its path preserved, src/assets/favicons/favicon.svg becomes /assets/favicons/favicon.svg inside the public output, note the icons keep the /assets/favicons/ prefix, not the site root.

Step 3

They're already linked in base.html

The shared layout (src/_includes/layouts/base.html) already declares the links inside its <head> so every page picks them up. If you renamed any files, update these paths to match:

src/_includes/layouts/base.html

<head>
  {% comment %} Older browsers / fallback PNG {% endcomment %}
  <link rel="icon" type="image/png" href="/assets/favicons/favicon-96x96.png" sizes="96x96" />

  {% comment %} Modern browsers: crisp, scalable SVG {% endcomment %}
  <link rel="icon" type="image/svg+xml" href="/assets/favicons/favicon.svg" />

  {% comment %} Legacy ICO fallback {% endcomment %}
  <link rel="shortcut icon" href="/assets/favicons/favicon.ico" />

  {% comment %} iOS home-screen icon {% endcomment %}
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png" />

  {% comment %} PWA / Android install metadata {% endcomment %}
  <link rel="manifest" href="/assets/favicons/site.webmanifest" />
</head>

The result is the little icon next to your page title:

My CodeStitch Site

mycodestitchsite.com

One favicon.svg can recolor itself for each theme, try the toggle.

Not showing up?

First confirm the files actually landed in public/assets/favicons/ after a rebuild, if not, double-check the addPassthroughCopy line in .eleventy.js. Favicons are also aggressively cached, so do a hard refresh (Ctrl/Cmd + Shift + R), open the page in a private window, or append a cache-buster like /assets/favicons/favicon.svg?v=2. And make sure each path starts with a leading /.