Favicon Generator: One Image, the Whole Icon Set

Create a favicon from a PNG or SVG — every size a browser asks for, plus the manifest and the HTML to paste into your head.

Every icon is cut in your browser — the image is never uploaded

Drop your logo here, or click to choose PNG or SVG works best · 512 × 512 or larger · ICO accepted too
Reading the image…

Create a Favicon From One Image

A site icon is not one file any more. Browsers want a 16 and a 32, Android's manifest wants a 192 and a 512, iOS wants a 180 with no transparency, and the old favicon.ico is still the fallback that everything understands. Doing this by hand means exporting six or seven files at exact sizes and then writing the markup that points at them, which is why people look for a tool instead of doing it in an image editor.

Your image never leaves your computer: it is decoded and every size is cut by your own browser. You get the whole set, an archive, the site.webmanifest, and the block of HTML to paste into your head — with each file also downloadable on its own, because half the time you only want one of them.

However you searched for it — to make a favicon, to build a favicon, or simply favicon create — this is the same job. A favicon maker, a favicon builder, a favicon gen, or a faviconmaker written as one word all point here. So does a site icon generator: some people call the thing in the tab a site icon, some a favorite icon, which is what the word favicon is short for. A favorite icon generator and a favorite icon maker are the same tool under an older name, and someone setting out to create favorite icon files for a site is asking for exactly this set. If your goal is to create a favicon ico specifically, that file is the first one in the set, which also makes this a favicon ico maker and an online ico generator.

Fit or Crop: What Happens to a Logo That Is Not Square

Icons are square and logos usually are not, so something has to give. The choice appears only when it matters — a square source needs no decision — and it defaults to Fit, which keeps the whole mark and leaves padding at the sides.

That default is the opposite of the one in our image resizer, and deliberately so. People arrive at a resizer with photographs, where trimming the edges of a landscape costs nothing. People arrive here with a logo, and a logo with its edges cut off stops being recognizable — which defeats the entire purpose of an icon. Crop to center is there for the cases where the source already has generous margins built in.

Source Image

Start from at least 512 × 512, or from an SVG, which is rasterized at a large size before any cutting happens. Anything smaller has to be enlarged for the 512 the manifest asks for, and an enlarged logo looks soft on exactly the screen that shows it biggest. A warning appears when the source is too small or not square.

Detail is the other thing to watch. At 16 × 16 you have 256 pixels to work with: a wordmark becomes an unreadable smear, and the icons that survive are a single letter, a simple shape, or a bold monogram. If your logo has fine lines, consider feeding this a simplified version rather than the full lockup.

PNG to ICO

The favicon.ico in the set is a genuine ICO container holding three PNG images — 16, 32 and 48 pixels — which is how modern icon files are built. So although this page is a favicon generator, it does the png to ico job as a matter of course: drop a PNG in and the first file in the list is your ICO.

That covers the many ways people ask for it. To convert png to ico file or convert png to ico format, to turn png into ico, turn png to ico, turn png into icon, or change png to ico: same two steps. A png to ico converter, an online png to ico converter, a free online png to ico converter, or a png to icon file converter — all describe what happens the moment you drop a file above. If what you need is a png to ico file in png to ico format and nothing else, download that one file and ignore the rest of the set; you do not have to take the archive. And when someone says convert png file to ico or convert png file to icon, they mean this, whatever the wording.

A png favicon is worth a word of its own. Every browser in current use reads PNG icons happily, and the <link rel="icon" type="image/png"> tags in the snippet above are what they will actually pick up. The ICO is kept because it is what a browser requests from /favicon.ico when it finds no tags at all — a bookmark, a feed reader, an old crawler — and it costs a few kilobytes to keep that path working.

The reverse direction, ico to png, is a different operation: an ICO is a container of several images, so extracting one means choosing a size. This page accepts an ICO as its source, so you can drop one in and download whichever size you want as a PNG.

What Goes Where

Put every file in the root of your site, next to index.html, and paste the snippet into your <head>. The paths in it are absolute, which is what you want: an icon referenced relatively breaks the moment a page moves into a subdirectory.

The Extended set adds a few more, each one named in the snippet or the manifest so it is actually picked up:

Browsers cache icons aggressively and ignore normal cache headers while doing it. After replacing one, expect to hard-reload, or to see the old icon for a day.

Questions