How to Add a Favicon to Your Website (Step-by-Step)

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 tags to the of your HTML. A favicon is the small icon shown in browser tabs, bookmarks, and search results.

What you need first

A single 16x16 favicon isn't enough anymore. Modern browsers, iOS, Android, and Windows each request different sizes and formats. Before you add any tags, make sure you have a complete icon set.

The minimum set

File | Size | What needs it
favicon.ico | multi-resolution | Browsers and crawlers that request /favicon.ico by default
favicon-16x16.png | 16x16 | Browser tabs and the address bar
favicon-32x32.png | 32x32 | Retina tabs, bookmarks, desktop shortcuts
apple-touch-icon.png | 180x180 | iOS home screens
Manifest icon | 192x192 | Android home screens, referenced from the web manifest

What those sizes actually look like

16x16

32x32

48x48

180x180

Rendered at true pixel dimensions, not scaled up. Almost all of the design work goes into the leftmost swatch, because that's the one people look at all day.

The four steps

Generate your favicon files — Let a generator produce every size, the .ico sprite, and a tuned manifest.json in one pass. Drop in a logo, a screenshot, or even an emoji and download the full kit. New to making icons? Start with how to make a favicon.

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.

Add the link tags to your — Reference each icon with tags inside the document (icon, apple-touch-icon, and manifest) on every page, which usually means a shared template or layout.

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.

The link tags







Paste these inside the element of every page. The manifest link is what gives you install prompts and home-screen icons. See what is manifest.json.

Platform-specific shortcuts

Using a framework or CMS? Several of them handle the head tags for you with their own conventions. The platform guides cover Next.js, React, WordPress, and Shopify.

Common mistakes

Mistake | Fix
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 from 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, which covers every cause one at a time.

Frequently asked questions

Where do I put the favicon file?

Place favicon.ico and the other icon files in your site's root directory (or the public/ folder for most frameworks) so they are 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 you 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 to the link, and confirm the file path is correct. See our favicon troubleshooting guide for every cause.