Favicon Generator
Generate favicons in all sizes (16x16, 32x32, 180x180) from any image. Create ICO and PNG favicons. Free online favicon maker for websites
A favicon used to be one 16×16 ICO file in the site root. In 2026 it is ten files in various sizes (16, 32, 48, 64, 128, 180, 192, 512), three formats (ICO, PNG, SVG), and a web app manifest — because Apple wants 180×180 PNG, Android wants 192/512, Windows wants tile images, and browsers want SVG so they can recolor for dark mode. This generator produces all of them from a single source image, plus the HTML `<link>` tags you need in `<head>`.
Sizes and formats you actually need
- favicon.ico (16×16 + 32×32 + 48×48 in one file) — the legacy default. Internet Explorer/Edge still request /favicon.ico from the root. Keep it.
- icon-192.png (192×192) — Android home screen ("Add to home screen" PWA).
- icon-512.png (512×512) — Android splash screen, web app manifest.
- apple-touch-icon.png (180×180) — iOS home screen. Apple ignores web app manifest icons; this file (or apple-touch-icon-precomposed.png) is mandatory for iOS home-screen pins.
- favicon.svg — vector format that browsers can recolor (with prefers-color-scheme media query inside the SVG). Chrome, Firefox, Safari support since 2022.
- mstile-150x150.png + browserconfig.xml — Windows pinned tile. Used by ~0.5% of users; include if you target enterprise Windows.
- site.webmanifest — PWA manifest with name, theme color, and icon references. Required for "install as app" behavior.
Working example: the `<head>` you actually need
Input
A typical favicon setup for a marketing site
Output
<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">
<meta name="theme-color" content="#0a0a0a">
site.webmanifest:
{
"name": "Your Site",
"short_name": "Your Site",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0a0a0a",
"background_color": "#ffffff",
"display": "standalone"
}The "rel=icon" with sizes=any covers the ICO file for legacy browsers. The SVG rel=icon overrides when the browser supports it. Apple ignores both and uses apple-touch-icon. theme-color sets the browser chrome color on mobile (Android tab color, iOS status bar tint in standalone PWA mode).
Design rules for tiny icons
- Test at 16×16 before anything else. Almost every "I scaled down my logo" favicon looks like mud at 16px. Most logos need redrawing for the tiny size — a simplified mark, not the full word.
- High contrast — favicons appear next to other tabs and against various backgrounds (browser chrome, bookmarks bars, search results). A subtle gradient on a soft background disappears.
- Solid background or transparent — transparent works on light backgrounds, fails on dark mode tabs. A solid background ensures consistency. SVG with prefers-color-scheme is the best of both.
- Padding inside the image — leave 1-2 px of padding around the mark at 16×16. Without it, the icon touches the edge of its container and looks cramped.
- Square aspect — the canvas is always square. Non-square logos either fit inside (with whitespace) or get cropped. Cropping a horizontal wordmark to a square typically leaves you with one letter.
When to reach for this tool
- You are launching a new site and want a complete favicon package without manually exporting from Figma at ten sizes.
- You inherited a site with just favicon.ico (legacy) and want to add Android/iOS/SVG support.
- You are debugging "the favicon does not show on iPhone home screen" — almost always missing apple-touch-icon at 180×180.
- You are creating a PWA and need the complete icon set referenced in your web manifest.
What this tool will not do
- It will not redesign your logo for tiny sizes. A complex logo scaled down looks bad regardless of the export tool. For a "tiny logo" you usually need a separate, simplified mark — design work, not export work.
- It will not push files to your server. Download the generated zip, upload manually or via your deploy pipeline.
- It will not check your existing favicon implementation. For that, use a favicon-checker tool that fetches your URL and reports which icons are missing or broken.
Your source image is processed entirely in your browser via Canvas APIs. No upload — the design stays local until you choose to publish it.
Frequently asked questions
Do I still need favicon.ico in 2026?
Yes — for two reasons: (1) some browsers (older IE, some embedded WebViews) request /favicon.ico from the root regardless of `<link>` tags; (2) bookmark services, RSS readers, and some search engines look for it. It is one extra small file; keep it.
What size should my favicon actually be?
There is no single answer. The browsers choose the size that fits the slot they need — a 32×32 in the tab on a non-retina display, 48×48 in some bookmark UIs, 256×256 in some Windows contexts. The "favicon.ico" file is multi-resolution (contains 16/32/48 in one file). Modern setups use separate PNGs at 32/192/512 plus an SVG.
Why is my favicon not updating after I changed it?
Browsers aggressively cache favicons. Try: (1) hard refresh (Ctrl+Shift+R); (2) view /favicon.ico directly to confirm the new version is served; (3) clear browser cache; (4) wait 24-48 hours for the cache to expire naturally. For dev iteration, append a query string (?v=2) to the favicon URL in your link tags to bust caches.
Can I use an animated GIF as a favicon?
Technically yes (Firefox supports), practically no (Chrome and Safari render only the first frame). Animation in browser tabs is also widely considered hostile UX — distracting in a row of static tabs. Stick to static.
How do I make a dark-mode favicon?
Use SVG with embedded media queries: `<style>@media (prefers-color-scheme: dark) { #path { fill: white; } }</style>`. Chrome, Firefox, and Safari respect this. For browsers that ignore it, the default colors apply. Test in both modes; some users find a stark white-on-black favicon harsher than a neutral mid-tone.
What is the difference between apple-touch-icon and apple-touch-icon-precomposed?
Older iOS versions added gloss/rounded-corner effects to plain apple-touch-icon images. The "-precomposed" suffix told iOS to skip the effects. iOS 7+ stopped adding effects; both filenames now produce the same result. Use whichever your taste prefers — both work.
Related tools
Convert images between PNG, JPEG, and WebP formats. Batch conversion with quality control. Free online image format converter
Compress and resize images online without losing quality. Reduce JPEG, PNG, WebP file size. Free image optimization tool with adjustable quality
Generate SEO meta tags, Open Graph, Twitter Cards with live preview. Optimize website metadata for search engines and social sharing
Pick colors from HEX, RGB, HSL. Generate color palettes and harmonies. Create gradients. Free online color picker and palette maker for designers
Remove background from images using AI. Works offline in your browser. Free online background eraser, no upload to server required
Place screenshots in device frames - iPhone, MacBook, iPad, Android, browser windows. Free online mockup generator for presentations and marketing
Last updated · E-Utils editorial team