PNG to Favicon
A favicon is not one file. To look sharp everywhere, a single PNG logo has to become a set of images at different resolutions. This page explains how to convert a PNG to a favicon, which sizes each platform needs, and how to wire them into your HTML. The generator on the homepage does all of it in your browser — no upload required.
How to convert a PNG to a favicon
- Start with a square PNG. Ideally 512×512 or larger, with a transparent background. The generator downscales for every smaller size — downscaling preserves quality far better than upscaling.
- Drop it into the generator. It resizes the image to every standard favicon size: 16, 32, 48, 64, 128, 180, 192, and 512 pixels.
- Download the ZIP. It contains each PNG size, a multi-resolution favicon.ico, the manifest, and the HTML snippet to paste.
- Drop the files at your site root. Add the link tags below to your HTML
<head>.
Why one PNG size is not enough
Browsers and operating systems each request the favicon size that fits their slot. If you only ship a 32×32, an Android home screen shortcut will upscale it and look soft; if you only ship a 512×512, a browser tab will downscale it on every paint. Generating every size from your PNG means each surface gets a purpose-built asset. The result is a crisp icon in tabs, bookmarks, touch icons, and PWA installs.
Which PNG size each platform needs
| PNG size | Used by | Purpose |
|---|---|---|
| 16×16 | All browsers | Browser tab favicon |
| 32×32 | All browsers | Tab on high-DPI displays, taskbar shortcuts |
| 48×48 | Windows, Chrome | Desktop shortcuts, site listings |
| 64×64 | Windows | High-DPI shortcuts and tiles |
| 128×128 | macOS, Chrome | App listings, larger icon slots |
| 180×180 | iOS / Safari | Apple touch icon (home screen bookmarks) |
| 192×192 | Android / Chrome | Home screen and PWA icon |
| 512×512 | PWA / Android | Install prompt and splash screen |
The HTML to add
Place the generated files at your site root and add these tags to the <head> of every page. The ICO is the universal fallback; the PNG links target specific platforms.
<link rel="icon" href="/favicon.ico" sizes="any" />
<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" />The 192×192 and 512×512 PNGs are referenced from site.webmanifest for PWA installs:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}Private by design — no upload
Most online converters send your PNG to a server. This one does not. Conversion runs entirely in your browser with the canvas API, so:
- Your logo never leaves your device.
- There is nothing to delete from a server afterward.
- It works offline once the page has loaded.
- Conversion is instant — no upload or download round trip.
Ready to convert your PNG to a complete favicon set? Drop it in the generator and get every size in seconds — nothing is uploaded.
Generate your favicons →