How to add a Favicon | Jonathon Leathers

If you’ve used a Favicon generator, you know that they create a lot of files for you. Most of them are unnecessary these days. This guide explains which files you actually need and how to create them.

1. Create an Icon for the Site

First, create the icon you want to use as your Favicon. You will likely have done this in an application like Illustrator. The icon should be at least 512px by 512px.

2. Upload the Icon to a Favicon Generator

My recommendation is to use Real Favicon Generator:

Click the large blue button that says “Select your Favicon image” to upload your icon.
On the next page, you can adjust some options and then click the large blue button at the bottom that says “Generate your Favicons and HTML code”.
On the last page, click the button that says “Favicon package” to download the files.
Extract those files.

Now, use the Real Favicon SVG Favicon Generator:

Click the large blue button that says “Select your icon” to upload your icon.
On the next page, you can adjust some options and then click the large blue button at the bottom that says “Generate Favicon”.
On the last page, click the button that says “Download your package” to download the files.
Extract those files.

3. Add the Files to your Website

Within those two extracted folders you are going to copy the following files to the root folder of your project:

favicon.ico
apple-touch-icon.png
android-chrome-192×192.png
android-chrome-512×512.png
site.webmanifest
favicon.svg

Your project folder now should look something like this:

4. Add this Code in the <head> Element

For a static HTML site, you will add the following code into the <head> element for each HTML file:

<link rel="icon" href="favicon.ico" sizes="any"> 
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="manifest" href="site.webmanifest" />

Note: The above code will only work if your HTML files are in the root folder of your project with all of the favicon files. If your project is structured differently, you will need to change the file path in the href values.

5. Update the site.webmanifest File

Update the src values in the site.webmanifest file to remove the / at the beginning.

You can also update the name and color values in this file to be applicable to your website.

{
    "name": "Country Website - Canada",
    "short_name": "Canada",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ff0000",
    "background_color": "#ff0000",
    "display": "standalone"
}

Note: The site.webmanifest file is only used on Android devices.

Credits

The information in this guide is based on recommendations from these two articles:

https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs