Skip to content
MagicWebBox
Sign in

Favicon generator

Every icon a site needs

Source

Options

On iPhone, transparent areas of the home screen icon are shown in black: pick a background for a transparent image.

Web manifest

Preview and files

Icons are drawn in your browser: the image is never uploaded.

HTML code

Paste it into the <head> of your pages and put the ZIP files at the root of your site.

<link rel="icon" href="/favicon.ico" sizes="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="#b91c1c">

site.webmanifest

{
  "name": "Mon site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#b91c1c",
  "background_color": "#ffffff",
  "display": "standalone"
}

About this tool

This generator creates every icon a website needs from a single source. You start either from a PNG, JPEG, SVG or WebP image of up to 20 MB, or from one or two letters on a colored square with adjustable rounded corners. Padding and a transparent or solid background are applied to every size.

You get a favicon.ico containing 16, 32 and 48 px images, 16 and 32 px PNG files, a 180 px apple-touch-icon, 192 and 512 px Android icons, and a site.webmanifest file with your site name and colors. The preview shows the icon in a light and a dark browser tab and on a phone home screen, and the HTML link tags are ready to copy.

How to use it

  1. Under "Source", pick "Letters" and set the colors and radius, or "Uploaded image" and click "Choose an image (PNG, JPEG, SVG, WebP)".
  2. Under "Options", adjust the "Padding" and uncheck "Transparent background" if you want a "Background color".
  3. Fill in the "Web manifest": "Site name", "Short name", "Theme color" and "App background color".
  4. Check the "Preview and files", then click "Download all (ZIP)".
  5. Click "Copy HTML" and paste the tags into the head of your pages.

Frequently asked questions

Which files are in the ZIP?

favicon.ico (16, 32 and 48 px), favicon-16x16.png, favicon-32x32.png, a 180 px apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest. Put them at the root of your site, since the generated HTML points to those paths.

Is my image uploaded to a server?

No. The icons are drawn on a canvas in your browser, and the ICO file and the ZIP are built right there. The uploaded image is never sent anywhere, and it is not stored between visits either.

Why does my icon show a black background on iPhone?

iOS renders transparent areas of a home screen icon as black. If your image has transparency, uncheck "Transparent background" and pick a background color; it will be applied to every generated size.

What source image works best?

A square image of at least 512 px, or an SVG, because the largest icon produced is 512 px. A rectangular image is centered without being stretched. Fine details vanish at 16 px, so a simple logo or initials stay readable.