Left Arrow.Back
Left Arrow.Back

Notes / HTML / Head / Favicon

Favicon

Table Of Contents

A solid rectangle with an image on it highlighted.

How to add a Favicon to a Website

Last Tended: 

Status: seed

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 3 link elements to your .html file:

/index.html

<!DOCTYPE html>

<html>

    <head>

        <!-- highlight -->

        <link rel="icon" href="/favicon.ico" sizes="any" />  <!-- 32×32 -->

        <!-- highlight -->

        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

        <!-- highlight -->

        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  <!-- 180×180 -->

        <!-- highlight -->

        <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",

    "short_name": "Brad Woods",     // shown if there isn't enough room for name's value 

    "icons": [

        {

            "src": "/android-chrome-192x192.png",

            "sizes": "192x192",

            "type": "image/png"

        },

        {

            "src": "/android-chrome-512x512.png",

            "sizes": "512x512",

            "type": "image/png"

        }

    ],

    "theme_color": "#c15a58",       // theme_color & background_color should match your favicon

    "background_color": "#1b1b1b",

    "display": "standalone"

}

Step 5

Deploy your work & test at RealFaviconGenerator.

A space ship's docking bay with various equipment.

Tools