Setup Guide

How to Add a Favicon to Your Website

Four steps from blank tab to pixel-perfect branding. Works for any HTML site, CMS, or framework.

Quick Answer

Generate your favicon files, drop them in your site's root directory, then add <link> tags to the <head> of your HTML. A favicon is the small icon shown in browser tabs, bookmarks, and search results.

What you need first

A single 16×16 favicon isn't enough anymore. Modern browsers, iOS, Android, and Windows each request different sizes and formats. Before adding tags, make sure you have a complete icon set in every favicon size you need — at minimum a .ico, 16×16 and 32×32 PNGs, a 180×180 apple-touch-icon, and a 192×192 icon for your manifest.

Step 1 — Generate your favicon files

The fastest path is to let a generator produce every size, the .ico sprite, and a tuned manifest.json in one pass. Drop in a logo, screenshot, or even an emoji and download the full kit. New to making icons? Start with how to make a favicon.

Generate your favicon files →

Step 2 — Add the files to your site root

Copy the downloaded files into the directory that serves your domain root. On a static site that's the root folder; on most frameworks it's the public/ directory. The goal is that https://yoursite.com/favicon.ico resolves directly.

Step 3 — Add the link tags to your <head>

Paste these tags inside the <head> element of every page (usually a shared template or layout):

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The manifest link unlocks install prompts and home-screen icons — see what is manifest.json.

Platform-specific shortcuts

Using a framework or CMS? These handle the head tags for you with their own conventions:

Next.js favicon guide React favicon guide WordPress favicon guide Shopify favicon guide

Step 4 — Verify it works

Deploy, then hard-refresh and check the tab. The most reliable check is an automated scan that confirms every tag resolves and flags any missing platform icons.

Scan your live site →

Common mistakes

Browser caching — old favicons linger. Hard-refresh or append ?v=2 to the link href.
Wrong path — a leading slash matters. /favicon.ico is served from the root, not the current folder.
Missing apple-touch-icon — iOS home screens fall back to a blurry screenshot without it.

Still not appearing? Work through favicon not showing or updating.

Frequently asked questions

Where do I put the favicon file?

In your site's root directory (or the public/ folder for most frameworks) so it's served from the domain root, e.g. https://example.com/favicon.ico.

Do I still need a favicon.ico file?

Yes. Browsers and crawlers still request /favicon.ico by default, so shipping a multi-resolution .ico alongside modern PNG and SVG icons gives the widest compatibility.

Why isn't my favicon showing after I added it?

Browsers cache favicons aggressively. Hard-refresh, append a version query string like ?v=2, and confirm the file path is correct.

Generate your complete favicon kit

Every size, the .ico sprite, apple-touch-icon, and a ready-to-paste manifest — in one click.

Generate Your Favicons