tag, and place each image file at the root of your web server." } }, { "@type": "Question", "name": "How is the .ico file generated?", "acceptedAnswer": { "@type": "Answer", "text": "We combine the 16×16 and 32×32 PNGs into a single ICO binary. Everything happens in your browser — no upload required." } } ] }

Generate every favicon and app icon size from a single image

Page Summary

The Favicon Generator turns a single image (JPG/PNG/SVG) into every icon size your website or mobile app needs in one go. Build favicon.ico (16/32 px), Apple Touch Icon (180 px), PWA icons (192/512 px), and an OGP image (1200×630) all at once, and copy the matching HTML snippet.

  • Batch generation: create 7 icon and image sizes in one click
  • ICO support: generate a favicon.ico containing both 16 px and 32 px in the browser
  • One ZIP download: get every file packaged as a single ZIP
  • Privacy: images are never sent to a server
ADVERTISEMENT

Favicon / App Icon Generator

How to Use

1
Upload an Image
Drop or pick a JPG, PNG, or SVG file (square recommended)
→
2
Preview Each Size
Review the favicon, Apple Touch, PWA, and OGP outputs at a glance
→
3
Download
Download individually or grab the full ZIP — and copy the HTML snippet

🔒 Images are processed in your browser and are never uploaded or stored on a server

Click or drag & drop to upload an image

Supports JPG, PNG, SVG, WebP / square images recommended
Generated Icons
HTML Snippet (paste inside <head>) 
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">
ADVERTISEMENT

Frequently Asked Questions (FAQ)

What Is a Favicon? Each Size and Its Role

A favicon is the small icon shown in browser tabs and bookmarks. It plays an important role in brand recognition, and providing the right set of sizes ensures consistent display across devices and environments.

What Each Size Is For

16×16 / 32×32 px (favicon.ico): Used in desktop browser tabs and bookmarks. ICO files can hold multiple sizes inside.
180×180 px (Apple Touch Icon): Used when an iPhone or iPad user adds your site to the home screen.
192×192 / 512×512 px (PWA icons): Referenced by manifest.json for Progressive Web Apps. Used for Android home-screen shortcuts and PWA installs.
1200×630 px (OGP image): The thumbnail displayed when your URL is shared on X (formerly Twitter), Facebook, and other social platforms.

Configuring site.webmanifest

To enable PWA behavior, place a site.webmanifest file at your web server root in addition to the HTML snippet from the ZIP. A minimal example:
{"name":"Site Name","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

Practical Limits and Things to Watch For

Favicon rendering varies considerably across browsers and operating systems, and you cannot guarantee a perfectly identical look everywhere. Safari uses mask icons (single-color SVG), Android uses Web manifest icons, Windows uses tile images defined in browserconfig — each platform has its own quirks. At the tiny 16×16 size, intricate logo details collapse, so it is recommended to prepare a simplified favicon-only design.

Real-World Q&A

Q: I updated my favicon but the browser still shows the old one. — Browsers cache favicons aggressively. Use a query string (e.g., favicon.ico?v=2) or fully clear the browser cache. Q: Which sizes do I really need? — At minimum, 16×16 (browser tab), 32×32 (taskbar), 180×180 (Apple Touch), and 192×192 + 512×512 (PWA) — five sizes in total. This tool produces them all in a single batch.

Trends in Favicons

In the 2000s, a single ICO file was the standard. Once Retina displays appeared, providing multiple PNG sizes became mandatory. The trend in the 2020s is the SVG favicon (Chrome 80+, Firefox 41+), which renders crisply at any resolution. Dark-mode-aware SVG favicons that respond to prefers-color-scheme via embedded CSS are also gaining attention. As PWAs spread, designing maskable icons (placing important elements within a safe zone) has become an important consideration too.

ADVERTISEMENT