How to add a favicon to HTML

Do you want your favicon to show up in the tab and stay there? Our full guide on how to add a favicon to HTML has every tag, upload step and fix written down for you.

By Mike Wiberg · · 11 min read

To add a favicon to HTML, upload your icon files to the root folder of your site and put link tags for them inside the head element of every page: link rel="icon" for the tab icons, link rel="apple-touch-icon" for the home screen icon, and link rel="manifest" for the web app manifest that lists the larger app icons. Keep a favicon.ico at the root as well, because it is the address a user agent may fall back to when no icon is linked.

This guide gives you the exact HTML for a favicon, explains what every attribute does, shows where the files go, and covers the fixes for a favicon not showing after you change it. The tags below are the ones our tool writes into the head-snippet.html file in every package, copied from a real generated package rather than typed from memory.

The favicon HTML, ready to paste

Here is the complete favicon HTML for a site whose icons live at the root, as our tool generates it for an SVG source:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0b5cff">

For a PNG, JPG or WebP source the SVG line is left out, because there is no SVG file in the package. The theme-color value is whatever you set before generating; ours here is a blue.

Every file in the package is reachable from these lines. The ICO, the two small PNGs, the SVG and the touch icon are linked directly. The 192 and 512 pixel app icons and the maskable icon are listed inside site.webmanifest, which the manifest line links. If you are wondering why there are this many files, our favicon size guide explains each one.

Favicon in HTML: where the tags go

The favicon tags go in the head element of the HTML page, alongside the title and the other meta and link tags. They do not go in the body. A minimal page with the icon tags in place looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Acme</title>
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="theme-color" content="#0b5cff">
</head>
<body>
  ...
</body>
</html>

Put the tags on every page, not just the home page. A visitor can land on any page, and each page declares its own icon. If your site uses a shared header template or layout file, add the tags there once and every page gets them.

What each favicon HTML tag does

Each favicon HTML tag does one job, and knowing which helps when something goes wrong:

  • link rel="icon" href="/favicon.ico" sizes="48x48" links the layered ICO file. The sizes value names its largest layer.
  • link rel="icon" type="image/png" sizes="16x16" and the 32 pixel line link the standalone PNGs. The HTML standard defines sizes so that a page can offer several icons and the user agent can choose one without downloading every file to find out its size. The type attribute tells it the format up front.
  • link rel="icon" type="image/svg+xml" links the vector version, when you have one.
  • link rel="apple-touch-icon" links the 180 by 180 PNG used for home screen shortcuts. Google Search Central also lists this link type among the ones it reads.
  • link rel="manifest" links the web app manifest, a JSON file with the app name, colors and the larger icons.
  • meta name="theme-color" declares a theme color for the page. The same color is written into the manifest as theme_color.

HTML for favicon.ico without a link tag

You can serve a favicon without any HTML at all by putting favicon.ico at the root of your domain. The HTML standard says that when a page has no link rel="icon", a user agent may fetch /favicon.ico from the site root instead. That is why the old trick of dropping a favicon.ico in the root folder still works.

It is not a replacement for the tags. Without them there is no PNG, no touch icon and no manifest, so every surface gets the small ICO and nothing else. Use both: the root file as the fallback, the tags for everything else. Our PNG to ICO guide explains what is inside that root file.

How to add a favicon to a website, step by step

To add a favicon to a website from scratch, follow these steps in order:

  1. Make the files. Drop a square image of 512 by 512 pixels or larger into our free favicon maker. Set the app name, short name, theme color and background color if you want them in the manifest. Download the ZIP.
  2. Unzip the package. You get the icon files, site.webmanifest and head-snippet.html.
  3. Upload the icon files and the manifest to the root of your site, the same folder that serves your home page, so that https://yourdomain.com/favicon.ico loads the ICO.
  4. Open head-snippet.html and copy its lines.
  5. Paste them into the head of every page, or into your shared layout or header template.
  6. Deploy and load your site. Open /favicon.ico, /apple-touch-icon.png and /site.webmanifest directly in the address bar to confirm each one loads and is not a 404.

That is the whole job. If you uploaded the files somewhere other than the root, see the next section.

Serving favicons from a subfolder

If your icons live in a subfolder such as /icons/, every path in the snippet and in the manifest has to include that folder. You can edit the paths by hand in the snippet and the manifest, but it is easy to miss the three inside the manifest, so search both files for every / path. If you generate through our favicon API, its basePath field writes the folder into both files for you, for example /icons/favicon-32.png.

Even with the icons in a subfolder, keep a copy of favicon.ico at the root. The fallback request goes to /favicon.ico, not to your folder.

