tigtools

Favicon Generator

Make a complete favicon set from your logo or from one or two letters on a coloured background, then copy the HTML tags. The icons are generated in your browser.

Runs in your browser No sign-up

Create from

One or two characters work best; only the first two are used.

62%
Shape

How to use it

  1. Choose Letters and type one or two characters with your colours, or choose Image and pick a logo (ideally square, at least 512 px).
  2. Check the previews of every size, especially 16 and 32 px, which appear in browser tabs.
  3. Download the ZIP and upload its files to the root of your website.
  4. Paste the HTML tags into the head section of your pages, and adjust the name in site.webmanifest if needed.

How it works

Browsers and devices look for icons in different places. The set produced here covers the common cases: favicon.ico with 16, 32 and 48 px images for browser tabs, bookmarks and older software that requests /favicon.ico automatically; 16 and 32 px PNG files referenced by link tags; a 180 × 180 apple-touch-icon used when someone adds your site to an iPhone or iPad home screen; and 192 and 512 px icons referenced from site.webmanifest for Android home screens and installable web apps.

The favicon.ico file stores the icons as PNG images inside an ICO container, which every current browser and Windows Vista or later can read. The ICO and ZIP files are assembled by code in this page; nothing is sent to a server.

Small sizes need a simple design: at 16 × 16 pixels thin lines and small text disappear, so a bold letter or a simplified logo mark works better than a full logo with words. The image is scaled down in several high-quality steps. The apple-touch-icon is always given a solid background colour because iOS fills transparent areas with black, and iOS rounds its corners itself.

After uploading new icons, browsers may keep showing the old favicon for a while because they cache it aggressively. A hard refresh, or opening /favicon.ico directly, usually helps.

Examples

Letter icon for a new project

Typing "TG" with white letters on a dark green rounded square gives a clean icon that stays readable at 16 × 16 px in a browser tab, without needing a designed logo.

Icon from an existing logo

A 1024 × 1024 PNG logo with a transparent background, set to Fitting the whole image, produces transparent tab icons and an apple-touch-icon on your brand colour.

Wide logo

For a 1200 × 300 wordmark, Cropping the centre keeps only the middle letters. Fitting the whole image keeps everything but makes it tiny; a separate square logo mark usually looks better.

Frequently asked questions

Do I still need favicon.ico?

It is still useful. Some browsers, feed readers and tools request /favicon.ico from the site root even without a link tag. Modern browsers also use the PNG icons referenced in the HTML.

Where do I put the files?

Upload them to the root folder of your website, next to your home page, so that /favicon.ico and the other paths in the HTML work. If you use a subfolder, change the paths in the link tags and in site.webmanifest.

Why does my old favicon still show?

Browsers cache favicons separately and for a long time. Try a hard refresh, open /favicon.ico in a new tab, or check in a private window. Renaming the files, for example favicon-v2.ico, also forces a reload.

Does this create an SVG favicon?

No. It creates PNG and ICO files, which work everywhere. If you already have an SVG logo, you can add it yourself with a link tag of type image/svg+xml in addition to these files.

Privacy

Icons, the ICO file and the ZIP are created in your browser. Your image and text are not uploaded, stored or included in analytics.