Favicon generator

Turn a logo into every icon a browser asks for โ€” including a real favicon.ico, which most generators skip.

Free ยท No sign-up ยท Your file never leaves your computer

Choose a logoor drop it anywhere in this box โ€” square, simple, high contrast

Put these in your <head>

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

favicon.ico goes at the site root even though it is listed here โ€” browsers ask for it there regardless.

How to use it

  1. 1

    Choose a square image with a simple, high-contrast shape.

  2. 2

    Generate. You get favicon.ico plus six PNG sizes.

  3. 3

    Put them at the root of your site and add the link tags below.

When you would use this

A favicon is one image that has to work at sizes ranging from a browser tab to an Android splash screen, which is why there is never just one file.

favicon.ico still matters, and it is the one most tools omit. Browsers request /favicon.ico from the root of a site out of habit, whether or not your HTML links to anything. If it is not there, that is a 404 on every page load โ€” harmless but noisy, and it shows up in every log and every audit. The .ico produced here contains the 16, 32 and 48 pixel versions in one file, which is what Windows and the tab bar want.

Design for sixteen pixels, not for the logo. This is the mistake almost everyone makes. Whatever you upload will eventually be drawn at roughly the size of a full stop, and detail that looks crisp at 512 turns to mud. A full wordmark becomes an illegible smear. A single letter, a monogram or one strong symbol survives. If your logo has fine strokes or thin type, make a simplified version for this purpose rather than shrinking the real one.

Transparency is preserved throughout. That matters more than it used to: browsers have dark themes now, and an icon flattened onto white shows as a bright square in a dark tab strip.

Non-square images are centre-cropped to a square rather than squashed โ€” a stretched icon looks wrong in a way people notice without being able to say why. If the important part of your logo is off-centre, crop it yourself first.

Questions

Do I still need favicon.ico?
Yes. Browsers request /favicon.ico from the site root whether or not your HTML links to one, so a missing file is a 404 on every page load. Put it at the root and the requests stop.
Why so many PNG sizes?
Different places ask for different ones โ€” a browser tab, a Windows taskbar, an iOS home screen, an Android install prompt. Ship them all; they are tiny.
What image should I start from?
A square one, with a simple shape and strong contrast. Whatever you upload will be seen at 16 pixels โ€” roughly the size of this full stop. A wordmark becomes an illegible smudge; a single letter or a symbol survives.
Will transparency be kept?
Yes. The PNGs and the ICO keep an alpha channel, so a transparent logo stays transparent against a dark browser theme instead of sitting on a white square.
Is my image uploaded?
No. Every size and the ICO container are produced in your browser and nothing is sent anywhere.

Related tools

Branding that has to be applied everywhere, by hand

Ofivio holds your mark and your letterhead once and applies them to every document the firm issues, so consistency is a setting rather than a discipline.

See Ofivio