Generate Now

Static Site Generators Favicon Guide

Master favicon implementation across popular static site generators: Jekyll, Hugo, Gatsby, 11ty, Astro, and Jamstack best practices.

Popular Static Site Generators

Jekyll (Ruby)
Hugo (Go)
Gatsby (React)
11ty (JS)
Astro (Multi)
Hexo (Node)
VuePress (Vue)
Docusaurus (React)

Universal Approach (Works for All SSGs)

Standard Setup

1. File Location

Most SSGs use a public/ or static/ folder:

# Common patterns:
public/         # Gatsby, 11ty, Astro
static/         # Hugo, VuePress
source/         # Hexo
assets/         # Jekyll (sometimes)

2. HTML Template

<!-- Universal favicon code -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Golden Rule: Use absolute paths starting with / for maximum compatibility.

Jekyll (GitHub Pages)

Ruby-Based SSG

See dedicated guide:

Jekyll Favicon Guide

Hugo (Fastest SSG)

Go-Based SSG

See dedicated guide:

Hugo Favicon Guide

Gatsby (React SSG)

React-Based SSG

See dedicated guide:

Gatsby Favicon Guide

11ty (Eleventy)

Simple JavaScript SSG

File Structure

my-11ty-site/
  public/           ? Place favicons here
    favicon.ico
    apple-touch-icon.png
  _includes/
    base.njk       ? Add favicon links
  .eleventy.js

.eleventy.js Configuration

module.exports = function(eleventyConfig) {
  // Copy favicons to output
  eleventyConfig.addPassthroughCopy("public");
  
  return {
    dir: {
      input: "src",
      output: "_site"
    }
  };
};

Astro (Multi-Framework)

Modern SSG

File Structure

my-astro-site/
  public/           ? Place favicons here (automatic)
    favicon.ico
    favicon.svg
    apple-touch-icon.png
  src/
    layouts/
      Base.astro    ? Add favicon links

Base.astro Layout

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Deployment Platforms

Netlify

  • Auto-detects SSG
  • Automatic HTTPS
  • Custom domains
  • CDN included

Vercel

  • Zero-config
  • Instant deployments
  • Edge network
  • Analytics

Cloudflare Pages

  • Free SSL
  • Global CDN
  • Unlimited bandwidth
  • Git integration

GitHub Pages

  • Free hosting
  • Jekyll built-in
  • Custom domains
  • GitHub Actions

Static Site Favicon Best Practices

? Best Practices

  • Use public/ or static/ folder
  • Use absolute paths (/favicon.ico)
  • Configure passthrough copy if needed
  • Test build output folder
  • Include manifest.json
  • Set proper cache headers
  • Use SVG for modern sites
  • Deploy with CDN

? Common Mistakes

  • Using relative paths
  • Placing favicons in wrong folder
  • Not configuring passthrough copy
  • Missing from build output
  • Hardcoding base URL
  • Not testing production build
  • Forgetting HTTPS setup
  • Missing CDN optimization

Generate Static Site Favicons

Create optimized favicon packages for all static site generators

Generate Favicons

Related Articles

GitHub Pages

Deployment guide

Jekyll

Ruby SSG

Gatsby

React SSG

An unhandled error has occurred. Reload 🗙