Favicon generator

Generate a complete favicon package — .ico and PNG icons, Apple touch icon, Android icons, web manifest and the HTML to paste — right in your browser, no upload.

How to generate a favicon

  1. Drop or pick a PNG, JPG or WebP image (a square logo works best).
  2. Generate the package — favicon.ico, the PNG icons, the Apple touch icon and Android icons, and the web manifest.
  3. Download the ZIP, drop the files into your site's root, and paste the HTML snippet into your <head>.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Why generate a favicon package?

A favicon isn't a single file any more: browsers want an .ico and PNGs, iOS wants an apple-touch-icon, and Android wants larger icons plus a web manifest. OptImg renders all of them from one image with a high-quality resampling filter, packs them into a ready-to-ship ZIP, and gives you the exact HTML to paste — all on your device, with nothing uploaded (unlike the popular online generators, which upload your logo to their servers).

Frequently asked questions

Is my image uploaded to a server?
No. Every icon is rendered and packaged entirely in your browser: your logo never leaves your device. Most favicon generators upload your image; this one doesn't.
What's in the package?
favicon.ico (16/32/48px), favicon.svg, favicon-16x16.png and favicon-32x32.png, apple-touch-icon.png (180px), android-chrome-192x192.png and android-chrome-512x512.png, and a site.webmanifest — plus the exact HTML snippet to paste. Add a dark icon and every file also gets a matching dark version.
Where do I put the files?
Drop every file into your site's root directory (so they resolve at /favicon.ico, /apple-touch-icon.png, and so on) and paste the provided HTML into the <head> of your pages.
What image should I use?
A square PNG at 512×512 or larger gives the sharpest icons. A non-square image is centre-cropped to a square automatically, so nothing is stretched.