Writing the site.webmanifest

The site.webmanifest file our tool writes is ready to upload. For a site named Acme with a blue theme it looks like this:

{
  "name": "Acme",
  "short_name": "Acme",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#0b5cff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Set both the name and the short name. The W3C specification describes short_name as the name used "where there is insufficient space to display the full name", so leaving it as a placeholder shows the placeholder in exactly the tightest spots. Our tool starts both name fields as "My App", which is fine for a test and not for production, so type your real names before you generate.

The background_color is also the fill behind the artwork in the maskable icon, so choose a color that sits well behind your logo.

Favicon not showing: the fixes

If your favicon is not showing after you add it, work through this list in order. It covers almost every case:

  1. Open the file URL directly. Load https://yourdomain.com/favicon.ico and /favicon-32.png in the address bar. A 404 means the file is not where the tag says it is. Fix the upload or the path.
  2. Check the tags are in the head. View the page source and search for rel="icon". If the tags are missing, your template or CMS did not save them.
  3. Check the paths match. A tag pointing to /favicon-32.png while the file is at /icons/favicon-32.png loads nothing.
  4. Check the content type. Your server should send PNG files as image/png, SVG as image/svg+xml and the manifest as JSON. A wrong type can stop a file from being used.
  5. Clear the cache. Icons can be cached separately from pages, so an old icon can linger after the page itself has updated. Reload without the cache, try a private window, or close the tab and open the site fresh.
  6. Check robots.txt if the problem is in search results. Google requires the home page and the icon file to be crawlable, and it notes that a changed favicon can take several days to several weeks to show up in results after recrawling.

How to change a favicon

To change a favicon, replace the files with new ones under the same names, then deploy. Keeping the same file names means you do not have to touch the HTML, and it keeps the favicon URL stable, which Google's favicon documentation asks for.

If the old icon keeps appearing for you after the new files are live, it is almost always a cache. The steps in the previous section clear it on your side. Some site owners add a version query string to the icon URLs, such as /favicon-32.png?v=2, to force a fresh fetch; that works, but it also changes the URL, so use it once when you change the icon, not on every deploy.

Adding a favicon when you do not control the HTML

If your site runs on a hosted builder or a CMS that writes the head for you, you may not be able to paste tags at all. In that case look for the site icon or favicon setting in its settings and upload the largest square PNG, icon-512.png, or whichever size the setting asks for. The builder then writes its own tags.

If the platform lets you add custom code to the head, paste the snippet there and upload the files wherever the platform lets you host files, then adjust the paths in the snippet and the manifest to match.

Common favicon HTML mistakes

The common favicon HTML mistakes are small, and each one quietly breaks an icon on some pages or some surfaces:

  • Relative paths without a leading slash. href="favicon.ico" resolves against the current page, so on /blog/post/ it points to /blog/post/favicon.ico, which does not exist. Start every icon path with /, as the snippet does.
  • A sizes value that does not match the file. Declaring sizes="32x32" on a 16 pixel file tells the user agent the wrong thing. In our package the declared sizes match the measured files.
  • A wrong type. type="image/png" on an SVG file, or the reverse, misdescribes the file. Leave type off rather than guess, or copy it from the snippet.
  • rel="shortcut icon" everywhere. The HTML standard still accepts shortcut in front of icon for historical reasons, so it does no harm, but it is not needed. Plain rel="icon" is the modern form.
  • Tags only on the home page. Every page declares its own icon. Put the tags in your shared layout.
  • Two different icons declared on different pages. If an old template still carries an old icon tag, some pages show the old icon. Search your templates for every rel="icon" before you deploy a new one.
  • Forgetting the manifest. Without the rel="manifest" line, the 192, 512 and maskable icons are never referenced, and nothing uses them.

Checking your work

Once the favicon HTML is in place, a quick check catches the rest:

  • Every page source contains the link rel="icon" lines.
  • /favicon.ico loads at the root of the domain.
  • /site.webmanifest loads and lists three icons whose src paths all load.
  • The PNG sizes attributes match the real pixel sizes, which in our package they do.
  • The 16 pixel icon still reads as your brand.

If you generate icons as part of a build, the favicon API returns the same head snippet in its JSON response, so a deploy script can write it into your layout automatically.

The short answer

How to add a favicon to HTML: upload the icon files and site.webmanifest to the root of your site, paste the link rel="icon", link rel="apple-touch-icon" and link rel="manifest" tags into the head of every page, and keep favicon.ico at the root as the fallback. If it does not show, open the file URLs directly, check the paths and clear the cache. The free favicon maker gives you the files and the exact snippet in one ZIP. New to favicons? Start with what a favicon is.