All tools

Tool

Favicon Generator

Make a site icon from a letter or a logo. Everything runs in this tab. You get an ICO plus 16, 32, and 180 PNG files. Nothing is uploaded.

Source

One letter reads at 16px. Two is the practical max.

Options
Shape
14%
Colors
Background
Letter

Letter color is ignored when you use an image.

Fully client-side after page load. Your letters and logo never leave the browser.

How to use

How to create a favicon

Make a favicon from a letter or a logo in your browser, then drop the files into your site root.

  1. Pick a source. Type one or two letters, or drop a PNG, JPEG, or WebP logo. The preview updates as you go.
  2. Shape and padding. Square is the classic tab icon. Rounded or circle reads better on phones. Padding keeps the mark off the crop edge.
  3. Download. Save favicon.ico for the browser tab, and the PNG pack for apple-touch-icon and high-DPI tabs.
  4. Add to your site. Put the files in the site root and link them from the document head. The snippet is in the notes below.

Free favicon generator (no upload)

A favicon is the small mark in a browser tab, bookmarks, and some phone home screens. This tool draws it on a canvas in your tab. There is no account, no watermark, and no server round-trip for the image.

What this tool is for

Use it when a new site needs a tab icon tonight and you do not want to open a design app. One letter on a solid colour is enough for a personal page. A square PNG logo is better if you already have a mark. Download the ICO for /favicon.icoand the PNG pack for modern tabs and iOS home screens.

Which file to use

  • favicon.ico — 16 and 32 px inside one file. Put it at the site root. Browsers still look for /favicon.ico even without a link tag.
  • favicon-32.png — sharper on modern tabs. Link it with type image/png.
  • apple-touch-icon.png — 180×180 for iOS “Add to Home Screen.” Apple ignores ICO here.

HTML to paste

After the files sit next to your homepage:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32.png" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Text vs a logo

One letter at 16 px is readable. Three letters are not. A real logo should already be square, high-contrast, and simple. Soft photographs turn to mud in a tab. If you need a transparent mark, start from a PNG and keep padding low.

What it will not do

  • It does not write the link tags into your HTML. You paste them.
  • It does not build a web app manifest or 192 / 512 PWA icons.
  • It does not export SVG favicons. The pack is ICO plus PNG.
  • The ICO is PNG frames inside an ICO wrapper. That is what current browsers want. It is not an old Windows BMP icon for XP.

Privacy model: what private browser tools actually mean. If the source logo is huge, shrink it first with the Image Compressor.

Favicon files explained

Do I need both ICO and PNG?

ICO covers old tab requests at /favicon.ico. PNG is cleaner on modern browsers and phones. Ship both. The zip is built for that split.

Why 180 pixels?

180×180 is the Apple touch icon size. Android and some PWAs also accept it as a home-screen icon. It is not a substitute for a full web app manifest.

Will a photo work as a favicon?

Usually poorly. At 16 px you need a simple mark, not a face or a landscape. Crop to a high-contrast symbol first.

Does this use AI?

No. It draws letters or resizes your image on a canvas. There is no generator model and no API bill.

Is my logo uploaded?

No. After the page loads, drawing and download stay in the tab. Check the Network panel if you want to verify.