CodeKitHubWhat Is This Tool?
A favicon.ico isn't just a small picture — it's a container format that can hold several sizes of the same icon in one file, so the browser, taskbar or bookmark bar can pick whichever resolution looks sharpest for the spot it's showing it in. Renaming a PNG to favicon.ico doesn't produce that: it's a single image wearing the wrong file extension, and while some browsers tolerate it, plenty of tools, crawlers and older browsers reading the raw bytes expect the real ICO container structure and will fail or fall back to a blank icon.
This tool builds an actual ICO container: it renders your SVG at 16×16, 32×32 and 48×48, encodes each as a PNG internally, and packs all three into one valid favicon.ico using the same PNG-in-ICO format every browser and OS has supported since Windows Vista. Alongside it, you get separate PNG files at 180×180 (the size iOS uses for the icon when someone adds your site to their home screen) and 192×192 / 512×512 (the sizes Android and PWA install prompts pull from your web app manifest).
Why Use It?
- Produces a genuinely valid multi-resolution favicon.ico, not a renamed PNG.
- Covers every icon size a real deployment needs in one pass: 16, 32, 180, 192, 512px.
- Ready-to-paste <head> HTML — no guessing at rel/sizes/type attributes.
- Non-square SVGs are centered on a transparent square instead of being stretched.
- Everything renders locally in your browser; the SVG is never uploaded.
How to Use
- Click the box or drop your SVG logo file onto it.
- The tool renders it at every favicon size automatically — no settings to configure.
- Download favicon.ico for your site root, plus the individual PNG icons.
- Copy the HTML snippet and paste it into your page's <head>.
Example
Input
logo.svg — a company mark, 3 KB vectorOutput
favicon.ico (16/32/48px combined), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngOne SVG in, every icon file a real deployment needs, out.
Which icon size is used where
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16/32/48px (combined) | Browser tab, bookmark bar, taskbar |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Fallback for browsers that prefer PNG favicons |
| apple-touch-icon.png | 180×180 | iOS home screen icon when the site is added to the Home Screen |
| icon-192.png | 192×192 | Android home screen icon, web app manifest |
| icon-512.png | 512×512 | PWA install prompt, Android splash screen icon |
Why the SVG source matters
Because SVG stores shapes as math rather than pixels, rendering it fresh at 16px and at 512px both start from the same exact path data — there's no upscaling artifact at the large end and no forced pixel-snapping guesswork the tool has to compromise on at the small end. If you only have a PNG logo, this same tool can't help; convert or recreate the logo as SVG first, since scaling a small PNG up to 512px would just produce a blurry result.
Frequently Asked Questions
Why not just rename a PNG to favicon.ico?
A .ico file has its own binary container format (an ICONDIR header describing how many images it holds, followed by a directory entry per image) — a PNG file renamed to .ico is still just a PNG with the wrong extension inside. Most modern browsers are forgiving and will render it anyway, but this tool builds a real ICO container holding three actual resolutions, which is what the format was designed for and what stricter readers expect.
Why do I need PNG icons if I already have favicon.ico?
favicon.ico only covers the classic browser-tab/bookmark use case. The 180×180 PNG is what iOS uses when a user adds your site to their home screen (apple-touch-icon), and the 192×192 / 512×512 PNGs are what Android and PWA install prompts pull from your web app manifest. Without them, your icon on a phone's home screen falls back to a generic screenshot or blank square.
My logo isn't square — what happens to it?
It's centered on a transparent square at each target size rather than stretched, so a wide or tall logo keeps its correct proportions instead of getting squashed into a square.
Where do I put the downloaded files?
Place favicon.ico, apple-touch-icon.png, icon-192.png and icon-512.png in your site's root folder (next to index.html), then paste the generated <link> tags into your page's <head>.
Is my SVG uploaded anywhere?
No. The SVG is rendered onto local <canvas> elements and the ICO/PNG files are assembled in your browser. Nothing is sent to a server.