How do I add a favicon in Eleventy (11ty)?

Use eleventyConfig.addPassthroughCopy in eleventy.config.js (or .eleventy.js) to copy your icon files into _site, then add the link tags to the of your base layout in the _includes folder. Eleventy will not ship unreferenced static files otherwise.

Why isn't my favicon copied to _site in Eleventy?

Eleventy only copies files you tell it to. Add an addPassthroughCopy rule for the favicon file or folder in your config, then rebuild and check _site - the icons should appear at the path your link tags reference.

What is the Eleventy config file called?

Eleventy 3.x looks for eleventy.config.js (or eleventy.config.mjs/cjs); the older .eleventy.js name still works. Put your addPassthroughCopy calls there. Version 3 supports ESM, so export default a config function.

Where do the favicon link tags go in Eleventy?

In the of your base layout in the _includes folder, so every page that extends it gets the icons. Reference them with root-absolute paths that match where addPassthroughCopy places the files.

All platforms

Favicon for Eleventy (11ty)

How to add a favicon in Eleventy (11ty)

To add a favicon in Eleventy (11ty), use addPassthroughCopy in your config file (eleventy.config.js or .eleventy.js) to copy the icon files into the _site output, then add the <link> tags to your base layout in the _includes folder. Eleventy does not copy unreferenced static files unless you tell it to.

What you need

favicon.ico plus PNG favicons (32x32), a 180x180 apple-touch-icon, and 192/512 PWA icons.
An addPassthroughCopy rule in eleventy.config.js (or .eleventy.js) so the files reach _site.
A base layout in _includes whose <head> holds the icon link tags.

Step-by-step: add a favicon in Eleventy (11ty)

Generate the icon set. Use Logo2Favicon to produce favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, a maskable icon, and the manifest - all in-browser, nothing uploaded.
Add an addPassthroughCopy rule. In eleventy.config.js (or .eleventy.js), call eleventyConfig.addPassthroughCopy to copy your icon files (or a folder of them) into the _site output so they ship to the build.
Link the icons in the base layout. Open your base layout in _includes (e.g. _includes/base.njk or layout.njk) and add the icon, apple-touch-icon, and manifest link tags inside <head> using root-absolute paths.
Build and verify. Run npx @11ty/eleventy and check _site for the copied files, then confirm the tab icon and that /favicon.ico returns 200.

eleventy.config.js (copy icons to the _site root):

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy({ "src/favicon": "/" });
  eleventyConfig.addPassthroughCopy("src/favicon.ico");
}

Common mistakes to avoid

Dropping icons in the input folder but never adding addPassthroughCopy, so Eleventy ignores them and they never reach _site.
Mismatching the passthrough target so files land in a subfolder while the link tags point at the root - paths must agree.
Adding link tags to one template instead of the shared base layout in _includes, so only some pages get the favicon.
Forgetting the manifest, so Android home-screen and PWA installs fall back to a generic glyph.

Free forever, no sign-up

Generate a complete icon set for Eleventy (11ty)

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Eleventy (11ty). Free, private, and generated in your browser.

Open the generator

Frequently asked questions

How do I add a favicon in Eleventy (11ty)?: Use eleventyConfig.addPassthroughCopy in eleventy.config.js (or .eleventy.js) to copy your icon files into _site, then add the link tags to the <head> of your base layout in the _includes folder. Eleventy will not ship unreferenced static files otherwise.
Why isn't my favicon copied to _site in Eleventy?: Eleventy only copies files you tell it to. Add an addPassthroughCopy rule for the favicon file or folder in your config, then rebuild and check _site - the icons should appear at the path your link tags reference.
What is the Eleventy config file called?: Eleventy 3.x looks for eleventy.config.js (or eleventy.config.mjs/cjs); the older .eleventy.js name still works. Put your addPassthroughCopy calls there. Version 3 supports ESM, so export default a config function.
Where do the favicon link tags go in Eleventy?: In the <head> of your base layout in the _includes folder, so every page that extends it gets the icons. Reference them with root-absolute paths that match where addPassthroughCopy places the files.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.