How to Add a Favicon to Your Website
Updated September 18, 2026
A favicon is the small icon browsers show in tabs, bookmarks, history, and on phone home screens. Getting one is easy. Getting one that looks right everywhere takes a handful of files and four lines of HTML, because different platforms want different sizes and formats.
This guide covers what to generate, what to put in your markup, and the design constraint that trips most people up.
Design for 16 pixels first
This is the part that matters most and gets the least attention.
Your icon will spend most of its life rendered at 16×16 — a space about the size of this letter M. A full logo with a wordmark becomes an illegible smudge at that size. What survives:
- One shape or letter, not a lockup. Strip the words off your logo.
- High contrast against both light and dark tab bars. Mid-grey on mid-grey vanishes in one theme or the other.
- Simple silhouettes. Thin strokes disappear; fine detail turns to mush.
- Generous margins. Browsers render the icon small and crowd it; edge-to-edge artwork looks cramped.
Test by shrinking your candidate to 16 pixels and looking at it in an actual browser tab before committing.
Generate the set
Open the favicon generator and upload a square image. A PNG or SVG at 512×512 or larger gives the cleanest downscales. You get back:
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32, 48 combined | the classic bookmark and tab icon |
| favicon-16x16.png | 16×16 | browser tabs |
| favicon-32x32.png | 32×32 | high-DPI tabs, Windows taskbar |
| favicon-48x48.png | 48×48 | Windows site shortcuts |
| apple-touch-icon.png | 180×180 | iOS home screen |
| android-chrome-192x192.png | 192×192 | Android home screen, PWA manifest |
| android-chrome-512x512.png | 512×512 | Android splash screen, PWA manifest |
The .ico is a real multi-size container holding the 16, 32 and 48 pixel versions in one file, which is what older browsers and Windows expect.
Install the files
Upload everything to your site's root directory, so each file sits at a top-level URL such as `/favicon.ico`. The root location matters: browsers and crawlers probe `/favicon.ico` directly even when no markup points at it.
Then add these to the head of every page:
- a link with rel icon pointing at /favicon.ico
- a link with rel icon, type image/png, sizes 32x32, pointing at /favicon-32x32.png
- a link with rel icon, type image/png, sizes 16x16, pointing at /favicon-16x16.png
- a link with rel apple-touch-icon, sizes 180x180, pointing at /apple-touch-icon.png
That is enough for every mainstream browser and both mobile platforms. The Android icons are referenced from your web app manifest rather than from link tags, if you have one.
Dark mode
Browsers do not switch favicons by colour scheme through these link tags. An SVG favicon can adapt, because SVG supports a prefers-color-scheme media query inside the file itself, and some browsers honour it.
The more reliable approach is to design one icon that works on both light and dark tab bars. A shape with its own strong colour, rather than one relying on black or white, solves this without depending on browser behaviour.
Why your favicon is not showing
Almost always caching. Favicons are cached aggressively and separately from normal page assets, so the usual reload does not help.
Work through these in order:
1. Confirm the file is actually there. Visit `/favicon.ico` directly. If that 404s, nothing else matters. 2. Hard-reload the page (Ctrl+F5, or Cmd+Shift+R). 3. Open the icon URL in a new tab to force a direct fetch. 4. Check for a conflicting tag. A leftover link tag pointing at an old path will win over the file at the root. 5. Try a private window, which bypasses the favicon cache. 6. Give it time. Some browsers keep the old icon for days regardless of what you do.
If it renders correctly at a direct URL but not in the tab, it is caching, not your markup.
Other things that go wrong
- The icon looks blurry. The source was too small and got upscaled. Start from at least 512×512.
- It has an unexpected white box. Your source had a white background instead of transparency. Use a PNG or SVG with a real alpha channel.
- It is squashed. The source was not square, so it got fitted into a square frame. Crop to a square first with the crop tool.
- The iOS home screen icon has rounded corners you did not add. iOS applies its own mask. Do not pre-round the corners or you will get a doubled effect; supply a square image with your artwork inset from the edges.
Your image stays in your browser
The generator runs entirely client-side: the resizing and the .ico assembly happen on your device, and the files download directly from the page. Your logo is never uploaded anywhere.
If you are wiring up the rest of the site's front end, NuvTool is a free in-browser kit of developer utilities — JSON and code formatting, encoders, converters — built in the same no-upload spirit.