Adding a favicon to a plain HTML website takes one line of code — but doing it right (so every browser, phone, and PWA install shows the correct icon) takes a few more. This is the complete 2026 guide: the exact tag, where to put the files, and a copy-paste block covering every format.
The minimum: one line of HTML
At its simplest, a favicon is just a single file referenced in your <head>:
<link rel="icon" href="/favicon.ico">Place favicon.ico in your website root (the same folder as your index.html), add that tag inside <head>, and you're done for the basics.
The complete HTML favicon setup
The one-liner above works, but modern browsers, iOS, and Android each prefer different formats and sizes. Here's the complete, recommended block:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">What each line does:
favicon.ico— the universal fallback for every browser (including old ones)favicon-32x32.png/favicon-16x16.png— crisp PNG icons for modern browser tabsfavicon.svg— vector icon for modern browsers; stays sharp at any sizeapple-touch-icon.png— the 180×180 icon iOS uses for home-screen appssite.webmanifest— the PWA manifest that links icons for Android/Chrome
Don't want to create all these files by hand? Upload one image to Favicon.one and download a ZIP with every file above plus ready-to-paste HTML.
Where to place the favicon files
Put them in your site root — the same directory as your index.html. The leading / in the hrefs above means “from the site root”, so the browser always finds them regardless of which page it's on.
your-website/
├── index.html
├── about.html
├── favicon.ico ← here
├── favicon-32x32.png
├── favicon-16x16.png
├── favicon.svg
├── apple-touch-icon.png
└── site.webmanifestThe link tag, explained
The <link rel="icon"> element tells the browser where your favicon lives. The key attributes:
- rel="icon" — “this is a favicon”
- type — the MIME type (
image/x-icon,image/png,image/svg+xml) - sizes — the pixel dimensions, so the browser picks the best one
- href — the file path
When you declare multiple <link rel="icon"> tags with different sizes, the browser chooses the right one for the current display (e.g. 16×16 on a normal screen, 32×32 on a retina screen).
The web manifest
The site.webmanifest file links your icons for Android Chrome and installable PWAs. A minimal example:
{
"name": "My Website",
"short_name": "MySite",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Common mistakes
1. Using a non-square image
Favicons must be square (1:1). A rectangular image will look stretched or blank.
2. Forgetting the type attribute
Without type, some browsers guess wrong and refuse to render an .ico served as image/png.
3. Putting files in a subfolder but using a root path
If your files live in /assets/, your href must be /assets/favicon.ico, not /favicon.ico.
4. Browser caching
Browsers cache favicons aggressively. If you don't see your new icon, test in an incognito window. See our full “Favicon Not Showing” troubleshooting guide.
Favicon sizes cheat sheet
| File | Size | Purpose |
|---|---|---|
favicon.ico | 16/32/48 | Universal fallback |
favicon-32x32.png | 32×32 | Modern browser tabs |
favicon-16x16.png | 16×16 | Legacy tabs |
favicon.svg | vector | Modern browsers, dark mode |
apple-touch-icon.png | 180×180 | iOS home screen |
Full breakdown in the favicon size guide.
Ready? Generate the complete favicon package from one image and paste the HTML above — you'll be done in under a minute.