The file could not be decoded.
Suggested fix: Upload a valid PNG or SVG file.
Choose an image or drag and drop
PNG · JPG · WebP · SVG · Up to 15 MB
Drop image file to load
Release to start processing
Decoding and normalizing image...
logo.png
512 × 512 px
No matching icons found
Try searching for terms like code, rocket, zap, lock, star or switch categories above.
Terminal
Type any native emoji glyph or pick a quick symbol below.
More Adjustments Customize
Download Complete Favicon Package
Includes multi-size favicon.ico, 8 PNG assets, site.webmanifest, and setup guide.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Individual Asset Downloads ▼
How to create a favicon in 5 simple steps
Everything you need to turn any image, symbol, text, or emoji into a production-ready icon set.
Choose Source
Upload an image, pick from 1,700+ curated symbols, type initials, or enter an emoji.
Adjust & Position
Zoom, drag to pan, tweak padding, toggle transparent vs solid background, and clip corners.
Inspect Previews
Check real-time 16×16, 32×32, and 48×48 renderings against light/dark themes and browser tabs.
Download Package
Download a complete ZIP containing multi-size favicon.ico, PNGs, and site.webmanifest.
Add to Website
Upload files to your server root and paste the generated <link> snippet into <head>.
Standard outputs for all modern browsers & devices
Every downloaded package contains strictly verified, standards-compliant icon assets.
Supported Input Sources
- PNG / WebP: Transparent or solid raster images up to 15 MB and 4096×4096 px.
- SVG Vector: Scalable vector graphics with automated security and script filtering.
- JPG / JPEG: Photographic or solid raster images.
- Text / Initials: Custom typography with curated font families, weights, and color pickers.
- Unicode Emoji: High-res native emoji glyph rendering.
Included Export Package Assets
-
favicon.icoBinary multi-image (16×16, 32×32, 48×48, 64×64) for legacy & desktop browsers. -
favicon-*.pngStandard PNG favicons in 16×16, 32×32, 48×48, 64×64, and 512×512 master. -
apple-touch-icon180×180 PNG formatted for iOS Safari home screen bookmarks. -
android-chrome-*192×192 and 512×512 PNGs for Android devices and installable PWAs. -
site.webmanifestJSON manifest linking PWA icons and standalone display configurations.
Favicon sizes & dimensions reference
A technical breakdown of modern icon standards. Our generator creates and packages all of these files in one click.
| Filename | Dimensions | Usage & Target Platform | Priority |
|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48, 64×64 | All browsers (Universal fallback): Desktop browser tabs, bookmarks, taskbar shortcuts, legacy compatibility | Critical |
| favicon.svg | Scalable Vector | Modern Chrome, Safari, Firefox, Edge: Infinitely crisp vector scaling, supports CSS @media (prefers-color-scheme) dark mode | Recommended |
| apple-touch-icon.png | 180×180 px | Apple iOS & iPadOS: iOS Safari home screen bookmarks & iPad web clips (iOS auto-rounds corners) | Standard |
| android-chrome-192x192.png | 192×192 px | Android Chrome / PWA: Android home screen web shortcuts and PWA install prompt icons | Standard |
| android-chrome-512x512.png | 512×512 px | Android / PWA Manifest: PWA loading splash screens and high-DPI Android app launchers | Standard |
| favicon-32x32.png | 32×32 px | Modern desktop browsers: Standard raster fallback for modern browser tab strips on Retina/HiDPI screens | Optional |
| favicon-16x16.png | 16×16 px | Desktop browsers: Standard raster fallback for 1x desktop browser tab displays and address bars | Optional |
| site.webmanifest | Manifest Config | PWA & Mobile Browsers: Declares PWA icons, theme color, background color, and standalone display mode | Standard |
How to add favicons to your website or framework
After extracting your downloaded ZIP into your project's public folder, add the corresponding code to your application header.
HTML5 / Astro / Static Sites
<head> section<!-- Place files in /public or web root -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Put files into your project's public/ directory. Modern browsers will prioritize the crisp vector SVG, while legacy browsers gracefully fall back to favicon.ico.
Next.js (App Router Metadata)
app/layout.tsxexport const metadata: Metadata = {
icons: {
icon: [
{ url: '/favicon.ico', sizes: 'any' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
],
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
};
Next.js App Router automatically injects verified <link> tags when declared in root metadata.
💡 Favicon not updating in your browser?
Browsers cache favicons very aggressively. If you updated your favicon and still see the old version, add a version query parameter: <link rel="icon" href="/favicon.ico?v=2"> to force an instant fresh download.
Frequently Asked Questions
Practical answers to common questions about favicon creation, sizing, and website installation.
What is a favicon and why is it important for my website? ↓
A favicon (favorite icon) is the small graphic displayed in browser tabs, bookmark lists, history feeds, search engine results, and mobile shortcuts next to your website title. A crisp, recognizable favicon builds brand credibility, improves tab scannability for users with multiple open pages, and ensures a professional presentation across desktop and mobile devices.
What favicon sizes and formats are recommended for modern websites? ↓
Modern web standards recommend a focused set of assets: a multi-resolution favicon.ico (containing 16×16, 32×32, 48×48, and 64×64 streams) for universal fallback, an SVG favicon for crisp vector scaling and dark mode support, an Apple Touch Icon (180×180 PNG) for iOS home screen bookmarks, and an Android web app manifest (site.webmanifest) with 192×192 and 512×512 PNG icons for PWAs. Our generator creates all of these automatically.
Does this tool generate a genuine binary favicon.ico file? ↓
Yes. Favicon Generator constructs an authentic binary ICO structure with standard ICONDIR headers, directory entries, image offsets, and multi-resolution PNG streams (16×16, 32×32, 48×48, 64×64) for reliable compatibility with desktop operating systems, taskbar shortcuts, and legacy browsers.
Why is my new favicon not updating in my browser? ↓
Web browsers cache favicons aggressively to avoid making repeated network requests on every page visit. When you update your favicon, you can help browsers recognize the change by adding a version parameter to your HTML link tag (for example, <link rel="icon" href="/favicon.ico?v=2">). Testing in a private/incognito window or clearing your browser cached files will also verify the update.
Can I use an SVG vector favicon with automatic Dark Mode? ↓
Yes. Modern browsers (Chrome, Firefox, Safari, Edge) support SVG favicons. Vector SVGs remain perfectly crisp on Retina, 4K, and 5K displays and can include CSS @media (prefers-color-scheme: dark) styles to adapt colors automatically when users switch between Light and Dark OS themes.
Should my favicon have a transparent or solid background? ↓
It depends on your artwork: transparent backgrounds work best for bold, high-contrast symbols and logos that stand out on both light and dark browser tab chrome. Solid backgrounds (with square, squircle, or rounded corners) are recommended for intricate logos, initials, or detailed artwork to maintain consistent contrast and prevent disappearing elements on dark browser strips.
Can I create a favicon from an icon, text initials, or emojis? ↓
Yes. You can upload your own image (PNG, SVG, JPG, WebP), choose from our curated catalog of 1,700+ open-source minimalist symbols, type initials with custom typography and font weights, or pick a high-resolution native Unicode emoji.
Are my uploaded files, logos, and images private? ↓
Completely private. Favicon Generator operates 100% locally in your web browser. All image decoding, vector rasterization, canvas scaling, binary ICO generation, and ZIP packaging take place entirely on your device. No files, text, or artwork are ever transmitted or stored on remote servers.