How do I add a favicon to a GitHub Pages site?

Commit favicon.ico (and the other icons) to your repository and add the icon link tags to your HTML head or, on Jekyll, your _layouts default layout. GitHub Pages serves the files on the next build.

Why does my favicon 404 on a GitHub Pages project site?

Project sites are served under username.github.io/repo-name/, so a root-absolute /favicon.ico points at the wrong place. In Jekyll, prefix paths with {{ site.baseurl }}; in plain HTML, use relative or repo-prefixed paths.

Where do the favicon link tags go in a Jekyll GitHub Pages site?

In the of your default layout in _layouts (often default.html), so every page that uses the layout gets the icons. Commit the icon files alongside and push to trigger a build.

Do I need a build step for the favicon on GitHub Pages?

No special step - GitHub Pages serves committed files and rebuilds Jekyll automatically on push. Just commit the icons and the head link tags, then wait for the build and hard-refresh.

All platforms

Favicon for GitHub Pages

How to add a favicon in GitHub Pages

To add a favicon on GitHub Pages, commit your icon files to your repository (favicon.ico at the site root) and add the <link> tags to the <head> of your HTML or, on a Jekyll site, your default layout in _layouts. GitHub Pages serves whatever you commit, so the favicon goes live on the next build.

What you need

favicon.ico plus PNG favicons (32x32), a 180x180 apple-touch-icon, and 192/512 PWA icons.
Your GitHub Pages repository (a plain HTML site or a Jekyll project).
A layout or index.html whose <head> holds the icon link tags; mind the project-site baseurl.

Step-by-step: add a favicon in GitHub Pages

Generate your icon set. Use Logo2Favicon to create favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, a maskable icon, and the manifest - in your browser, nothing uploaded.
Commit the icons to the repo. Add favicon.ico and the other icon files to your repository root (or an assets folder), then commit and push to the branch GitHub Pages builds from.
Add link tags to the head. In your index.html, or your Jekyll default layout in _layouts, add the icon, apple-touch-icon, and manifest link tags inside <head>.
Handle the baseurl and verify. On a project site served under /repo-name/, prefix paths with {{ site.baseurl }} (Jekyll) so they resolve. Push, wait for the build, then hard-refresh.

Add inside <head> (Jekyll: prefix with {{ site.baseurl }} for project sites):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Common mistakes to avoid

Using root-absolute /favicon.ico on a project site (username.github.io/repo) where assets live under the repo path - prefix with the baseurl.
Editing a single page instead of the shared Jekyll layout in _layouts, so only that page gets the favicon.
Forgetting to commit and push the actual icon files, so the link tags 404.
Not waiting for the Pages build, or not hard-refreshing, so the old icon lingers.

Free forever, no sign-up

Generate a complete icon set for GitHub Pages

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 GitHub Pages. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

How do I add a favicon to a GitHub Pages site?: Commit favicon.ico (and the other icons) to your repository and add the icon link tags to your HTML head or, on Jekyll, your _layouts default layout. GitHub Pages serves the files on the next build.
Why does my favicon 404 on a GitHub Pages project site?: Project sites are served under username.github.io/repo-name/, so a root-absolute /favicon.ico points at the wrong place. In Jekyll, prefix paths with {{ site.baseurl }}; in plain HTML, use relative or repo-prefixed paths.
Where do the favicon link tags go in a Jekyll GitHub Pages site?: In the <head> of your default layout in _layouts (often default.html), so every page that uses the layout gets the icons. Commit the icon files alongside and push to trigger a build.
Do I need a build step for the favicon on GitHub Pages?: No special step - GitHub Pages serves committed files and rebuilds Jekyll automatically on push. Just commit the icons and the head link tags, then wait for the build and hard-refresh.

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.