Free Favicon Generator — ICO + PNG + Webmanifest Pack
A favicon is the smallest piece of brand surface area on the entire web — and the one users see most. PikDraw's Favicon Generator turns a single source square into the complete pack a modern site needs: a multi-size favicon.ico, every PNG variant from 32 to 512 px, and a starter site.webmanifest — built entirely in your browser, free of signup, watermarks and daily limits.
What is the Favicon Generator — ICO + PNG + Webmanifest?
The Favicon Generator is a browser tool that converts any uploaded image into the full favicon set required by Chrome, Safari, Firefox, Edge, iOS, Android and PWA installers. Configurable background and corner radius, native-pixel preview, and one-click download of favicon.ico, six PNG sizes and a starter manifest.
Key features
- Multi-size favicon.ico (16/32/48) built in-browser with a real ICO encoder
- Standalone PNG sizes: 32, 96, 180, 192, 512 px
- Starter site.webmanifest for PWA installation
- Transparent or solid background option
- Corner-radius slider for rounded icons
- Native-pixel preview at every export size
- 100% client-side — no upload, no signup, no watermark
- Works with PNG, JPG, WebP and SVG source files
How it works
The tool decodes the uploaded image into an HTMLImageElement, then for each target size allocates an offscreen canvas, fills the chosen background (with optional rounded-corner clipping), and draws the image centred at object-fit:contain. Each canvas is exported with toBlob('image/png') for high-fidelity rasterization at every dimension. For favicon.ico the tool builds a real Microsoft ICO container: a 6-byte header (reserved=0, type=1, count=N), N × 16-byte directory entries (width, height, color count, planes, bits-per-pixel, byte size, byte offset) and the concatenated PNG payloads. Modern browsers fully support PNG-in-ICO since IE11, so the file is universally consumable. The site.webmanifest is a JSON file pointing to the 192 and 512 PNGs with theme_color and background_color matching your chosen background. All files download sequentially via Blob URLs — no zip step, no server roundtrip. Everything runs client-side. Source image, canvases, ICO bytes, manifest JSON and downloads all live in your browser. No analytics, no telemetry, no daily limit.
Why use this tool
Most online favicon generators upload your logo to a server, watermark exports, gate ICO format behind signup, or skip the webmanifest entirely. PikDraw runs in the browser, exports a real multi-size ICO with PNG variants and a starter manifest, and asks nothing in return — no account, no email, no watermark, no daily limit.
Common use cases
- Launching a new site and needing every favicon size at once
- Refreshing brand identity across an existing site
- Generating PWA icons for an Android Chrome installable app
- Preparing Apple touch icons for iOS Safari home-screen pinning
- Building a starter favicon set for a side-project before brand is finalized
- Replacing default Vercel / Lovable / GitHub Pages favicons with your own
How to use this tool
- Upload a square source image — Drop a 512×512 (or larger) square logo. The tool downscales for every size — uploading too small forces low-quality icons. PNG with transparency works best for crisp edges; SVG is automatically rasterized.
- Choose a background — Leave transparent for modern PWA / Apple touch icons that adopt the system colour, or pick a solid background to guarantee contrast against browser tabs in light and dark mode.
- Adjust corner radius (optional) — Set radius 0% for a square icon, 100% for a full circle. iOS already rounds icons automatically — use 0% for App Store / Play Store assets and 20–25% for desktop browsers that show square favicons.
- Preview at native sizes — The preview row renders the actual export pixels (16, 32, 48, 96, 180, 192, 512 px), so you can spot whether text or fine details fall apart at favicon scale.
- Download the pack — Hit Download — you get favicon.ico (multi-size 16/32/48), all PNG sizes, and a starter site.webmanifest. Drop into your /public folder and link them in <head>.
Who should use this
Developers shipping new sites or PWAs, designers handing off favicon packs to engineers, indie founders launching MVPs, agencies bulk-generating brand assets across client projects, and anyone who needs a complete favicon pack without uploading their logo to a third-party server.
How to get started
Drop a square logo (512×512 or larger), pick a background, hit Download. Drop the files into your site's /public folder and link them in <head>. First favicon installs in under a minute.
Best practices
- Start from a 512×512 (or larger) source — downscaling preserves quality; upscaling never does
- Use a simplified mark for favicons; full logotypes are unreadable at 16 px
- Test at 16 px in a real browser tab before shipping — the preview is honest but a live tab is final
- Cache-bust new favicons with a query string (favicon.ico?v=2) so users see the update
- Keep Apple touch icons (180 px) opaque — iOS does not honour transparency
- Update site.webmanifest with your real app name and short_name before shipping
Pro tips
- Simplify your logo for favicons — a single letter or mark reads better than a full logotype at 16 px.
- Test contrast against Chrome's dark tab bar (#202124) and Safari's pinned-tab view.
- Apple touch icons (180 px) should NOT be transparent — iOS will render a black background.
- Re-export whenever you change your brand colour: a transparent favicon adopts the tab colour, but PWA icons don't.
- Use the same source square for app-icon-generator so favicon and store icons stay consistent.
Expert insights
Use a simplified mark
Strip your logo to one letter or symbol for favicons — full logotypes turn to mush at 16 px.
Opaque for Apple touch
iOS ignores transparency on touch icons — always pick a solid background if your logo is white-on-clear.
Cache-bust the swap
Add ?v=2 to your favicon link the first time you update — browsers cache favicons for weeks.
Limitations to be aware of
- Raster output only — no SVG favicon variant in v1 (SVG favicons need a PNG fallback anyway)
- Single source image — no per-size custom artwork (use the simplest mark for best results)
- Manifest is a starter — edit name, short_name and theme_color to match your brand
- Browser cache may take days to clear — use query-string busting for fast updates
Frequently asked questions
- What sizes are in the favicon pack?
- favicon.ico bundles 16×16, 32×32 and 48×48 in a single multi-image ICO file. The pack also ships standalone PNGs at 32 (modern browsers), 96 (high-DPI tabs), 180 (Apple touch icon), 192 (Android Chrome / PWA) and 512 (PWA install splash and Play Store). That covers every requirement of modern browsers, iOS Safari, Android Chrome and PWA manifests.
- Why does favicon.ico still matter in 2026?
- Browsers still request /favicon.ico by default whenever an HTML page omits the <link rel='icon'> tag. Search-result favicons, browser-tab fallbacks, RSS readers, bookmark managers and many third-party tools all read favicon.ico before checking for PNG variants. Shipping a proper multi-size ICO costs nothing and guarantees every consumer sees a crisp icon.
- Should the background be transparent?
- For favicon.ico and PNG favicons: yes — transparent lets browser tabs render the icon over whatever theme is active. For Apple touch icons (180 px): no — iOS does not honour transparency and will render a black square behind your icon. The tool generates both from the same source.
- What goes in site.webmanifest?
- The manifest declares your PWA name, theme colour, background colour and icon set so Chrome, Edge and Android can install your site as an app. The generator outputs a starter manifest pointing to the 192 px and 512 px icons; edit name and short_name to match your brand, then link it with <link rel='manifest' href='/site.webmanifest'>.
- How do I install the favicons?
- Drop all files into your site's public root, then add to <head>: <link rel='icon' href='/favicon.ico' sizes='any'> <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> <link rel='apple-touch-icon' sizes='180x180' href='/favicon-180x180.png'> <link rel='manifest' href='/site.webmanifest'>
- Does it support SVG favicons?
- The current pack ships raster PNG / ICO only, which works in 100% of browsers. SVG favicons are supported in Chrome, Firefox and Safari but still need a PNG fallback for legacy clients — so a raster pack remains the safest universal install.
- Why isn't my favicon updating?
- Browsers cache favicons aggressively — sometimes for weeks. Force-refresh with a query string (favicon.ico?v=2) or update the <link> tag to point to a freshly named file. Server-cache and CDN cache can also pin the old icon; purge them before debugging the favicon itself.
- Is anything uploaded?
- No. The whole pack — ICO, PNG sizes and webmanifest — is built entirely in your browser using Canvas and a small ICO encoder. Your logo never leaves the device, useful for unreleased brand work.