Will the PNG-based favicon.ico work everywhere?

The .ico file embeds PNG images, which all modern browsers and Windows Vista or later support. Very old Windows XP-era tools may not read PNG-compressed ICO frames.

Why are the Apple touch and maskable icons not transparent?

iOS fills transparent areas with black and rounds the corners itself, and Android crops maskable icons into shapes, so both get an opaque background. The maskable icon also keeps your artwork inside a safe zone with at least 10% padding.

Favicon Generator

Generate favicon.ico, Apple touch, Android, and maskable icons with a manifest

Source

Drop a PNG, JPEG, WebP, or SVG logo

Square images of at least 512 × 512 px work best. SVG files are sanitized before rendering.

You can also paste from the clipboard.

Icon style

Transparent background

Applies to the browser and Android icons. The Apple touch and maskable icons always use the background color.

Background color

Shape

Padding0%

Web app manifest

App name

Short name

Theme color

Splash background color

Icon path

Where the files will live on your site, e.g. / or /icons/.

Favicon package

Add an image or switch to Text to generate favicons

All sizes, favicon.ico, and site.webmanifest are generated together.

HTML <head> snippet

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

site.webmanifest

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Avatar GeneratorCreate initials avatars with deterministic colors and PNG or SVG export SVG to ImageConvert SVG to sharp PNG, JPEG, WebP, or AVIF images at any size Image ResizerBatch resize images by percentage, exact size, or max dimensions

What does the Favicon Generator create?

A complete favicon package from one logo or a few letters: favicon.ico (16, 32, and 48 px), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png, and site.webmanifest, plus the HTML tags that link them.

How to use it

1.Drop a PNG, JPEG, WebP, or SVG logo, or switch to Text and type up to three characters.
2.Choose the background (transparent or a color), padding, and shape.
3.Fill in the app name, short name, theme color, and icon path for the manifest.
4.Check the light and dark previews and the browser tab mock.
5.Download the ZIP or single files, then paste the HTML snippet into your <head>.

How each icon is built

Browser and Android icons follow your shape, padding, and transparency settings. The Apple touch icon is always an opaque square because iOS rounds the corners itself. The maskable icon is opaque and keeps the artwork inside the safe zone (at least 10% padding) so Android can crop it to a circle or squircle. Small sizes are downscaled in steps so 16 px icons stay sharp.

Formats, safety, and limits

favicon.ico embeds PNG images, which every modern browser and Windows Vista or later support; very old Windows XP tools may not read it. SVG uploads are sanitized, so scripts, event handlers, and external references are removed before rendering. Text icons use the system UI font. Everything is generated locally in your browser.