Image & MediaClient-Side Private

Favicon Generator from Image

Generate favicons at 16px through 512px from a single logo, including the 180px Apple touch icon, packaged as a ZIP with a ready-to-paste HTML snippet and web manifest.

Upload a square logo to generate favicons

A square PNG or SVG of at least 512×512 gives the best result.

A favicon is the small icon in a browser tab, a bookmark list, and a phone home screen — and modern platforms request it at a surprising number of sizes. Rather than exporting each one by hand, this generator renders your logo at every size browsers actually ask for and packages them as a ZIP with a ready-to-paste HTML snippet. Everything is drawn on a canvas in your browser.

How to generate a favicon

  1. Upload a square logo. At least 512×512 gives the best result at every output size.
  2. Choose a background — transparent for PNG-style logos, or a solid colour if your mark needs one behind it.
  3. Review the previews. Pay particular attention to 16px, which is what most people actually see.
  4. Download the ZIP and drop the files at the root of your site, then paste the snippet from README.txt into your <head>.

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

When to use this tool

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.

Things worth knowing

  • 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.