Free favicon generator
A favicon generator with 256 pixels to be recognisable in.
A 16 × 16 favicon is the smallest brand surface you own and the one people see most often. Start from an image, an SVG, a logo or a prompt; render every size the browser asks for from the same geometry; paste in the six lines of head markup below.
Free · six PNGs, an SVG icon and a manifest in one ZIP · head markup included
relative scale
- 16px
- 32px
- 48px
- 180px (scaled)
Four starting points
Make a favicon from whatever you already have.
All four routes converge on the same thing: vector geometry the whole size ladder can be rendered from, rather than one bitmap shrunk six times.
From a prompt
Describe the mark — a folded envelope, a mountain monogram, a single bold letterform — and generate vector artwork built for this size rather than shrunk down to it.
Text to SVGFrom a logo you already have
Vectorise the mark-only variant, not the full lockup. A wordmark that works on a letterhead is 256 pixels of grey mush in a tab.
Logo to SVGFrom a PNG or JPG
Convert it first so the ladder is rendered from shapes. Resampling one bitmap down to 16 px is how favicons end up illegible.
PNG to SVGFrom an SVG
The shortest path. Bring the file in, check it at 16 px, tidy the geometry if it was drawn for a larger canvas, and package it.
Open the editor
Four steps
How to make a favicon.
The job is not finished when the ZIP downloads. Step four is the one that decides whether anyone ever sees the icon.
- 01
Bring or make the mark
Upload an SVG, vectorise a logo or PNG you already have, or describe the mark you want and generate one. Whatever the route, the goal is geometry rather than a bitmap.
- 02
Crop to the smallest size
Preview it at 16 px before anything else. If it does not read there it will not read anywhere, and every other file in the set is rendered from the same artwork.
- 03
Download the pack
One ZIP with the six PNGs, the SVG icon and a site manifest — every file named the way the markup below expects to find it.
- 04
Drop it in and paste the markup
Unzip into the root of your site, paste the head block into your layout, and check a hard-refreshed tab in both a light and a dark browser theme.
The set
What size should a favicon be? Six files, and who asks for each.
| Size | Filename | Who requests it |
|---|---|---|
| 16px | favicon-16x16.png | Browser tab, bookmarks bar, history list on a standard-density display. |
| 32px | favicon-32x32.png | The same places on a retina display. The size most people actually see. |
| 48px | favicon-48x48.png | Windows site shortcuts and some desktop browser UI. |
| 180px | apple-touch-icon.png | iOS home screen when someone adds your site. No transparency, no rounded corners. |
| 192px | android-chrome-192x192.png | Android home screen shortcut and the manifest's baseline installable icon. |
| 512px | android-chrome-512x512.png | Splash screen and the install prompt. Required for a site to be installable. |
Wiring it up
Two snippets. Paste and done.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml"
href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32"
href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180"
href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">{
"name": "Your Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png",
"sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png",
"sizes": "512x512", "type": "image/png",
"purpose": "any maskable" }
],
"theme_color": "#141210",
"background_color": "#FBF7F0",
"display": "standalone"
}On Next.js you can skip most of this: put icon.svg, apple-icon.png and manifest.json in the app directory and the framework emits the tags for you.
Designing it
Four checks before you ship.
Design for 16 pixels first
That is 256 pixels in total. A wordmark is unreadable; a detailed illustration becomes a smudge. One bold shape with one or two colours is the entire brief.
Do not reuse the full lockup
Use the mark-only variant of your logo. If your logo has no mark, use a single letterform set large and cropped tight.
Give the touch icon a background
iOS composites the Apple touch icon onto an opaque tile. Ship it filled, and let the OS apply its own corner radius.
Check it against both themes
Browser chrome is dark for a lot of people. A dark navy mark disappears into a dark tab strip — an SVG favicon can carry a media query to handle it.
Questions
Favicons, answered.
- Is the favicon generator free?
- Yes. Packaging costs no credits — those exist only for generating new artwork. Nothing in the ZIP is watermarked and there is no limit on how many sets you build.
- What size should a favicon be?
- There is no single answer, which is the whole problem. Browsers want 16 and 32 px, Windows shortcuts want 48, iOS wants a 180 px touch icon, and an installable web app needs 192 and 512. Ship the ladder rather than picking one — the set below is exactly those six.
- Can I make a favicon from a PNG or JPG?
- Yes, though it is worth one extra step. Run the image through the vectoriser first and the whole ladder is rendered from geometry instead of resampled from a bitmap — which is the difference between a legible 16 px icon and a grey smudge.
- Can I make a favicon from text or a single letter?
- Yes. Set a letterform, crop it tight, and treat the counter shapes as part of the design. At 16 px a well-chosen letter reads better than most logos do.
- Can I just use an SVG favicon?
- Modern browsers accept <link rel="icon" type="image/svg+xml" href="/icon.svg">, and it is the sharpest option at every density. Still ship the PNG ladder alongside it: Safari's home screen icon and older browsers do not use the SVG.
- Do I still need favicon.ico?
- Only for genuinely old browsers, and this generator does not produce one — the pack is PNG plus SVG. Everything current reads the PNG links. Some crawlers and feed readers still probe /favicon.ico, so if you want that base covered, convert the 48 px PNG with any ICO tool and drop it in the root.
- Where do the files go on my site?
- The root of the domain, next to index.html, unless you change the href paths to match. Then paste the head markup below into every page — or into the layout or template that produces them.
- How do I add a favicon in WordPress?
- The built-in route is Appearance, then Customise, then Site Identity, where the Site Icon field takes a single square PNG and generates its own sizes. If you want the full ladder and the manifest, upload the ZIP contents to the site root and add the head markup through your theme or a header-snippet plugin instead.
- Why is my favicon not updating?
- Favicons are cached aggressively — often past a normal hard refresh. Add a query string to the href, or load the icon URL directly in a tab, before concluding something is broken.
- What size should the source be?
- Use vector. Every PNG in the set is rendered from the same geometry rather than resampled from one bitmap, which is exactly why the 16px file stays legible.
- Does an SVG favicon support dark mode?
- Yes. A prefers-color-scheme media query inside the SVG itself lets the icon repaint for a dark browser chrome. That only works for the SVG link; the PNGs are fixed.