A favicon is the tiny icon that appears in browser tabs, bookmarks, and on your phone's home screen when someone saves your site. Without one, browsers show a generic page icon — an immediate signal that your site feels unfinished. Getting it right means generating multiple sizes, using the correct HTML tags, and optionally adding a web app manifest for PWA icons. This guide walks through the whole process in minutes using a free online tool.
Advertisement
Why Favicons Matter
Browser Tab Identity
Users with many tabs open rely on favicons to find your site instantly. A clear icon beats a truncated title every time.
Bookmarks & History
Bookmarks show your favicon alongside the page title. A recognisable icon builds brand recall every time users open their bookmark list.
Home Screen Icons
When a user saves your site to their phone home screen, the browser uses your apple-touch-icon or manifest icon — sized up to 512×512.
PWA & Install Prompt
Progressive Web Apps need icons declared in the web manifest to trigger the browser install prompt and appear in app drawers.
How to Create a Favicon (Step-by-Step)
Open the Favicon Generator
Go to the Favicon Generator tool. No account needed — it runs entirely in your browser so your images never leave your device.
Upload Your Source Image
Upload a PNG, JPG, SVG, or WebP file. For best results use a square image of at least 512×512 pixels with a transparent or solid background. Logos and simple icons work best — fine detail disappears at 16×16.
Adjust Background and Padding (Optional)
Choose a background colour (or leave transparent for PNG-based favicons) and set a padding percentage to add whitespace around your icon. The tool instantly previews all 9 sizes as you adjust.
Download All Sizes
Click "Download All Sizes" to get a ZIP containing all 9 PNG files (16×16 through 512×512) plus a compiled .ico file. Or download individual sizes by clicking each preview.
Add the HTML Tags
Copy the generated HTML snippet and paste it into the <head> of your layout file. Copy the manifest JSON and save it as site.webmanifest in your public root.
No sign-up · No watermarks · Files never leave your device
Favicon Sizes the Tool Generates
The Favicon Generator automatically produces all 9 sizes in one click. Here is what each size is used for:
| Size | Format | Used For | Priority |
|---|---|---|---|
| 16×16 | ICO / PNG | Browser tab (default) | Essential |
| 32×32 | ICO / PNG | Taskbar shortcut, retina tabs | Essential |
| 48×48 | PNG | Windows site icon | Recommended |
| 64×64 | PNG | Windows taskbar shortcut | Recommended |
| 96×96 | PNG | High-DPI browser icon | Recommended |
| 128×128 | PNG | Chrome Web Store, app icon | Recommended |
| 180×180 | PNG | Apple touch icon (iOS home screen) | Essential |
| 192×192 | PNG | Android home screen / PWA | Essential |
| 512×512 | PNG | PWA splash screen / install prompt | Essential for PWA |
Advertisement
The Complete HTML Head Snippet
The tool generates this snippet for you — click Copy and paste it into the <head> of every page (or your root layout file in Next.js / Nuxt / etc.):
<!-- Standard favicons --> <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"> <!-- Apple touch icon --> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"> <!-- Web app manifest (PWA) --> <link rel="manifest" href="/site.webmanifest">
Web App Manifest for PWA Icons
The tool also generates this manifest JSON — save it as site.webmanifest in your public root and update the name fields:
{
"name": "My App",
"short_name": "App",
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Tips for a Great Favicon
Best practices
- ✓Use a simple, bold shape — complex logos become unreadable at 16×16 pixels.
- ✓Start from a 512×512 source image so all downscaled sizes remain sharp.
- ✓Use PNG transparency so your icon looks clean on any browser UI colour.
- ✓Test in both light and dark browser themes — some icons vanish against the wrong background.
Things to watch for
- ⚠Don't use a photograph — favicons are icons, not thumbnails.
- ⚠Don't skip the apple-touch-icon tag — iOS Safari ignores the standard favicon for home screen saves.
- ⚠Don't put favicon files in a subdirectory unless you update all href paths to match.
- ⚠Browsers cache favicons aggressively — append ?v=2 to bust the cache after updates.
Your image never leaves your device
The Favicon Generator runs entirely in your browser using the HTML5 Canvas API. No images are uploaded to any server — your logo and brand assets stay on your device at all times.
Frequently Asked Questions
Do I need a .ico file or will PNG work?
Both work in modern browsers. PNG is simpler — just add the correct MIME type in the link tag. However, favicon.ico placed in your site root acts as a fallback for very old browsers and is fetched automatically without any HTML tag, so it is still worth generating. The tool produces both.
My favicon updated but I still see the old one — what's wrong?
Browsers cache favicons aggressively. Hard refresh (Ctrl+Shift+R / Cmd+Shift+R), clear your browser cache, or add a cache-busting query string: href="/favicon.ico?v=2". The new icon appears in tabs that reload.
What is the difference between favicon and apple-touch-icon?
The standard favicon link tag is used by desktop browsers for tabs and bookmarks. The apple-touch-icon link is specifically for iOS Safari when a user adds the page to their home screen. You need both for full coverage.
How do I add a favicon in Next.js?
In Next.js App Router, place a favicon.ico file in the /app directory root — Next.js picks it up automatically. For other sizes, declare them using the icons key in your root layout.tsx metadata export, or add link tags inside a custom _document.
Can I use an SVG as a favicon?
Yes — modern Chromium browsers and Firefox support SVG favicons. However, Safari does not yet support them, so you should always include PNG and ICO fallbacks alongside any SVG favicon declaration.
Ready to Create Your Favicon?
Upload any image and get all 9 favicon sizes plus a .ico file in seconds — no sign-up, no watermark, completely free.
Generate Your Favicon Now →