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.

Can I make a favicon from a PNG or JPG?

Yes, in two steps. Icon Studio packages an SVG, so turn the image into one first: the image-to-SVG tool redraws it as vector (an interpretation, not a trace), or redraw it yourself. The whole ladder is then rendered from geometry instead of resampled from a bitmap — 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 , and it is the sharpest option at every density. This generator does not write that file — the ZIP is PNG only — so make it by hand; the dark mode favicon guide in our journal shows one. Still ship the PNG ladder alongside it: the iOS 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 only. 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 PNGs arrive in a web_favicons folder inside the ZIP. Move them to 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, upload the PNGs from the ZIP 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?

Partly. A prefers-color-scheme media query inside the SVG lets the icon repaint for a dark theme in Chrome, Edge and Firefox. Safari displays SVG favicons from version 26 but ignores the dark rule, and the PNGs are fixed. This generator's ZIP is PNG only, so the SVG is a file you write yourself.

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 SVG — your own, or one made from a logo, an image or a prompt; render every size the browser asks for from the same geometry; paste in the head markup below.

Free · six PNGs in one ZIP, built in your browser · head markup included

Build a favicon set I need a mark first

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 an SVG in the dashboard. Download it, then upload it here to package the sizes.
Text to SVG
From a logo you already have
Start from the mark-only variant as SVG, not the full lockup. A wordmark that works on a letterhead is 256 pixels of grey mush in a tab.
Logo to SVG
From a PNG or JPG
Redraw it as SVG first so the ladder is rendered from shapes. Resampling one bitmap down to 16 px is how favicons end up illegible.
PNG to SVG
From 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
Icon Studio starts from an SVG or one of its built-in library icons. If you have a logo, a PNG or just an idea, make an SVG of it first — redraw it, or generate one from a prompt — then upload that.
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, built in your browser, with the six PNGs in a web_favicons folder, each named the way the markup below expects. There is no SVG icon, .ico or manifest file in it; the manifest below is yours to save.
04
Drop it in and paste the markup
Move the PNGs 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.

Favicon sizes and their consumers
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, save, done.

index.html · <head>

<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">

<!-- Optional, and not in the ZIP: an SVG
     favicon you write yourself. Declared
     last so browsers that read SVG prefer it. -->
<link rel="icon" type="image/svg+xml"
      href="/icon.svg">

site.webmanifest · save this yourself

{
  "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" }
  ],
  "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, in two steps. Icon Studio packages an SVG, so turn the image into one first: the image-to-SVG tool redraws it as vector (an interpretation, not a trace), or redraw it yourself. The whole ladder is then rendered from geometry instead of resampled from a bitmap — 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. This generator does not write that file — the ZIP is PNG only — so make it by hand; the dark mode favicon guide in our journal shows one. Still ship the PNG ladder alongside it: the iOS 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 only. 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 PNGs arrive in a web_favicons folder inside the ZIP. Move them to 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, upload the PNGs from the ZIP 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?: Partly. A prefers-color-scheme media query inside the SVG lets the icon repaint for a dark theme in Chrome, Edge and Firefox. Safari displays SVG favicons from version 26 but ignores the dark rule, and the PNGs are fixed. This generator's ZIP is PNG only, so the SVG is a file you write yourself.

Get the whole set in one download.

Build a favicon set

A favicon generator with 256 pixels to be recognisable in.

Make a favicon from whatever you already have.

From a prompt

From a logo you already have

From a PNG or JPG

From an SVG

How to make a favicon.

Bring or make the mark

Crop to the smallest size

Download the pack

Drop it in and paste the markup