What sizes you actually need
A properly implemented favicon package covers multiple sizes:
| Size | Used by |
|---|---|
| 16×16 | Browser tabs (small) |
| 32×32 | Browser tabs (standard), Windows taskbar |
| 180×180 | Apple Touch Icon (iPhone bookmark) |
| 192×192 | Android Chrome home screen shortcut |
| 512×512 | Android Chrome splash screen, PWA |
At minimum, a 32×32 .ico or .png file handles most browsers. Add the Apple Touch Icon (180×180) and Android icons (192×512) if mobile bookmarking matters for your site.
How to generate a favicon free
- Open the free favicon generator
- Upload your logo, icon, or any image — PNG works best; SVG is ideal
- The tool generates all required sizes automatically
- Download the favicon package
- Place the files in your website's root directory
- Add the HTML tags to your
<head>
The HTML you need in your head tag
<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">The site.webmanifest file declares your 192×192 and 512×512 icons for Android. A basic one looks like:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}What makes a good favicon design
A favicon is displayed at very small sizes — 16×16 pixels in most browser tabs. Design principles for small sizes:
- Simple shapes only: complex logos with text do not read at 16px. Extract one letter, a symbol, or a simplified mark from your full logo.
- High contrast: the favicon appears on both light (most browsers) and dark mode tabs. Test it on both.
- No thin lines: lines under 2px disappear or become blurry at small sizes. Use bold, thick shapes.
- Transparent background: export with a transparent background so it looks natural on any tab color.
ICO vs PNG vs SVG for favicons
- .ico format: the original favicon format, contains multiple sizes in one file. Still recommended for the root
/favicon.icofor maximum compatibility — old browsers and some tools specifically look for this file. - PNG: the modern standard for sized favicon links. Clear, widely supported, and easy to generate.
- SVG favicon: supported by most modern browsers (
rel="icon" type="image/svg+xml"). Scales perfectly to any size. Use it as an additional<link>alongside PNG fallbacks.
Testing your favicon
After adding the favicon, test it:
- Open your site in an incognito window (cache won't serve the old favicon)
- Check the browser tab — the 32×32 icon should appear
- Bookmark the page — check the bookmark icon
- On an iPhone: add to Home Screen — the 180×180 Apple Touch Icon appears
Summary
Generate a complete favicon package with the free favicon generator — no account. Use a simple, high-contrast mark at small sizes. Provide at minimum 16×16, 32×32, and 180×180 sizes. Add a /favicon.ico in the root for maximum backward compatibility.