---
title: How to Add a Favicon to Your Website (Step-by-Step)
description: Learn how to add a favicon to any website in minutes. Step-by-step HTML, the right link tags, file sizes, and platform-specific tips.
canonical: https://favicontools.com/blog/how-to-add-a-favicon
---
# 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
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 ** — 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.
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
```html
```
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.