Icony
Home

Favicon Generator

Turn any icon into a full set of favicon and app icon files: favicon.ico, SVG, an Apple touch icon, and Android and PWA icons.Everything is generated in your browser.

What you get in the ZIP

One click gives you eight files. Each one covers something a browser, a search engine, or a phone looks for on your site.

  • `favicon.ico` holds 16, 32, and 48px images in one file. It's the universal fallback. Older browsers request it by default, and Google Search can use it because its supported formats include ICO and PNG but not SVG.
  • `favicon.svg` is the vector version. Chromium browsers and Firefox have supported SVG favicons for years, and Safari added support in version 26. It stays sharp on high-density screens at any tab size.
  • `apple-touch-icon.png` is a 180×180 PNG for the iOS and iPadOS home screen. It's opaque on purpose, because iOS drops transparency and fills empty corners with black.
  • `icon-192.png` and `icon-512.png` are the icons an installed web app reads from its manifest. Android uses them on launchers and splash screens.
  • `icon-maskable-512.png` is a full-bleed version that the operating system can crop into a circle or squircle without cutting off your mark.
  • `site.webmanifest` names your app and points to the three PNGs above, with theme and background colors filled in.
  • `head-snippet.html` contains the four <link> tags that wire everything up. Paste it as is.

The guide on making a favicon from an icon explains why the bundle has these files and shows a script-based alternative.

Read the guide: How to Make a Favicon from an Icon

How to use the generator

  1. Pick a main icon. Choose a library, search by name, and click the result. The default library is a filled set, since filled shapes survive at tiny sizes.
  2. Style the tile. Set the background color, choose a square, rounded, or circle shape, then adjust corner radius and padding. A solid tile keeps the icon visible on both light and dark tab bars.
  3. Add a badge if you want one. A small second icon in one corner can mark a variant, such as a beta build or a notification state. Choose its corner, size, and color. The badge sits on a disc ringed in the tile color so it stays legible.
  4. Check the previews. The browser tab mock shows the real 16px rendering. Next to it are the 32px, home-screen, and large versions.
  5. Fill in the app name and download. The name and short name go into the manifest. Download the ZIP, or copy only the HTML snippet if your files are already in place.

Install the files

Unzip the bundle first. Every setup below assumes the files end up at the root of your site, because that's where browsers and crawlers look for them.

Plain HTML. Upload all the files to your web root. Then paste the contents of head-snippet.html into the <head> of every page, or at least your home page.

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Next.js App Router. Next.js writes the link tags itself when it finds specially named files in app/, so you don't need the snippet. Put the ICO, SVG, and Apple icon in app/ under the names below, and keep the manifest files in public/.

app/
  favicon.ico            <- from the ZIP
  icon.svg               <- rename favicon.svg
  apple-icon.png         <- rename apple-touch-icon.png
public/
  icon-192.png
  icon-512.png
  icon-maskable-512.png
  site.webmanifest
// app/layout.tsx
export const metadata = {
  manifest: '/site.webmanifest',
};

WordPress and other CMSs. Most CMSs have a single site icon field and generate their own sizes from one upload. In WordPress, open Appearance, then Customize, then Site Identity, and upload icon-512.png as the Site Icon.

For full control, use a child theme or a header-injection plugin to paste the snippet, and upload the other files to the web root with your host's file manager. Website builders such as Shopify and Squarespace also have a favicon field, which usually takes a square PNG or ICO.

Sizes explained

  • 16px and 32px are what tabs, bookmarks, and history lists actually draw. The 32px image is for high-density displays.
  • 48px is the size Windows and some desktop shortcuts prefer. Google also asks for favicons larger than 48×48 when possible.
  • 180px is the iOS home-screen icon. The system applies the rounded corners for you.
  • 192px and 512px are the manifest sizes Android and desktop installs use for launchers, task switchers, and splash screens.
  • 512 maskable exists because Android may crop the icon into any shape. The spec reserves a safe zone, a centered circle whose radius is 40 percent of the icon width. The generator extends the tile color to the edges and scales your mark to fit inside that circle.

Design tips for 16px

A favicon is usually drawn at 16px or 32px. At that size, a few rules matter more than any styling choice.

  • Prefer filled icons. Outline icons with 1px or 2px strokes break up into partial pixels at 16px. A filled glyph on a solid tile keeps large areas of flat color.
  • Expect the badge to disappear. At 16px even a small badge covers only a few pixels and mostly adds noise. Leave the option to hide it at 16px switched on, so tabs get the clean main icon while larger sizes keep the badge.
  • Keep contrast high. Pick an icon color and a tile color with a clear difference in lightness. White on a saturated mid-to-dark color is a safe start, and it reads on both light and dark browser chrome.
  • Mind the padding. About 10 to 15 percent on each side keeps the icon from looking cramped. Too much padding shrinks the mark to almost nothing in a tab, so lower the padding before you go looking for a simpler icon.
  • Stick to one idea. A single recognizable shape works. Words, taglines, and multi-part illustrations don't.

FAQ

Is the generator free, and are my icons uploaded anywhere? Yes, it's free. You don't need an account, and there's no watermark. The icon is composed, rasterized, and zipped in your browser, so nothing is uploaded to a server.

Do I need all eight files? Not strictly. favicon.ico, favicon.svg, and apple-touch-icon.png cover browsers, Google Search, and iOS. You only need the 192px and 512px icons and the manifest if you want the site to be installable as an app.

Why does my favicon still show the old icon after I replace it? Browsers cache favicons separately from the page. Check in a private window and add a version to the link (for example /favicon.svg?v=2). Google Search refreshes its copy on its own schedule.

Can I use an outline icon? You can, but thin strokes turn into gray smudges at 16px. A filled icon on a solid tile stays readable, which is why the generator defaults to a filled library.

Can I use the generated icons commercially? The icon libraries are open source under MIT or ISC licenses, which allow commercial use. Check the license page of the library you picked for its attribution notes.