Generate Now

GitHub Pages Favicon Guide

Master favicon deployment on GitHub Pages: Jekyll integration, custom domains, repository structure, and automated deployment workflows.

GitHub Pages Setup Methods

Static HTML

Simple index.html deployment

Jekyll Site

Static site generator

Method 1: Static HTML Site

Simple Deployment

1. Repository Structure

my-github-pages/
  index.html
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  README.md

2. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
    
    <title>My GitHub Pages Site</title>
</head>
<body>
    <h1>Welcome to My Site</h1>
</body>
</html>

3. Deploy

git add .
git commit -m "Add favicons"
git push origin main

# Enable GitHub Pages:
# Repo Settings ? Pages ? Source: main branch

Method 2: Jekyll Site

Static Site Generator

1. Repository Structure

my-jekyll-site/
  _includes/
    head.html         ? Favicon links here
  assets/
    favicons/
      favicon.ico
      favicon-32x32.png
      apple-touch-icon.png
      site.webmanifest
  _config.yml
  index.md

2. _includes/head.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ page.title }} - {{ site.title }}</title>
  
  <!-- Favicons -->
  <link rel="icon" type="image/x-icon" href="{{ '/assets/favicons/favicon.ico' | relative_url }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicons/favicon-32x32.png' | relative_url }}">
  <link rel="apple-touch-icon" href="{{ '/assets/favicons/apple-touch-icon.png' | relative_url }}">
  <link rel="manifest" href="{{ '/assets/favicons/site.webmanifest' | relative_url }}">
</head>

3. _config.yml

title: My Jekyll Site
baseurl: "" # Leave empty for username.github.io
url: "https://username.github.io"

# Keep favicons in build
include:
  - assets/favicons/

# Exclude development files
exclude:
  - README.md
  - Gemfile
  - Gemfile.lock

Custom Domain Setup

www.yoursite.com

1. Add CNAME File

# CNAME (root of repository)
www.yoursite.com

2. Update Favicon Paths

<!-- Use absolute paths for custom domain -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3. DNS Configuration

DNS Records:
A Record: 185.199.108.153
A Record: 185.199.109.153
CNAME: www ? username.github.io

Automated Deployment with GitHub Actions

CI/CD Workflow

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Build
        run: |
          npm install
          npm run build
      
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

GitHub Pages Favicon Best Practices

? Best Practices

  • Place favicons in repository root
  • Use absolute paths (/favicon.ico)
  • Add CNAME for custom domains
  • Use Jekyll relative_url filter
  • Include favicons in _config.yml
  • Test locally before deploying
  • Enable HTTPS in repo settings
  • Cache bust with query strings

? Common Mistakes

  • Using wrong baseurl in Jekyll
  • Relative paths that break on subpages
  • Not including favicons in include:
  • Missing CNAME file
  • Not testing with custom domain
  • Forgetting to enable HTTPS
  • Hardcoding domain names
  • Not using GitHub Actions

Generate GitHub Pages Favicons

Create optimized favicon packages for GitHub Pages deployment

Generate Favicons

Related Articles

Jekyll

Static site generator

Hugo

Fast static generator

Gatsby

React static site

An unhandled error has occurred. Reload 🗙