Skip to content
AtlasDocs
← Blog

How to create a favicon.ico from a PNG, in your browser

Published on September 12, 2026

You can create a favicon.ico from a PNG or WebP in seconds, for free, in your browser, with the 16, 32 and 48 sizes and a tab preview before you download. Here's how.

Why favicon.ico still matters

The favicon is the icon shown in the browser tab, in bookmarks and next to your site in Google results. Browsers now accept PNG and SVG favicons, but .ico is still the format everything understands: older browsers, Windows when it creates website shortcuts, and many feed readers look for "/favicon.ico" at the root of the domain even when the page has no tag at all. A well-made .ico stores several sizes in one file, and each program picks the one it needs.

The AtlasDocs tool takes a PNG or WebP, scales the image down to each size in the chosen preset, packs the .ico with those versions and shows a light-tab and dark-tab preview before you download. AtlasDocs' own favicon was generated with it.

How to create the favicon.ico, step by step

  1. Open the PNG → ICO (favicon) tool and upload a PNG or WebP, ideally square, with a transparent background and 256 pixels or more. If you upload more than one image, only the first is used and the screen tells you which.
  2. Under "Favicon sizes", pick the preset: "Default (16 + 32 + 48)" for a website, "Minimal (32 only)" for the lightest possible file, or "Windows icon (16 + 32 + 48 + 256)" for a program shortcut.
  3. If the image is pixel art, check "Pixel art (no smoothing)" so the downscale keeps the pixels crisp. For logos and regular artwork, leave it unchecked.
  4. Click "Generate favicon.ico". The button shows the stages "Reading the image…", "Resizing…" and "Packing the ICO…", and the "How it will look" preview appears below, with the byte size of each entry and the total.
  5. Check the preview and click "Download favicon.ico". Use "Copy <head> line" to copy the ready-made tag to paste into your site's HTML.
Convert PNG to ICO (favicon) →

Nothing leaves your computer: reading, resizing and packing the .ico all run in your browser, with no external engine and without sending the image to any server.

Which preset to choose

  • "Default (16 + 32 + 48)": for a website. The 16 goes in the tab, the 32 on high-resolution screens and the taskbar, and the 48 is what Google uses in search results (it scales it down to 16). Target up to 10 KB.
  • "Minimal (32 only)": the lightest file. Browsers scale the 32 down for the tab on their own; use it when every byte counts.
  • "Windows icon (16 + 32 + 48 + 256)": for a program or folder shortcut on Windows, which uses the 256-pixel version for large icons. It's heavy by nature and not meant for websites, which is why this preset never gets a size warning.

PNG or WebP only: what if my image is a JPG?

JPG is rejected on purpose: the format has no transparency, and a favicon with a square white background looks bad on a dark tab. The check is on the file's contents, not the extension, so renaming a .jpg to .png won't fool the tool, which answers "Upload a PNG or WebP". The right path is to convert the JPG to PNG first, with the image format converter, and ideally crop the image to a square in an editor. GIF and SVG aren't accepted either; animated WebP is, but only the first frame is used.

Change image format →

Warnings you may see and what they mean

  • "The image is not square": a favicon is always square, so the image was centered with transparent sides, not stretched. If there's too much margin left, crop the image first.
  • "It was upscaled and the icon may look blurry": the uploaded image is smaller than the largest size in the preset (for instance, a 24-pixel PNG in a preset that needs 48). Use a source of 256 pixels or more.
  • "Above the 10 KB target": the .ico ended up larger than recommended for a website. Photos and gradients weigh more than simple logos; simplify the image or use the minimal preset.
  • "Above the 20 KB ceiling for a favicon": same advice, more urgent. The warning never blocks the download; the decision is yours.
  • "Animated WebP: only the first frame was used": favicons don't animate; the tool takes the first frame.

How to add the favicon to your site

Upload the file to the root of the site, so it answers at "/favicon.ico", and add to the <head> of your pages the line the tool copies for you: <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> (the sizes listed are exactly the ones packed into the file). In Next.js projects using the App Router, just place the file at "app/favicon.ico", no tag needed. If the old icon keeps showing after the swap, that's the browser cache: open the site in a private window to check the new version.

The preview: why check before downloading

The preview is built from the generated .ico, not from the original image, so it shows what the browser will actually display. You see the icon in a "Light tab" and a "Dark tab" (the smallest entry at 16 pixels), on a "2× screen", which uses the 32, and as "48 shown at 16, as on Google". Below, a checkerboard strip shows each entry at its real size: wherever the checkerboard shows through is transparent. Logos with thin strokes vanish at 16 pixels; if that happens, simplify the artwork and generate again.

The ICO format only goes up to 256 pixels per side, and the entries are stored as PNG inside the file, with 32-bit transparency. The output name is always "favicon.ico"; rename it afterwards if you need something else.