CalConverters

Favicon Generator

Generate a complete favicon package: favicon.ico, apple-touch-icon, Android Chrome PNGs, PWA maskable icons & site.webmanifest. Free, no signup.

Favicon & PWA Generator

Generate a favicon + PWA manifest set from an image, text, emoji or drawing.

1
Source
Choose icon source

Pick where the icon comes from. You can switch source anytime.

Live preview
Updates with every change.
A · Text
—

A modern favicon needs more than a single 16×16 image. Browsers, mobile devices, and Progressive Web Apps each expect different sizes, formats, and metadata. This generator produces the complete package in one step — no signup, all in your browser.

What you get

  • favicon.ico — multi-size container (16, 32, 48) for legacy and tab fallback
  • favicon.svg — scalable vector for modern browsers (when source supports it)
  • favicon-16x16.png + favicon-32x32.png — standalone PNGs for browsers that prefer separate files
  • apple-touch-icon.png (180×180) — iOS home screen icon
  • android-chrome-192x192.png + android-chrome-512x512.png — Android Chrome
  • icon-192-maskable.png + icon-512-maskable.png — PWA maskable variants with safe-area padding
  • site.webmanifest — PWA manifest with name, theme color, icons array, display mode
  • HTML snippet — paste-ready <link> and <meta> tags for your <head>

How to use

  1. Choose a source — upload an image, type 1–3 characters, paste an emoji, or draw pixel-by-pixel.
  2. Configure — pick a background, theme color, safe-area inset for maskable icons, and PWA manifest details.
  3. Preview — see how your favicon looks in a browser tab, iOS home screen, Android adaptive launcher, and PWA splash.
  4. Download — get a ZIP with every file, and copy the HTML snippet to paste into your site's <head>.

Source types

  • Image — drop a PNG, JPG, WebP, SVG, or GIF. Cropper lets you choose the square crop region precisely.
  • Text — type 1–3 characters (e.g., your product initials). Pick a web-safe font, weight, color, and whether to italicize.
  • Emoji — paste one emoji. Slide the scale control to adjust how much of the canvas it fills.
  • Draw — paint a 32×32 pixel grid with brush, eraser, fill bucket, undo/redo, and color palette. Great for retro pixel-art logos.

Modern favicon best practices (2026)

A well-shipped favicon set in 2026 includes the .ico multi-size container (for legacy support), an SVG vector (for modern browsers and dark mode), maskable PWA icons (for Android adaptive launchers), and a site.webmanifest with explicit theme_color. Older guidance to ship 20+ different sizes is mostly obsolete since iOS 12+ scales apple-touch-icon.png itself, and Microsoft tiles target only legacy Edge.

Tip:

SVG favicons can include @media (prefers-color-scheme: dark) rules so your icon adapts to the user's system theme. Modern Safari, Chrome, and Firefox all honor this.

HTML installation

Place every file at your site root (so they live at /favicon.ico, /apple-touch-icon.png, /site.webmanifest, etc.). Then paste the provided snippet inside your page's <head>. The snippet declares each icon variant so browsers pick the best one.

Tip:

If your favicon doesn't update after a deploy, append a cache-busting query like ?v=2 to the URLs in your snippet — browsers cache favicons aggressively.

Frequently asked questions

What size should a favicon be?
A modern favicon bundle covers multiple sizes: 16×16 and 32×32 for browser tabs, 48×48 for older Windows desktop shortcuts (all three packed into favicon.ico), 180×180 for iOS home screen, plus 192×192 and 512×512 PNGs for Android Chrome and PWAs.
Do I need a .ico file in 2026?
Yes. Although modern browsers prefer SVG and PNG favicons, .ico remains the default fallback that all browsers — including legacy versions — recognize. Shipping favicon.ico means your site always has a working favicon.
What is a maskable icon and why does PWA need it?
Android adaptive icons can be masked into circles, rounded squares, or squircles depending on the device theme. A maskable icon includes an inner safe area so the launcher can crop its outer edge without cutting your logo. Without maskable variants, your icon may look awkward on some Android devices.
Can I use an emoji as my favicon?
Yes. Pick the Emoji tab, paste your emoji, and the tool will rasterize it at every required size. Note that emoji renders differently between operating systems — the favicon embeds your local emoji font as a raster, so what you see is what users see.
Where do I place the favicon files on my site?
Drop every file (favicon.ico, all PNGs, favicon.svg, site.webmanifest) at the root of your site so they live at /favicon.ico, /apple-touch-icon.png, etc. Then paste the provided HTML snippet inside your <head>.
What's the difference between favicon.ico and favicon.svg?
favicon.ico is a raster format that packs multiple PNG sizes into one file. favicon.svg is a scalable vector that renders crisply at any size and supports dark-mode color schemes. Modern browsers prefer SVG when both are available.
How do I add a favicon to Next.js / React / WordPress?
For Next.js (App Router) place files in the /public folder and paste the snippet into your root layout's metadata. For Create React App, drop files into /public and update public/index.html. For WordPress, upload via the theme customizer or add the snippet to your theme's header.php.
Why doesn't my favicon show up after I add it?
Browsers cache favicons aggressively. Hard-refresh with Cmd/Ctrl+Shift+R, or append a cache-busting query like ?v=2 to the favicon URL. Mobile devices may take a day to update.