How to Add a Favicon to Your Website (All Formats & Sizes)

A missing favicon makes a site look unfinished in browser tabs, bookmarks and search results, and a wrongly sized one looks blurry on every device. A complete setup in 2026 needs only four link tags and a handful of files.

Which Favicon Formats and Sizes You Actually Need

Older guides tell you to generate 20 or more icon sizes. That is no longer necessary. Browsers now pick from a short list, and an SVG scales to any size on its own. Here is the practical set:

Design your source artwork as a simple, high-contrast square at 512×512 or larger. Fine detail and thin strokes disappear at 16px. Use a single letter, a bold shape or a simplified logomark rather than your full wordmark.

How to Add a Favicon to Your Website with HTML

The core step is placing link tags in the <head> of every page. Put your files in the site root, then add this block:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#1abc9c">

Order matters slightly. Listing the ICO with sizes="32x32" first and the SVG second stops Chrome from preferring the ICO when an SVG is available. Without the sizes attribute, some Chrome versions pick the ICO over the sharper SVG.

If your site lives in a subfolder or you use relative paths, drop the leading slash and point to the correct directory, for example href="images/favicon/icon.svg". Absolute root paths are safer on multi-page sites because they work from any folder depth.

Adding a Favicon to the Canvas HTML Template

If you build with the Canvas HTML Template, the process is the same, but you need to repeat it across every HTML file you ship. Canvas is built on Bootstrap 5 with Bootstrap already bundled, so there is nothing extra to load. Your head only needs the stylesheets plus your icon tags:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Site Name</title>

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.webmanifest">
  <meta name="theme-color" content="#1abc9c">

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="css/font-icons.css">
</head>

Match your theme-color to the value of --cnvs-themecolor in your CSS. CSS variables cannot be used inside meta tags or the manifest, so copy the hex value across manually. If you later change --cnvs-themecolor, update those two places too, or your mobile browser chrome will drift out of sync with your brand colour.

Generating pages with Canvas Builder saves repeating this work on every file, because you can include the favicon block in your prompt once and get it in each generated layout. For multi-page projects, the process in our multi-page website design guide shows how to keep head elements consistent across pages.

Web Manifest Icons and Dark Mode SVG Favicons

The manifest tells Android and Chromium browsers which icons to use when someone installs your site or adds it to their home screen. Create manifest.webmanifest in your root:

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ],
  "theme_color": "#1abc9c",
  "background_color": "#ffffff",
  "display": "browser"
}

SVG has one practical advantage over raster formats: it can respond to the user’s colour scheme. A dark logo vanishes on a dark browser tab. Fix this by embedding a media query inside the SVG file itself:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #1abc9c; }
    text { fill: #111; font: bold 18px sans-serif; }
    @media (prefers-color-scheme: dark) {
      text { fill: #fff; }
    }
  </style>
  <circle cx="16" cy="16" r="16"/>
  <text x="16" y="23" text-anchor="middle">C</text>
</svg>

Safari has historically had limited SVG favicon support, which is why the ICO and Apple touch icon fallbacks remain essential. Test in Safari before assuming the dark mode variant works everywhere.

Fixing a Favicon That Is Not Showing or Updating

Work through these checks in order:

1. Hard refresh and clear cache. Browsers cache favicons aggressively, often independently of page cache. Open the icon URL directly (for example yoursite.com/favicon.ico) and refresh that tab.
2. Check the file path. Open DevTools, go to the Network tab, filter by “Img” and look for 404 responses on your icon files.
3. Confirm the MIME type. SVG must be served as image/svg+xml. Misconfigured servers sometimes return text/plain.
4. Verify the PNG is a real PNG. Renaming a JPG to .png fails in some browsers.
5. Add a version query string such as href="/icon.svg?v=2" when you replace an existing icon.
6. Allow crawling. If the favicon is missing from Google results, make sure robots.txt does not block the icon file and that the icon is a multiple of 48px square. Google can take days or weeks to refresh it.

A correct favicon is also a small trust and indexing signal for any launch. If you are working through a pre-launch checklist, pair this with the advice in our guide to SEO-optimised HTML landing pages.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.