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.
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
The four steps
- 1
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.
- 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.
- 3
Add the link tags to your <head>
Reference each icon with <link> tags inside the document <head> (icon, apple-touch-icon, and manifest) on every page, which usually means a shared template or layout.
- 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.
The link tags
<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">Paste these inside the <head> 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. |
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.