Favicon Generator
Generate all favicon sizes and a ZIP package from one image.
Generate a full favicon set from a single square image: ICO, multiple PNG sizes, Apple Touch icon, Android icons, and a ready-to-paste HTML snippet — all packaged as one ZIP. Built entirely client-side using Canvas and JSZip.
About the Favicon Generator
Favicons are the smallest, most-overlooked branding asset on the web. They show up in every browser tab, every bookmark, every history entry, every share preview, every PWA install. Getting them right takes about ten minutes once and benefits every visitor forever; getting them wrong leaves your site looking unfinished in every place a favicon appears. The favicon generator packages the entire workflow into a single upload — give it a square source image and it produces every size and format you need.
The reason favicon setup is fiddly is that there is no single 'favicon.' There's a stack of them. Older browsers expect a /favicon.ico at the root of your domain. Modern desktop browsers prefer a 32×32 PNG referenced from your HTML. iOS adds Apple Touch icons (180×180 PNG) for home-screen bookmarks. Android adds maskable PWA icons (192×192 and 512×512). Each platform fetches whichever asset matches its preference, so the safest setup includes every size — and that's exactly what the generator produces.
Source image quality matters more than people expect. Favicons are displayed at very small sizes — 16×16 and 32×32 dominate browser tabs — and any complexity in the source will turn to mush. The best source images are bold, simple, high-contrast shapes with maybe one or two colors. A detailed logo with text typically looks great at 512×512 and unreadable at 16×16. If you have a complex logo, consider creating a simplified mark for the favicon and keeping the full logo for places it has room.
Provide the largest source image you can. 512×512 is the practical minimum for a good favicon set; 1024×1024 is better. The generator rasterizes downward from your source to every needed size, and downscaling looks dramatically better than upscaling. A 64×64 source upscaled to 512×512 will look soft and blurry across the board; a 1024×1024 source downscaled to 16×16 will look sharp.
After generating, the ZIP contains everything you need: the individual icon files, a site.webmanifest (the modern PWA manifest format that points Android and other platforms at the right sizes), and an HTML snippet ready to paste into your site's <head>. Copy the icons to your site's public root, paste the snippet, and you're done. The whole process — including generating the icons — runs entirely in your browser. The source image never leaves your machine.
How to use the Favicon Generator
- 1
Upload a square image
Best results come from a 512×512 or larger PNG with a transparent or solid-color background. Non-square images are letterboxed automatically.
- 2
Generate the package
Click Generate. The tool rasterizes your image into every standard favicon size on the spot.
- 3
Download the ZIP
The result is a single ZIP containing favicon.ico, multiple PNG sizes (16, 32, 48, 96, 192, 512), apple-touch-icon.png, and a ready-to-paste HTML snippet.
- 4
Paste the snippet into your <head>
Drop the included HTML lines into the <head> of your site and copy the icons into your public root. That's the whole install.
Features
- Single-input workflow: upload one image, get every size
- Produces ICO, multiple PNG sizes, apple-touch-icon, and Android icons
- Includes a manifest snippet for PWA support
- Includes a ready-to-paste HTML <link> snippet
- Output bundled as a single ZIP via JSZip
- Runs entirely in your browser — no upload
Common use cases
- Add a favicon to a new website or web app
- Refresh an old favicon set with all modern sizes
- Generate icons for a PWA from an existing logo
- Produce icons for a static site hosted on GitHub Pages or Netlify
- Create platform-specific bookmark icons for a documentation site
- Build a polished icon set for a portfolio or personal site
Tips and best practices
Simplify your logo for small sizes
A logo that includes fine text or detailed illustration may be unreadable at 16×16. If your full logo is complex, consider creating a simplified single-shape mark just for the favicon — a single letter, monogram, or icon — and use the full logo where space allows.
Use bold, high-contrast colors
Subtle gradients and pastels disappear at small sizes. Strong, saturated colors with high contrast against typical browser tab backgrounds (white or dark gray) look crisp at every size.
Provide the largest source you have
Always upload your highest-resolution version. The generator downscales beautifully but cannot invent detail. A 1024×1024 source produces sharper 16×16 and 32×32 icons than a 64×64 source ever can.
Pad your source slightly
Some platforms apply automatic padding or rounded-corner masking to icons (especially on iOS home screens). Leaving a few pixels of breathing room around your mark in the source prevents the edge from being clipped.
Check the result in a real browser tab
After installing, open your site in a fresh tab and visually confirm the favicon looks crisp. Hard-refresh — browsers cache favicons aggressively and you may need to clear the favicon cache to see your update.
Technical details
Standard favicon sizes
16×16 (legacy browser tabs), 32×32 (modern browser tabs and bookmarks), 48×48 (Windows site tile), 96×96 (desktop shortcuts), 180×180 (apple-touch-icon for iOS home screens), 192×192 and 512×512 (Android home screen and PWAs). The .ico file typically contains multiple sizes (16, 32, 48) in a single file.
What goes in your HTML head
<link rel="icon" type="image/x-icon" href="/favicon.ico"> for legacy, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> for modern browsers, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS, and <link rel="manifest" href="/site.webmanifest"> for PWAs. The generator outputs all of these in the included snippet.
Why ICO still matters
Some older browsers and many third-party tools (RSS readers, link previewers, certain CMS thumbnails) request /favicon.ico by name and fall back to it if no other icon is found. Including an ICO file in your favicon set ensures these tools display something useful. Modern formats are preferred where supported, but ICO is the universal fallback.
Frequently asked questions
What size should my source image be?
Use a square image at least 512×512 pixels. PNG with transparency works best. Avoid input smaller than 256×256 because downscaling looks better than upscaling.
Why are there so many favicon sizes?
Different platforms ask for different sizes: 16×16 and 32×32 for browser tabs, 180×180 for iOS home screens, 192×192 and 512×512 for Android and PWAs. Including them all is the safest path.
Do I need favicon.ico if I have PNG favicons?
Yes, for older browsers and for the default /favicon.ico fallback that any client may request. The generated ZIP includes both.
Can I generate icons from a non-square image?
Yes, but the result will be letterboxed (padded with transparent or solid background) to make it square. For the cleanest favicon, start from a square source.
How do I install the generated icons?
Unzip the package, copy every file into your site's public root (so favicon.ico is accessible at yourdomain.com/favicon.ico), and paste the included HTML snippet into your site's <head>. That's the full install.
Why is my favicon not showing up after install?
Browsers cache favicons aggressively. Hard-refresh (Cmd/Ctrl + Shift + R), or open the page in a private window to see the new icon. Some browsers require you to close all tabs to that domain to clear the cache.
Does the generator support dark-mode favicons?
Not in this version. Most browsers don't yet honor different favicons per color scheme; the safer approach is to design one favicon that reads well against both light and dark tab backgrounds.