Left ArrowBack

Notes

Favicon

Table of Contents

The icon of the Adeptus Mechanicus. A cog with a skull at the center.
A solid rectangle with an image on it highlighted.

How to add a Favicon to a Website

Last Tended: 

Status: decay

Step 1

Create a 16 x 16px svg image (this is the size of the icon in the browser tab). Name the file: favicon.svg.

Step 2

Upload your image to RealFaviconGenerator & generate your favicon file package. Move your .svg image & the following files from the package to the root of your site's public directory:

  • ▪ favicon.ico
  • ▪ apple-touch-icon.png
  • ▪ android-chrome-192x192.png
  • ▪ android-chrome-512x512.png

Step 3

Add the following link elements to your .html file:

/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <link 
            rel="icon" 
            href="favicon.ico" 
            sizes="any" />  <!-- 32×32 -->
        <link 
            rel="icon" 
            href="favicon.svg" 
            type="image/svg+xml" />
        <link 
            rel="apple-touch-icon" 
            href="apple-touch-icon.png" />  <!-- 180×180 -->
        <link 
            rel="manifest" 
            href="site.webmanifest" />
        ...

Step 4

Create a site.webmanifest file in the root of your site's public directory. Add the following:

/site.webmanifest

{
    "name": "Brad Woods' Digital Garden",
    // shown if there isn't enough room for name's value 
    "short_name": "Brad Woods",     
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    // theme_color & background_color should match your favicon
    "theme_color": "#c15a58",       
    "background_color": "#1c1c1c",
    "display": "standalone"
}

Step 5

Deploy your work & test at RealFaviconGenerator.

Where to Next?

A sci-fi robot taxi driver with no lower body
Notes
    
  │
  └── HTML
        
  │
  └── Head
            
Arrow pointing down
YOU ARE HERE
            
  │
  ├── Favicon
            
  │
  └── Share Web Page