Favicon generator

Drop in a logo and get favicon.ico plus the PNG sizes browsers, iOS and Android each want, with the markup to paste into your head. Built in this tab, so an unreleased logo stays unreleased.

Favicon makerEvery icon size a site needs.It runs inside this tab, so nothing you add is uploaded.
Next?Resize imageConvert formatColour palette
Your file never leaves this device. How that works

How to make a favicon from an image

STEP 1

Add your logo

Square works best, at least 512 pixels. PNG with transparency is ideal.

STEP 2

Choose a background

Keep it transparent, or put it on white or black if your mark needs a solid backing.

STEP 3

Save the set

Download each file into your site root, then paste the three lines of HTML into your head.

What you actually need, and what you do not

Guides exist that list twenty favicon files and a web manifest. Almost none of it is necessary now. A .ico containing 16, 32 and 48 pixel versions, a 180 pixel apple-touch-icon, and 192 and 512 pixel PNGs cover every browser and both mobile platforms.

The .ico still matters, because browsers look for /favicon.ico whether you asked them to or not, and a missing one means a 404 in your logs on every first visit. The file produced here holds PNG data inside the .ico container, which every current browser and modern Windows accept.

Detail is what fails at small sizes. A logo with a wordmark becomes an unreadable smudge at 16 pixels, so use the mark on its own. Test at actual size rather than zoomed in, because a favicon is only ever seen tiny.

Nothing here is uploaded. That matters more than it sounds for this particular tool, since the logo you are converting is frequently for a product that has not launched yet.

Questions

Is my file uploaded anywhere?

No. The work happens inside this tab, on your own machine. Open your browser's network tab while you use the tool, there is no request carrying your file.

Is there a file size limit?

Practical limits depend on the tool, browser and available device memory. Large files can fail even when no explicit limit is shown. Keep an original and use a smaller job if this device cannot finish it.

Do I need an account?

No, and there is no daily limit either. There is nothing to sign up for.

Do I still need favicon.ico?

Yes. Browsers request /favicon.ico regardless of what your HTML says, so having one avoids a 404 on every first visit.

What size should my source image be?

Square and at least 512 pixels. Larger is fine, it gets scaled down.

Where do the files go?

In the root of your site, next to index.html, unless you change the paths in the HTML snippet.

Exactly what you get

A favicon.ico containing 16, 32 and 48 pixel images, separate PNG files at 16, 32 and 48, an Apple touch icon at 180 pixels, and Android icons at 192 and 512 pixels. A snippet of the three lines of HTML to paste into your page head is shown with them, along with proofs at the real sizes.

You can keep the background transparent or fill it with white or black. A transparent icon works on any browser tab colour, while a filled one is safer for the Apple icon, which is shown on a coloured tile.

Using the files

Put the files in the root of your site and paste the lines into your head. Browsers ask for favicon.ico by that name whether or not you mention it, so having one avoids a missing file in your logs.

Start with a square image of at least 512 pixels. A picture that is not square is cropped from the middle to fill the square. The tool does not make an SVG icon or a web manifest, so if you want one, write it by hand. Check the proofs at actual size, because detail that looks fine large can disappear at 16 pixels.

Next, you might want to

Resize imageExact pixels or size presetsConvert formatJPG, PNG and WebP, both directionsColour palettePull the colours out of a pictureCrop & rotateQuarter turns, flips and ratio crops