Guide · Favicons
How to make a favicon (.ico) from a PNG or JPG
Make a sharp, multi-size favicon from any image — free, entirely in your browser, with no upload and no account. This guide walks through the conversion, the favicon sizes you actually need in 2026, and the exact HTML to drop into your site.
The favicon is the tiny icon in the browser tab — small, but it's the first piece of your brand a visitor sees, and a missing or blurry one makes a site look unfinished. The good news: you don't need design software or a sign-up. The catch with most "favicon generators" is that they upload your image to their server first. You don't have to do that. With a browser-based image converter, the whole conversion happens in your tab and the file never leaves your device.
What is a .ico file (and why not just use a PNG)?
An ICO file is a container that holds multiple image sizes in one file — unlike a PNG, which is a single image. That's exactly why it's perfect for favicons: a browser can pull the 16-pixel version for the tab, the 32-pixel version for bookmarks and retina displays, and the 48-pixel version for Windows site pinning — all from one favicon.ico, with no extra markup.
It's also the universal fallback. Every browser automatically checks /favicon.ico at your site root, including older ones, so a single well-built ICO covers the widest range of devices.
Favicon sizes you actually need in 2026
Inside the .ico file
Three sizes traditionally live together inside favicon.ico:
| Size | Used for |
|---|---|
| 16×16 | Classic browser tab |
| 32×32 | Modern / retina tabs & bookmarks |
| 48×48 | Windows site pinning (optional, cheap to include) |
Convertissima also lets you add 64, 128 and 256 px for high-DPI screens — including them costs you nothing and future-proofs the icon.
The companion PNGs for mobile & PWA
A few icons live outside the .ico, as standalone PNG files:
- 180×180 —
apple-touch-icon.pngfor the iOS home screen. - 192×192 and 512×512 — Android and PWA install icons, referenced from your
site.webmanifest.
You can export all of these from the same source by reusing the image converter's max-width/height controls — no separate tool, no upload.
How to make the favicon (step by step)
Step 1 — Start from a square, high-resolution source
Use a square PNG or JPG that's at least 512×512 px. A square source avoids awkward cropping, and high resolution keeps the small sizes crisp when they're scaled down.
Step 2 — Open the converter
Open the image converter. It runs entirely in your browser — no upload, no account. Drag your image in or pick it from your device.
Step 3 — Choose ICO output and pick the sizes
Set the output format to ICO and select the sizes: 16, 32 and 48 px at minimum; add 64, 128 and 256 for high-DPI displays.
Step 4 — Convert and download favicon.ico
Convert and download the file. Convertissima builds a real Windows ICONDIR and renders each size down from your source using progressive downscale — so the 16 px icon stays sharp instead of turning into mush. This is the concrete version of the classic advice "design big, scale down."
Why progressive downscale matters: many "PNG to ICO" tools rasterize once and squash the result. Stepping the image down in stages preserves edges, so your icon is still legible at 16 px in a crowded tab strip.
Step 5 — Make the companion PNGs (optional)
Back in the image converter, set a max dimension of 180 and export your apple-touch-icon.png, then repeat at 192 and 512 px for the manifest icons. Same source, same private workflow.
How to add the favicon to your website
Drop favicon.ico into your site root — browsers auto-detect /favicon.ico even with no tag. For full modern coverage, add this to your <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Not updating? Browsers cache favicons aggressively. Hard-refresh, append ?v=2 to the favicon URL, or clear the cache to force the new one to show.
Design tips for a favicon that's readable at 16px
- Design big, scale down — never up. Test the result at actual 16×16 size before you commit.
- Simplify. Use a logomark or a single letter, not your full logo. Fine detail disappears at 16 px.
- Add breathing room and decide on transparency: keep it, or set a background color for opaque contexts.
Frequently asked questions
How do I make a favicon without uploading my image anywhere?
Use a browser-only converter like Convertissima. The image is decoded and the .ico is built locally in your browser tab, so the file is never sent to a server and no account is required.
What size should a favicon be?
A .ico with 16×16, 32×32 and 48×48 px covers browser tabs, bookmarks and Windows pinning. For mobile and PWA support, also export a 180×180 Apple touch icon and 192×192 plus 512×512 PNGs referenced from your web manifest.
Can I make a favicon from a JPG?
Yes — JPG or PNG both work as the source. Start from a square, high-resolution image (512×512 px or larger) for the sharpest result at small sizes.
Do I need a PNG favicon as well as the .ico?
It's optional. The .ico is the universal fallback every browser auto-detects at /favicon.ico. Separate 16×16 and 32×32 PNGs can look marginally sharper on some modern browsers, but they aren't required.
Why isn't my new favicon showing up?
Favicon caching. Hard-refresh the page, append ?v=2 to the favicon URL, or clear the browser cache to force an update.
Is .ico still relevant in 2026, or should I use SVG?
SVG favicons work in Chrome, Firefox and Edge but need an .ico fallback for full support — so the .ico remains the safe baseline.
Make your favicon
That's the whole job: a square, high-res source → a multi-size .ico built in your browser → root plus a couple of <head> tags. No upload, no account, no software.