Skip to the tool
OnPageKit

Favicon Generator

Every favicon file a site needs, built in your browser.

Source
home screen label
browser UI tint

Choose an image to generate the icon set.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#059669">
{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#059669",
  "background_color": "#059669",
  "display": "standalone"
}

Everything runs in your browser. Nothing you type is sent to a server.

Found a bug in this tool? Report it.

Share this tool

Every favicon file, from one image

This favicon generator turns one image — or a letter on a coloured square — into the full set of icon files a modern site needs, together with the site.webmanifest and the lines for your <head>. The drawing, the ICO container and the optional ZIP are all produced inside your browser, so your logo never leaves your computer.

How to use it

  1. Drop a square image, ideally 512×512 or larger, or switch to Letter on a colour.
  2. For non-square images, choose between fitting the whole picture with a margin and cropping the centre.
  3. Fill in the site name, short name and theme colour for the manifest.
  4. Download each file, or everything at once as a ZIP, and place the files at the root of your site.
  5. Paste the HTML snippet into the <head> of every page.

The five files and why each exists

favicon.ico carries three images: 16 pixels for browser tabs, 32 for high-density tabs and the taskbar, and 48 for Windows shortcuts. Browsers request it from the site root even when no tag points to it, which is why a missing one fills server logs with 404s.

apple-touch-icon.png is the apple touch icon size iOS expects: 180×180. It is what appears when someone adds your page to a home screen. iOS rounds the corners itself and fills any transparency with black, so give it a solid background — untick Transparent background before downloading if your logo has see-through areas.

icon-192.png and icon-512.png are the site.webmanifest icons. Android uses them for the home screen and the splash screen of an installed web app, and Chrome will not consider a site installable without both sizes declared.

site.webmanifest is a small JSON file naming the site, pointing to those two icons and setting the theme and background colours used around the app. The theme colour also tints the browser toolbar on Android.

Inside the .ico file

The ICO format is older than the web but simple: a six-byte header saying "this is an icon, with N images", then a sixteen-byte directory entry for each image recording its width, height, colour depth, byte length and where its data starts, then the image data itself. Since Windows Vista the image data can be a complete PNG, which is what this favicon.ico generator writes. The result is small, sharp at each size, and readable by every browser in use today.

Designing for 16 pixels

A detailed logo turns to mush at 16×16. The icons that work are bold and simple: one letter, a single shape, strong contrast. If your full logo does not survive the smallest preview above, use the letter mode, or crop your mark to its most recognisable part. Check the result on both a light and a dark browser theme; a transparent icon with dark lines can disappear on a dark tab bar.

Favicons are one part of how a page presents itself outside your site. The meta tag generator covers the title and description, and the open graph generator sets the image shown when the page is shared.

Frequently asked questions

Which favicon sizes do I actually need?

Five files cover every current browser and device: a favicon.ico holding 16, 32 and 48 pixel images for tabs, bookmarks and Windows shortcuts; a 180×180 apple-touch-icon.png for iPhone and iPad home screens; and 192×192 and 512×512 PNGs declared in site.webmanifest for Android and installed web apps. The long lists of 20 or more sizes some generators produce are left over from older platforms.

What is the apple touch icon size?

180×180 pixels. iOS scales it down for older devices, so one file is enough. Give it an opaque background, because iOS fills transparent areas with black, and do not round the corners yourself — the system applies its own mask.

Is favicon.ico still needed if I have PNG icons?

Yes, keep it. Browsers and many feed readers, crawlers and link-preview bots still request /favicon.ico from the root without reading your HTML, and Google Search can fall back to it. A .ico with PNG images inside is small, supported everywhere, and ends those 404s in your logs.

How does this favicon.ico generator build the file?

It draws your icon at 16, 32 and 48 pixels on a canvas, encodes each as PNG, and writes them into an ICO container: a six-byte header, a sixteen-byte directory entry per image, then the PNG data. PNG-in-ICO has been part of the format since Windows Vista and every browser reads it.

Where do the icons in site.webmanifest come from?

From the icons array, which lists each file with its sizes and type. Chrome needs a 192 pixel and a 512 pixel icon to offer installation and to draw the splash screen, and those are the two this tool writes and declares. Link the manifest from every page with a rel=manifest tag.

Is my image uploaded?

No. The image is decoded and redrawn inside this tab, the ICO and ZIP files are assembled by code running on this page, and nothing is sent to a server at any point.

Related tools

Updated