Skip to content
TabBench

Favicon Generator

Turn a logo, letter or emoji into a complete favicon set: favicon.ico, Apple touch icon, manifest icons and a maskable Android icon.

Runs in your browser. Nothing you add is uploaded.

What the Favicon Generator does

A favicon is the small icon in a browser tab, a bookmark list, a search result and a phone home screen. Current best practice needs only a handful of files: a favicon.ico for browsers and search engines, an SVG if your logo is one, a 180px Apple touch icon on a solid background (iOS shows transparent areas as black), and 192px and 512px icons plus a padded maskable icon for Android's web app manifest. This generator makes all of them from your logo, or from a letter or emoji if you don't have one, previews them in a browser tab, on an iPhone home screen and in Android's round crop, and packages everything with the manifest and the HTML to paste. It all happens in your browser.

How to generate a favicon

  1. Upload your logo — an SVG or a square PNG of at least 512×512 is best — or switch to text and type a letter or emoji.
  2. Choose a background, shape and padding. Check the 16px tab preview: it's the size most people actually see.
  3. Look at the iPhone and Android previews; those icons always get a solid background and extra padding so nothing is cut off.
  4. Download the ZIP, put the files at the root of your site so /favicon.ico works, and paste the tags into your page's <head>.

The Favicon Generator runs entirely in your browser — nothing you enter is uploaded, stored, or logged.

When to use it

Launching a new site

A missing favicon leaves a blank page icon in the tab, which reads as unfinished. It is a five-minute job that noticeably affects how polished a site feels.

Supporting phone home screens

The 180px Apple touch icon is what appears when someone adds your site to an iPhone home screen. Without it, iOS renders a screenshot of the page instead.

Refreshing icons after a rebrand

New logo, new icon set. Regenerating every size from the new mark takes seconds and keeps the sizes consistent.

Good to know

  • Simple, high-contrast marks survive being shown at 16 pixels. Detailed logos with fine text turn to mush — consider a simplified variant for the icon.
  • Non-square sources are fitted inside the square and centred rather than stretched, so a wide logo leaves space at top and bottom.
  • Transparent backgrounds adapt to light and dark browser themes; a solid background will not.
  • Browsers cache favicons aggressively. A hard refresh, or a fresh profile, is often needed to see a change.

Frequently asked questions

What source image works best?

A square image of at least 512x512. Simple, high-contrast marks stay legible at 16px; detailed logos do not.

Which favicon sizes do I actually need?

16 and 32 cover browser tabs and bookmarks, 180 is the Apple touch icon for iOS home screens, and 192 and 512 are used by Android and the web app manifest. The remaining sizes cover older platforms and high-density displays. The ZIP includes all of them, so you can drop in the full set and stop thinking about it.

Do I need an .ico file?

Not any more for practical purposes. Every current browser accepts PNG favicons, which is why this generator produces PNGs. A multi-resolution .ico is only worth pursuing if you must support very old versions of Internet Explorer.

Why does my logo look unreadable at 16px?

Because 16×16 is 256 pixels in total — far too few for fine detail or text. Icons that work at that size are simple bold shapes, typically a single letter or symbol. Most brands use a simplified mark for the favicon rather than the full logo.

How do I install the favicons?

Copy the PNGs to the root of your site, then add the link tags from the included README.txt to your page head. The ZIP also contains a site.webmanifest referencing the 192 and 512 icons for Android and installable web apps.

Is my logo uploaded anywhere?

No. Every size is rendered on a canvas in your browser and zipped locally, so unreleased branding never leaves your machine.

Related tools

  • Crop Image

    Crop to 1:1, 16:9, 9:16 or any custom size.

  • QR Code Scanner

    Read a QR code from your camera, an image or a screenshot.

  • Barcode Generator

    Create EAN, UPC, Code 128 and other barcodes for print or web.

  • Barcode Scanner

    Scan product and shipping barcodes with your camera or an image.