How to Add a Favicon in Jekyll

To add a favicon in Jekyll, place your icon files in the site source (outside any folder whose name starts with an underscore) and add link tags for them inside the head element of your layout. Jekyll copies such static files into the built site unchanged, so the work comes down to two things: preparing icon artwork that holds up at very small sizes, and getting the link tags into every page's head.

A favicon is the small icon browsers show in tabs, bookmarks and history. An SVG favicon is a vector file: its shapes are stored as mathematical paths rather than a fixed grid of pixels, so the browser can render it sharply at whatever size it needs. Because not every browser or platform accepts an SVG icon, a raster fallback (an ICO or PNG file) is usually supplied alongside it.

Prepare the icon artwork from your logo

A full logo rarely works as a favicon unchanged. At tab size, fine strokes, small lettering and long wordmarks become unreadable. Most sites use a simplified mark: a symbol, a monogram or a single letter taken from the logo.

• Start from a square artboard and a square viewBox (the coordinate area that defines what part of the SVG drawing is visible), so the icon is not stretched or letterboxed.
• Reduce detail: remove thin lines, small counters and secondary elements that disappear at small sizes.
• Convert any type to outlines (paths). A favicon cannot rely on the visitor having your font installed, so live text may render in a fallback font or not at all.
• Remove editor metadata, hidden layers and unused definitions when exporting, keeping the file clean.
• Check contrast against both light and dark browser themes; a dark mark can vanish on a dark tab bar.

An SVG file can optionally include a prefers-color-scheme media query in an embedded style block to switch fill colors in dark mode. Whether a given browser honors this inside a favicon varies, so treat it as an enhancement and confirm the default colors already work on both backgrounds.

A file ending in .svg is not proof that it contains only vector paths: SVG files can embed raster images. Open the file in a vector editor or a text editor to confirm its content, and make sure you have the right to use the logo before publishing it as an icon.

Add the files to your Jekyll project

Put the icon files at the root of the site source or in a regular folder such as assets. Folders beginning with an underscore (for example _includes or _layouts) are processed differently and their contents are not copied as static files, so do not store icons there. A typical set looks like this:

my-site/
├── _config.yml
├── _includes/
├── _layouts/
├── favicon.ico
└── assets/
    └── images/
        ├── favicon.svg
        └── apple-touch-icon.png

Keeping a favicon.ico at the site root is a common fallback, because some browsers and tools request that file automatically even without a link tag. The apple-touch-icon PNG is used when a page is saved to a home screen on Apple devices. Recommended pixel dimensions for raster icons change over time and differ by platform; check current browser and platform documentation rather than relying on a fixed list.

Link the icons in the page head

Add the following tags inside the head element. Using Jekyll's relative_url filter prefixes each path with the site's baseurl setting, which matters when the site is served from a subfolder, such as a project site on GitHub Pages.

<link rel="icon" href="{{ '/favicon.ico' | relative_url }}" sizes="any">
<link rel="icon" type="image/svg+xml" href="{{ '/assets/images/favicon.svg' | relative_url }}">
<link rel="apple-touch-icon" href="{{ '/assets/images/apple-touch-icon.png' | relative_url }}">

Where these tags go depends on how your site's head is built:

Setup | Where to add the tags

Your own layout file | Inside the head element of the layout in _layouts, or in a head include it uses

Theme with a custom head include | The include the theme designates for extra head content (some theme versions provide one, such as custom-head.html); check your theme's documentation

Theme without such an include | Copy the theme's head include into your project's _includes folder with the same file name and add the tags there; your local copy overrides the theme's version

When overriding a theme file, copy it from the exact theme version your site uses so you do not drop other head content the theme expects.

Build and verify the result

• Run the site locally with bundle exec jekyll serve, or build it with bundle exec jekyll build.
• Open the generated _site folder and confirm the icon files are present at the expected paths.
• View the page source in the browser and check that the link tags appear in the head with correct paths, including any baseurl prefix.
• Open each icon path directly in the browser to confirm it loads rather than returning a not-found page.
• Browsers cache favicons aggressively; if the old icon still shows, test in a private window or clear the site's cached data.
• Check the tab in both light and dark browser themes, and in more than one browser, to confirm the SVG or the fallback displays as intended.

If the icon works locally but not after deployment, the most common cause is a path that ignores baseurl. Confirm the baseurl value in _config.yml matches where the site is served, and that every icon link uses the relative_url filter.

Limits of this guide

No source-specific data was supplied for this article, so it gives no exact pixel sizes, browser version support tables or theme version numbers. The steps above rely on general Jekyll behavior and standard HTML icon links; confirm theme-specific include names and current platform icon requirements against the documentation for the versions you use.