Favicon Generator
Upload your mark, adjust fit and padding, preview it in realistic tab contexts, and export a full favicon package with a real multi-size ICO, touch icons, maskable icons, and site.webmanifest.
Drop your image here
PNG, SVG, WebP, JPG, or ICO. Large square art with simple shapes works best.
Explore Favicon Use Cases
Jump to focused favicon pages for ICO files, Apple touch icons, Android icons, maskable assets, and implementation snippets.
Favicon ICO Generator
Build a real multi-size favicon.ico package for browser tabs, bookmarks, and desktop shortcuts
Apple Touch Icon Generator
Create cleaner iPhone and iPad home-screen icons with the right padding, framing, and export setup
Android Chrome Icon Generator
Generate Android-ready icons and manifest assets for Chrome install prompts and home-screen experiences
Maskable Icon Generator
Create safer adaptive PWA icons that survive launcher cropping and Android mask shapes
Favicon HTML Code Generator
Generate the head tags you need for browser icons, Apple touch icons, and manifest-based favicon setups
What is a favicon?
A favicon (short for "favorite icon") is the small icon that appears in browser tabs, bookmarks, history, and on mobile home screens when users save your site. Despite being small, it's often the first visual element users associate with your brand in their browser.
Modern browsers and devices request favicons at multiple sizes — from 16×16 pixels for browser tabs to 512×512 for PWA splash screens. This generator creates the core browser, Apple, Android, and maskable icon files in one go and lets you tune fit and safe space before exporting them.
Favicon sizes explained
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Legacy browser support, fallback |
| favicon-16x16.png | 16×16 | Browser tab (small screens) |
| favicon-32x32.png | 32×32 | Browser tab (standard, most common) |
| favicon-48x48.png | 48×48 | Windows taskbar and site icons |
| apple-touch-icon.png | 180×180 | iOS Safari "Add to Home Screen" |
| android-chrome-192x192.png | 192×192 | Android Chrome home screen |
| android-chrome-512x512.png | 512×512 | PWA splash screen, high-DPI |
| maskable-icon-192x192.png | 192×192 | Android adaptive icon safe area |
| maskable-icon-512x512.png | 512×512 | High-resolution adaptive icon |
How to add a favicon to your website
After downloading and extracting your favicon package, place all files in the public/ folder of your project root. Then add this snippet inside 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"> <meta name="theme-color" content="#111827">
Next.js App Router
In Next.js 13+ with App Router, place favicon.ico directly in your app/ folder. Next.js handles it automatically — no <link> tags needed for the ICO file.
app/ ├── favicon.ico ← auto-detected by Next.js ├── icon.png ← used for apple-touch-icon too └── layout.tsx
Favicon design tips
✓ Use a large source image
SVG is ideal. If you use raster art, start with a large image so 512×512 and maskable files stay crisp.
✓ Keep it simple
At 16×16 pixels, complex logos become unrecognizable. Use a single letter, symbol, or simplified mark.
✓ High contrast
Favicons appear on both light and dark browser UIs. Ensure your icon is visible on both.
✓ Use padding intentionally
A little safe space often makes favicons much more legible in crowded tab bars and adaptive icon masks.
✓ Transparent background
PNG with transparency looks better than a white box in browser tabs. Use a solid fill only when the mark needs it.
✓ Test at small sizes
Always preview at 16×16 and 32×32 — that's what most users actually see.
Frequently asked questions
Do I need all these favicon sizes?
For a basic website, favicon.ico and favicon-32x32.png cover most cases. For mobile-friendly sites and PWAs, the full set ensures your icon looks sharp everywhere.
Is my image uploaded to a server?
No. This tool runs entirely in your browser. Your image never leaves your device — all processing happens locally using the Canvas API.
What image format should I start with?
SVG gives the best results since it's vector-based and scales perfectly. PNG (1000×1000 or larger) is the next best option. Avoid starting with a small raster image as quality will degrade.
Why is my favicon not updating in the browser?
Browsers aggressively cache favicons. Hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or clear browser cache. In development, rename the file or add a query string like favicon.ico?v=2.