How to Generate a Complete Favicon Pack From One Image (Free, No Upload)
Last updated: April 15, 2026
Favicon Pack Generator
Generate a complete favicon pack from any image in your browser. ZIP download with every file and HTML snippet.
Try It Free →A complete favicon pack in 2026 needs 8 files: favicon.ico, three PNG sizes (16×16, 32×32, 48×48), an apple-touch-icon (180×180), two android-chrome sizes (192×192 and 512×512), and an mstile-150×150. Plus a site.webmanifest for PWAs. Generating them by hand is tedious; a browser-based generator does all of it in 30 seconds without uploading your image anywhere.
Back in 2005, one favicon.ico at the root of your site was enough. Today, you need icons sized for iOS home screens, Android PWA installs, Windows Start tiles, Safari pinned tabs, and high-DPI browser tabs. Getting one wrong means a blurry or missing icon somewhere nobody on your team ever tested.
What Every Site Needs
favicon.ico— legacy support for older browsers that request it by default at the rootfavicon-16x16.png— browser tab on standard-DPI displaysfavicon-32x32.png— higher DPI displays, bookmark barsfavicon-48x48.png— bookmarks folder, desktop shortcutsapple-touch-icon.png(180×180) — iOS home screen when users “Add to Home Screen”android-chrome-192x192.png— Android home screenandroid-chrome-512x512.png— PWA splash screen and high-DPI Androidmstile-150x150.png— Windows 10/11 Start menu tilesite.webmanifest— tells PWAs how to install your site
The HTML You Paste Into <head>
<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">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">Six link tags and two meta tags. The order doesn't matter. Put them anywhere in the <head>.
SVG Source Beats PNG
Starting from an SVG means every output size renders sharp. Vector has no resolution — a 16×16 and a 512×512 both start from the same crisp source geometry.
Starting from a low-res PNG means the 512×512 output is pixelated upscaling. The generator can only shrink clean; it can't invent detail that isn't there.
If you have to start from PNG, use at least 512×512. Ideally, open the SVG source in Figma, Illustrator, or Inkscape and re-export at 1024×1024 PNG as the source — it downscales cleanly to every smaller size.
Design for 16×16
A favicon at 16×16 has only 256 pixels. Detail disappears. Rules of thumb:
- Use 1-2 colors max for the main shape.
- Avoid text unless it's a single letter (and even then, simple sans-serif only).
- High contrast between shape and background or transparency.
- Test at 16×16 before generating the pack — if it doesn't read small, bigger versions won't save it.
A common mistake is designing the favicon as a tiny version of your full logo. Full logos rarely scale down well. A simplified icon-mark designed for small sizes is almost always better.
Transparent vs Solid Background
Transparent favicons look clean in browser tabs but can disappear on certain mobile home screens (iOS tints icons based on wallpaper). Best practice: transparent for browser contexts, solid background for mobile.
The generator lets you pick: leave transparent, or fill with a brand color. For mobile tile surfaces specifically, you'll usually want a solid color — Apple and Google both guide toward tiled icons with a defined background.
Padding and Rounded Corners
iOS 7+ stopped rounding corners automatically for apple-touch-icon. You render your icon exactly as provided. For a native-feeling icon, add your own 20% radius rounded corners — or let the generator do it with a toggle.
Add 10-15% padding around your icon inside the tile. Icons flush to the edge look visually cramped, especially on iOS where the icon sits inside a slightly rounded frame.
The Browser-Based Generator Advantage
Our Favicon Pack Generator runs entirely in your browser using the Canvas API. Your source image never leaves your device, never hits a server. Drop an image, adjust background and padding, click Generate — you get a ZIP with:
- All 8 favicon files at correct dimensions
- A working site.webmanifest with icon references
- A
html-snippet.txtwith the exact HTML to paste into<head>
Unzip, drop the files into your public/root directory, paste the snippet, deploy.
Test on Real Devices
Emulators and browser dev tools don't catch everything. Actually test:
- Add the site to your iPhone home screen (Safari → Share → Add to Home Screen).
- Pin the site in Safari pinned tabs.
- Bookmark it in Chrome desktop.
- Install as a PWA in Chrome or Edge.
- Pin to Windows Start menu.
Each surface loads a different file. Real-world testing catches issues your local preview misses.
Bonus: Dynamic Theme Color
The theme-color meta tag controls the browser chrome color on mobile. Match it to your page background for a polished look. For dark mode support:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">Two tags, light/dark-aware browser chrome. Ten-second upgrade.
Skip the Paid Generators
Several paid favicon generators charge $10-30 for what takes 30 seconds in a browser. No generator justifies that when the Canvas API can do it client-side for free. Use a browser-based tool, keep your image on your device, ship your favicon pack today.
Frequently Asked Questions
Do I still need favicon.ico in 2026?
Yes, for legacy browsers and for the default /favicon.ico request that every browser makes by default. Modern browsers prefer the PNG references in your <head>, but including ICO ensures universal support.
What size should I use for apple-touch-icon?
180x180 is the current recommended size. iOS will scale this down for smaller contexts automatically. Older guides list 152x152 or 167x167 — 180 covers those too, so you only need one apple-touch-icon.
Is my image uploaded anywhere?
With a browser-based generator like ours, no. Everything is processed via the Canvas API locally in your browser. No upload, no server, no tracking. You can convert proprietary logos safely.
Do I need a site.webmanifest?
Required for Progressive Web App (PWA) installation. Optional otherwise, but adding it takes no extra work since the generator includes it. If your site supports PWA install, the manifest is essential.
What if my logo doesn't look good at 16x16?
Design a simplified icon-mark specifically for small sizes. Full logos rarely scale down well. A 2-color glyph or simplified initial is almost always more readable than a shrunk-down full logo.