Favicon generator

Most generators hand you a single 32 pixel PNG and call it a favicon. This one writes a proper ICO container with three frames inside it, exports the PNG sizes browsers and phones actually ask for, and gives you the markup.

Drop a file here or click to browse — a square image, 512 px or larger

Background Padding

Files

Paste this into the head of every page

Why an ICO file still exists in 2026

ICO is a container that holds several images at different sizes, and the operating system picks whichever fits the slot it needs to fill: 16 pixels in a browser tab, 32 in a bookmark bar, 48 in a Windows shortcut. A single PNG scaled down to 16 pixels by the browser looks muddy, because scaling a detailed logo to a 16 pixel square without adjusting it is a losing game. Supplying purpose-made frames is why a good favicon looks crisp.

The ICO written here embeds PNG data in each frame rather than the older bitmap format, which every browser since Internet Explorer 11 understands and which keeps the file small.

The files you get

favicon.ico — 16, 32 and 48 pixel frames in one file, dropped at the root of your site.
favicon-32.png and favicon-16.png — referenced explicitly, which modern browsers prefer.
apple-touch-icon.png at 180 pixels, used when someone adds your site to an iPhone home screen. Apple composites it on a solid background, so transparency here usually looks wrong.
icon-192.png and icon-512.png for Android and the web app manifest.

Design advice worth more than the tool

Whatever you feed in will be shown at 16 pixels square. That is enough room for one letter, one shape, or one very simple mark. A full logo with a wordmark turns into grey mush. If your logo has text, crop to the symbol or the initial before you come here.

Common questions

What size should the source image be?

Square and at least 512 pixels. Anything smaller has to be enlarged for the 192 and 512 pixel outputs, which will look soft on Android home screens.

Where do the files go?

In the root directory of your site, alongside index.html, unless you change the paths in the markup to match. Browsers will look for /favicon.ico on their own even without a link tag.

My new favicon is not showing up.

Favicons are cached aggressively, sometimes for days, and a hard refresh often is not enough. Open the icon URL directly to confirm the new file is being served, then clear the site's data in your browser settings.

Other image tools