PNG to ICO — Favicon Generator
Build a single multi-resolution favicon.ico (16, 32, 48, 64, 128, 256) from any PNG. Transparent or solid background. Browser-only.
Drop a PNG, JPG, or WebP image
Best with a square 256×256 PNG. Generation runs locally.
About this tool
WRRK's favicon generator turns a PNG, JPG, or WebP image into a single multi-resolution ICO file containing 16, 32, 48, 64, 128, and 256-pixel renders. The conversion runs entirely in your browser — Canvas resamples each size and a hand-written ICO encoder packs them into a standard ICONDIR + ICONDIRENTRY container. No upload, no signup, no watermark, and the page works offline once it's loaded.
Pick 'Transparent' for the cleanest look across light and dark browser tabs, or 'Solid color' if your brand identity needs a coloured plate. Use 'Contain' fit to preserve a non-square logo (with padding) or 'Cover' to fill the square edge-to-edge. The output is a single favicon.ico ready to drop into your site root or Next.js src/app/favicon.ico.
How to make a favicon (5 steps)
- Drop your image. Drag a PNG (recommended), JPG, or WebP into the drop zone. A square 256×256 PNG with transparency is the ideal source — bigger sources also work and get downsampled.
- Pick resolutions. Tick the sizes to bundle. 16/32/48/64 is a safe default; add 128/256 for Retina and Apple touch icons.
- Set background and fit. Transparent for icons that need to sit on any tab colour, or solid for branded plates. Contain preserves shape; Cover fills edge-to-edge.
- Build. Click 'Build favicon.ico'. The tool renders each size to a Canvas and encodes them into a single multi-resolution ICO file using a pure-JS ICO encoder.
- Download & install. Save favicon.ico to your computer. Drop it into your website root or src/app/ in Next.js — browsers pick it up automatically.
When to generate
- Adding a favicon to a new website or web app
- Updating brand identity across browser tabs and bookmarks
- Producing Windows desktop shortcut icons
- Generating Apple touch icons at 128/256 for iOS bookmarks
- Replacing default Next.js / WordPress / Shopify favicons
- Bundling multiple resolutions into a single .ico drop-in
- Creating retro-compatible icons for legacy browsers
Frequently asked questions
+−How do I convert a PNG to a favicon.ico?
Drop your PNG into the box, pick the resolutions you want bundled (16, 32, 48, 64 by default — Windows desktop + browser tabs), and click 'Build favicon.ico'. Download the single multi-resolution .ico file and drop it into your site's root.
+−What sizes should I include in my favicon.ico?
16×16 and 32×32 are the bare minimum — they cover browser tabs, bookmarks, and address bars. 48×48 and 64×64 are recommended for Windows desktop shortcuts. 128×128 and 256×256 are useful for high-DPI displays and Apple touch icons. The tool ships 16/32/48/64 by default — a safe baseline.
+−What's the difference between favicon.ico and PNG favicons?
favicon.ico is a single file containing multiple resolutions — Windows and older browsers prefer it. Modern browsers also accept PNG favicons via <link rel='icon' type='image/png'>. ICO has the advantage of being a single drop-in file that works everywhere, including legacy IE.
+−Does my favicon need a transparent background?
Usually yes — transparency lets the icon sit cleanly on light/dark browser tabs. Pick 'Solid color' only if your logo needs a coloured plate (e.g. a white logo on a dark brand colour) so it's visible regardless of theme.
+−Are my images uploaded to your server?
No. The whole conversion runs in your browser using the Canvas API and a hand-written ICO encoder. Your image never leaves your device and the page works offline once it's loaded.
+−Should I use 'contain' or 'cover' fit?
Contain keeps the entire image visible inside the square — best for non-square logos, with optional padding around the edges. Cover crops the image to fill the square — best when the source is already square or you want edge-to-edge fill.
+−Where do I put favicon.ico on my website?
Drop it at the root: yoursite.com/favicon.ico — browsers automatically fetch it. For Next.js, put it in the public/ folder or as src/app/favicon.ico. Add <link rel='icon' href='/favicon.ico'> for explicit reference.