How to create and install PNG favicons

By CutImage · Updated October 19, 2026

A favicon has to work in a tiny space. Begin with a square source that is easy to recognize at 16 pixels, then generate the sizes your site uses. Installing the files is a separate step: your HTML or web app manifest must point to the correct URLs.

1. Prepare the source

Use a simple symbol or one bold letter with space around it. A wide wordmark or photograph may be unreadable in a tab. CutImage center-crops non-square sources; use Crop first when you need control of the composition.

Open the source in the favicon generator. Choose 16 and 32 for small icons. If you need an Apple touch icon, select 180. Select 192 and 512 for the web app manifest example below. These are PNG assets, not a complete application install package.

2. Generate and download PNG files

Select Generate and inspect the preview. Use individual Download buttons if your browser blocks Download All. Keep the names consistent when placing files in your website’s public directory.

The generator outputs PNG at every selected size. It does not create an ICO binary, ZIP archive, HTML file or manifest. Renaming a PNG file to favicon.ico does not convert its encoding. Modern websites can declare PNG icons explicitly.

3. Add links in the HTML head

These filenames match the generator’s downloads. This example assumes you deploy the files at your site root:

<link rel="icon" type="image/png" sizes="16x16"
      href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32"
      href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180"
      href="/favicon-180x180.png">

4. Reference larger icons when your app needs them

If your website already has a web app manifest, add the correct icon entries. A minimal icon fragment looks like this; merge it into your real manifest instead of overwriting its other settings:

{
  "icons": [
    {"src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png"}
  ]
}

A manifest icon alone does not ensure that a site is installable. App installation behavior also depends on the browser and the rest of the web app configuration. Do not label an ordinary icon as maskable unless you have designed and checked its safe area.

5. Troubleshoot a missing or old icon

1. Open each icon URL directly and confirm it loads as an image rather than your homepage or an error.
2. Check capitalization and paths in the HTML and manifest.
3. Confirm the files have the dimensions declared in their attributes.
4. Try a fresh browser profile or versioned filename when the browser keeps an old cached icon.

Inspect both light and dark browser themes. Transparent dark marks can disappear against a dark tab, so a small background tile may be more legible.

Reference: MDN’s icon link reference.