Do I still need favicon.ico?

Modern browsers read PNG, but ICO is still handled by older tools and has a default location in the site root, so it is worth having.

What image should I upload?

A square one with a simple shape. Detail disappears at 16 pixels, so simplify a logo with text down to its mark.

What about maskable icons?

This tool does not create maskable icons. If you need them, prepare artwork with a safe margin and add a separate manifest entry.

Why do I download files one by one?

To keep the tool light and free of extra libraries. We can add a ZIP bundle if there is demand.

Free online tools

Favicon and manifest generator

Upload a logo or graphic and the tool prepares the icon sizes browsers, iOS and Android need, a favicon.ico file, a manifest and ready HTML.

Upload an image

PNG, JPG, WebP or SVG. The image never leaves your browser.

Transparent background

Background colour

Margin: 0%

HTML for the head section

<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Web app manifest (site.webmanifest)

{
  "name": "",
  "short_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"
}

Your data never leaves your browser. Nothing is sent to a server.

How to use it

Upload a square PNG, JPG, WebP or SVG, ideally at least 512 × 512 px.
Choose a transparent background or a colour, and a margin around the logo.
Download the files you need and put them in the site root.
Paste the HTML into your head and adjust the manifest.

Which files you get

You get PNG icons at 16, 32 and 48 px for browsers, a 180 px apple-touch-icon for iOS and 192 and 512 px icons for Android and installable web apps. There is also a favicon.ico containing the 16, 32 and 48 px sizes.

Background and margin

iOS icons have no transparency, so with a transparent background the system adds black. Pick a background colour for the apple-touch-icon. A small margin keeps the logo away from the edges when corners are rounded.

File privacy

The image is processed locally in your browser using a canvas element. It is not uploaded to a server, so you can use artwork you have not published yet.

Frequently asked questions

Related tools

Need more than a tool?

If there is a bigger project behind it, a website, a shop or an app, describe it in a short brief. We reply with specifics and no obligation.

Describe your project