Convert PNG to ICO (favicon)

A favicon is the small icon browsers show in the tab, bookmark bar and history. This tool turns a PNG into a proper multi-size .ico file containing 16, 32, 48 and 64 pixel versions, built entirely on your device with no uploads.

How to convert PNG to ICO (favicon)

Drop your PNG image into the tool below. A square image works best.
The output format is already set to ICO (favicon).
Click run to generate a multi-size .ico.
Download your favicon.ico and drop it into your site root.

What a favicon has to do

A favicon is displayed at very small sizes, often 16 pixels square. At that size, fine detail disappears and thin lines vanish altogether. A good favicon is a bold, simple shape with strong contrast: a single letter, a simplified version of a logo mark, or a solid shape in the brand colour. If your full logo has a wordmark, use only the symbol, or just the first letter.

The reason .ico files contain several sizes is that scaling a single image up or down at display time looks blurry. By providing 16, 32, 48 and 64 pixel versions, the operating system or browser can show a pixel-exact image in each context: 16 px in a tab, 32 px in a bookmark list on a high-DPI screen, 48 px in a Windows taskbar shortcut, and so on.

Preparing the source PNG

Make it square. If your logo is wide, place it on a square transparent canvas first, or crop to the symbol using the crop tool.
Start at 256 pixels or larger. Downscaling from a big, clean source gives smoother results than upscaling a small one.
Keep a transparent background if the shape is solid, so it sits well on both light and dark browser themes. If the shape is thin or light coloured, put it on a solid rounded square instead.
Avoid text longer than one or two characters; it will be unreadable at 16 pixels.

Installing the favicon

Save the downloaded file as favicon.ico and place it in the root folder of your site. Then add this inside the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="any">

Most platforms have a dedicated setting instead: WordPress calls it the Site Icon under Appearance, Shopify and Squarespace have a Favicon field in the theme settings, and Webflow has one in Project Settings. Upload the .ico there.

Going further

For the full set of icons modern devices ask for, you will also want a 180 pixel PNG for iOS home-screen shortcuts (apple-touch-icon) and 192 and 512 pixel PNGs for Android and the web app manifest. Those are plain PNG files, so use the resize tool to produce them from the same master. The .ico from this page covers browser tabs, bookmarks and Windows, which is where most people notice a missing favicon.

Frequently asked questions

What size should my source PNG be?

Square, and at least 64 by 64 pixels. A 256 pixel square PNG gives the cleanest downscaled results. Non-square images are centred and padded with transparency.

What is inside the .ico file?

Four PNG-encoded images at 16, 32, 48 and 64 pixels. Browsers and Windows pick the size that best fits the context, so the icon looks sharp in a tab, a bookmark and a desktop shortcut.

How do I add the favicon to my website?

Upload favicon.ico to the root of your site (so it is reachable at yoursite.com/favicon.ico) and add <link rel="icon" href="/favicon.ico"> inside the <head> of your pages. Browsers cache favicons aggressively, so a hard refresh may be needed to see the change.

Do I still need an .ico file in 2026?

Modern browsers accept PNG and SVG favicons, but .ico is the one format that works everywhere, including older browsers, Windows shortcuts and some feed readers. Most sites ship both.

Your files never leave your device

Every tool on Squishly Tools is 100% free and runs entirely inside your browser. Your images and documents are processed on your own computer and are never uploaded to a server. There are no accounts, no watermarks and no catch.