How to Create a Favicon From an Image or Logo
Published December 8, 2025 · Updated June 9, 2026
Turn a logo into a favicon: start from a square 512×512 source, simplify it for tiny sizes, export the full ICO + SVG + Apple + PWA set, paste the HTML.
To turn a logo or image into a favicon: start from a square source at 512×512 or larger (an SVG is best), simplify the design so one bold mark stays legible at 16px, then export the full modern set — a multi-size favicon.ico, a scalable favicon.svg, a 180×180 Apple touch icon, and 192/512 PWA icons — and paste the matching <link> tags into your <head>. You don’t hand-export a dozen PNGs anymore; the SVG and multi-size ICO do that work for you.
In one line: prepare a clean square source, then generate every file and the HTML from one upload.
Step 1: Pick and prepare the source
The quality of your favicon is decided before you export anything. Start from the best source you have, in this order of preference:
- SVG — the ideal source. It’s resolution-independent, so it stays razor-sharp from a 16px tab to a 512px home-screen tile, and it can carry a dark-mode variant. Use it if your logo exists as vector.
- PNG at 512×512 or larger — perfectly fine. Make sure it’s high-resolution; a 64px logo blown up to 512 will look soft at every size.
- JPG at 512×512 or larger — works, but no transparency and some compression artefacts. Convert to PNG if you can.
512×512 is the number to remember: it’s the largest size any browser or PWA surface ever requests, so a source at that size (or bigger) covers every output with no upscaling.
Make it square
Favicons are square. A wide wordmark or a tall logo won’t fit, so you have three options:
- Crop to a square element. If your logo has an icon, monogram, or brand mark, use just that. A coffee shop with a wordmark and a cup symbol uses the cup.
- Add padding. Centre the logo on a square canvas and pad it out with a solid background or transparency.
- Design a square variant. For brands with no square element, make a dedicated favicon mark — a single letter, a simplified glyph — built to live at icon size.
Step 2: Simplify for 16px legibility
Your favicon will often render at 16×16 pixels — smaller than this text. At that size, fine detail, thin lines, gradients, and small text all collapse into noise. The mistake almost everyone makes is shrinking the full logo and hoping it holds up. It won’t.
Design for the smallest size, not the largest:
- One bold mark. A single shape or symbol, not a busy composition.
- Strong contrast. The mark should pop against both light and dark tab backgrounds.
- Few colours. Two or three flat colours read far better than a gradient at 16px.
- No (or barely any) text. One or two bold characters at most; a tagline is invisible.
Think of the favicon as the smallest possible expression of your brand — a glyph, not a billboard. Our favicon design best practices guide goes deeper on building a mark that survives at icon size.
A quick test: shrink your draft to 16×16 and view it at actual size, not zoomed. If you can’t tell what it is in half a second, simplify further.
Step 3: Why SVG-first matters
If your logo is vector, keep it vector for as long as possible. An SVG favicon is the modern primary icon for three reasons:
- It scales without loss. One file is crisp at 16px and at 512px — no separate exports per size.
- It supports dark mode. You can embed a
@media (prefers-color-scheme: dark)rule inside the SVG so the icon recolours itself in dark browser themes. - Modern browsers prefer it. Chrome, Edge, and Firefox use the SVG when it’s present. Safari has only partial support and falls back to the ICO or PNG — so SVG-first does not mean SVG-only. You still ship the
.icoas the fallback.
Even when you start from a PNG, the export step still produces the rest of the set; the SVG advantage is just that vector sources give the cleanest results everywhere.
Step 4: Export the full verified set
Here’s where the manual route gets painful and a generator earns its place. The modern favicon set — generated from one 512×512 source — is six files:
| File | Size | Purpose |
|---|---|---|
favicon.ico | 16, 32, 48 bundled (min 32×32) | Legacy browsers, desktop tabs, Google’s search-result fallback |
favicon.svg | Scalable (has a viewBox) | Primary modern icon — sharp everywhere, supports dark mode |
apple-touch-icon.png | 180×180 | iOS home screen — opaque, ~20px padding |
icon-192.png | 192×192 | Android home screen / PWA (purpose any) |
icon-512.png | 512×512 | PWA install + splash (purpose any) |
icon-512-maskable.png | 512×512 | Android adaptive icon (purpose maskable, 409×409 safe zone) |
Two of these have rules that trip people up:
- The Apple touch icon must be opaque. iOS composites it onto the home screen and applies its own rounded corners. A transparent background turns black. Fill it with a solid colour and leave ~20px of padding so nothing gets clipped.
- The maskable icon needs its own padded artwork. Android crops icons into a circle, squircle, or rounded square, so the important art must sit inside a central 409×409 safe zone. Don’t reuse the plain 512 and don’t mark one icon
"purpose": "any maskable"— they should be two separate files.
Doing all six by hand means resizing, naming, flattening the Apple icon, padding the maskable, and bundling the ICO correctly — a dozen ways to ship the wrong thing. This is the step worth automating.
Generate the whole set with FaviconBuilder — upload your logo (SVG preferred, or a PNG/JPG at 512×512 or larger) and it produces every file above, a site.webmanifest, a ZIP, and the exact copy-paste HTML. It’s free, needs no account, and your image never leaves your browser — the conversion runs entirely on your machine.
If you’d rather understand the raster conversion itself, the PNG to ICO guide covers how the multi-size .ico is built, and the favicon sizes guide has the full chart and the reasoning behind each dimension.
Step 5: Add the HTML and test
Drop the files in your site root (or /public), then paste this into your <head>. Note there’s no rel="shortcut icon" — that was never a valid relation — and no long list of per-size tags:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The .ico covers legacy browsers and Google’s SERP fallback, the SVG is the sharp modern icon, the Apple touch icon handles iOS, and the manifest carries the PWA sizes. For a tag-by-tag walkthrough and where exactly each file goes, see how to add a favicon in HTML.
Then verify it. Load the page, open it in a fresh tab, and check the icon renders. Browsers cache favicons aggressively, so a hard refresh or an incognito window is the reliable way to see your new icon rather than the old cached one.
Summary
Creating a favicon from a logo is five steps:
- Pick a clean source — SVG if you have it, otherwise a PNG/JPG at 512×512 or larger.
- Make it square — crop to a mark, pad to a square, or design a dedicated variant.
- Simplify for 16px — one bold mark, strong contrast, few colours, little or no text.
- Export the full set — multi-size
.ico, scalable SVG, opaque 180×180 Apple icon, and 192/512 plus a padded maskable for PWAs. - Paste the HTML and test — four
<link>tags, then check in a fresh tab.
You can grind through steps 4 and 5 by hand, but a generator does the whole verified set from one upload — including the parts most tools still get wrong.
Continue reading:
Frequently asked questions
How do I turn my logo into a favicon?
Start from a square version of your logo at 512×512 or larger (SVG is ideal), simplify it so one bold mark reads clearly at 16px, then export the full set — a multi-size favicon.ico, a scalable favicon.svg, a 180×180 apple-touch-icon.png, and 192/512 PWA icons. Upload that source to a generator like FaviconBuilder and it produces every file plus the HTML to paste.
What size should my source image be to make a favicon?
At least 512×512 pixels. That's the largest size any browser or PWA surface requests, so a 512×512 source covers every output without upscaling. A vector SVG is even better because it scales to any size with no quality loss.
Can I make a favicon from a rectangular or wide logo?
Not directly — favicons are square. Either crop to a square element of the logo (often just the icon or monogram, not the wordmark), or centre the logo on a square canvas with padding. A wide wordmark shrunk into a square turns to mush at 16px.
Can I use a JPG or photo as a favicon?
You can, but a 512×512 PNG or SVG gives a much cleaner result. JPGs have no transparency and lossy compression artefacts, and photos carry far too much detail to read at 16×16. Simplify a photo down to one recognisable shape or mark first.
Do I need to export every favicon size by hand?
No. The old practice of hand-exporting 16/32/48/96/120/152 PNGs is outdated — a multi-size favicon.ico bundles the small sizes and an SVG scales to the rest. A generator outputs the whole verified set from one upload, so you export once, not a dozen times.