Tooltrusty

Favicon Generator

One image in, every size a browser or phone asks for out — with the markup to match.

Drop an image here or click to choose a file — a square image, ideally 512×512 or larger

Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

What the favicon Generator does

A favicon is no longer one file. Browsers want 16 and 32 pixel versions for tabs and bookmarks, Windows uses 48 and 96 for shortcuts and tiles, iOS asks for a 180-pixel apple-touch-icon when a site is added to the home screen, and Android and progressive web apps want 192 and 512. This tool generates all seven from a single image and gives you the markup to link them.

Each size is rendered separately from your original source rather than by downscaling one output, which keeps the small sizes as sharp as the source allows. The image is centre-cropped to a square, so a non-square source will lose its edges — feed it a square image if the composition matters.

Three options change the result. Padding insets the artwork inside the square, which matters more than it sounds: a detailed logo that touches the edges turns into an unreadable smudge at 16 pixels, and 8–12% padding often makes it legible. Corner radius rounds the icon; leave it at zero for browser favicons, since platforms apply their own masking, and raise it only if you specifically want a rounded asset. Background fills behind a transparent logo — useful because a dark logo on a transparent background disappears against a dark browser tab.

The most important design decision is not in the tool at all: a favicon is a 16-pixel square, so detail is your enemy. A single letter, a simple mark or a bold silhouette reads; a full logotype with a tagline does not.

How to use it

  1. Drop in a square image, ideally 512×512 pixels or larger so the big sizes stay sharp.
  2. Add a little padding if your artwork runs to the edges, and set a background colour if the logo is transparent and dark.
  3. Check the 16-pixel preview specifically — if it is unreadable there, simplify the artwork rather than the settings.
  4. Press Download all sizes, put the files in your site root, and paste the HTML into your <head>.

A worked example

Starting from a 1024 × 1024 logo with a transparent background and a dark mark:

  1. Untick Keep transparency and set the background to your brand's light colour, so the dark mark does not vanish in a dark-themed browser tab.
  2. Set padding to 10%. At 16 pixels that is roughly 1.6 pixels of breathing room, which is the difference between a readable mark and a blur.
  3. Leave the corner radius at 0 — iOS and Android apply their own mask shapes, and a pre-rounded icon ends up double-rounded.
  4. Download all seven files and place them in your site root.

The generated markup then references them:

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

Frequently asked questions

Do I still need a favicon.ico file?

Rarely. Every browser in current use accepts PNG favicons via <link rel="icon">. An .ico file in the site root is only needed for very old Internet Explorer versions, and as a fallback for requests to /favicon.ico made before your HTML loads.

Why does the tool download files one at a time?

Because building a ZIP would mean pulling in a compression library, and this site's rule is that pages load only the code they need. The downloads are staggered slightly so browsers do not treat them as a popup flood; you may be asked to allow multiple downloads once.

What size should my source image be?

At least 512 × 512, square, with the artwork centred. Anything smaller will look soft at the 512-pixel size that Android and PWAs use for splash screens.

My favicon has not changed in the browser. Why?

Favicons are cached aggressively. Do a hard refresh, or open the icon file's URL directly to confirm the new file is being served. It can take a while for a browser to give up its cached copy.