Favicon Generator — favicon.ico and PNG Icons

Browser tool that builds favicon.ico, multi-size PNG icons, a manifest and HTML snippets

Runs in your browser · nothing is uploaded

Make it from

Text or emoji

One or two characters read best. Up to 4 are allowed.

Font

Background colour

Text colour

Shape

Also make a maskable icon (optional)Keeps the artwork inside the centre safe zone on a full-bleed background so Android can crop it to a circle or squircle. When on, it is added to the manifest with purpose: maskable. The Apple touch icon (180 px) is always an opaque full-bleed square (iOS rounds the corners itself).

Site name

Goes into "name" in site.webmanifest.

Short name

Theme colour

What it is

A favicon is the small icon in browser tabs, bookmarks and home screens. This tool turns a logo image, a few letters or one emoji into every size you need, and gives you the HTML tags and web app manifest to go with them. The image is processed only inside your browser.

How to use

Pick Make it from. Text or emoji lets you choose the text, font and background; An image takes your logo file.
For an image decide How to make it square (crop the centre or add margins) and whether the Transparent background is on. Choose a Shape: square, rounded square or circle.
Optionally fill in Site name, Short name and Theme colour; they go into the site.webmanifest and the HTML code.
Check the previews for each size and download them one by one or press Download all (ZIP).
Upload the files to your site root and paste the HTML code into your head.

Files and rules

File	Size	Use
favicon.ico	16, 32, 48	browser default, older environments
favicon-16x16.png, favicon-32x32.png	16, 32	browser tab
favicon-48x48.png	48	desktop shortcut
apple-touch-icon.png	180	iOS home screen (opaque full-bleed square)
android-chrome-192x192.png, android-chrome-512x512.png	192, 512	Android, PWA
android-chrome-maskable-512x512.png (optional)	512	Android adaptive icon: artwork kept in the centre safe zone on a full-bleed background

Master image: a 512 px square is drawn first and every size is made from it. Small sizes are reached by halving step by step, which keeps edges cleaner than one big jump.
ICO layout: a 6-byte header, a 16-byte directory entry per image, then the PNG data.
Text fitting: text width stays within about 78% of the tile and the font size within 72% of it.
Text colour: it follows the background to a readable black or white; you can still change it.

Code example

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

FAQ

Is my image uploaded?

No. Resizing and packing the ICO file all happen inside your browser, and the results are only downloaded to your device.

Which files are generated?

favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png and a favicon.ico holding 16, 32 and 48. A site.webmanifest and the HTML link tags come with them, and everything can be downloaded as one ZIP.

What is inside favicon.ico?

Images of 16, 32 and 48 pixels stored as PNG streams in an ICO container. That layout is read by current browsers and by Windows since Vista. The tool writes the ICO header and directory itself, and its tests check the magic bytes (00 00 01 00) and the number of entries.

What happens to a non-square image?

A favicon is square, so by default the largest centred square is cropped out. If cropping would damage your logo, choose "Keep it whole, add margins" to keep the proportions and leave the extra space transparent.

Anything to watch for with text or emoji?

At 16 pixels only one or two big characters stay readable. Emoji look different on every platform, so the icon uses the picture your device draws. Fonts come from your device, so the look of some letters can vary a little between computers.

Where do the files go?

Upload them to the root of your site and paste the link tags into the head of your HTML. If they live in another folder change the paths in the code. Browsers cache favicons for a long time, so clear the cache if a change does not show up at once.