Knowledge Mark G
Hire Me

Free image tool

Favicon Generator

Make favicon.ico, the Apple touch icon and PWA icons from an image, text or an emoji - with the HTML to paste in.

  • No sign-up
  • Instant results
  • Runs in your browser

Design

One or two characters read best at 16 px.

Style

Used in site.webmanifest.

Preview

Type a letter or an emoji.

Which favicon files does a site need?

Today’s browsers need surprisingly few. A favicon.ico in the site root (here holding 16, 32 and 48 pixel images) covers every browser and tools that look for it by name. PNGs at 16 and 32 pixels give sharper tabs. The apple-touch-icon (180 × 180) is what iPhones and iPads show on the home screen, and the 192 and 512 pixel icons in site.webmanifest are what Android and installed web apps use. The download contains all of them plus the HTML to paste into your page’s head.

Designing for 16 pixels

A favicon is usually seen at 16 pixels, where detail disappears. A single bold letter, a simple mark or an emoji reads far better than a full logo with text. Check the browser-tab preview: if you cannot recognise it there, simplify. A strong background colour also helps it stand out against both light and dark browser themes.

The Apple touch icon is treated differently

iOS applies its own rounded corners and fills any transparency with black, so the Apple icon is always generated square and on your background colour, whatever shape you choose for the others.

Starting from a photo or a busy logo? Cut it out first with the background remover, and shrink other site images with the image compressor.

Questions people ask

What size should a favicon be?+

Provide several: 16 and 32 px for browser tabs, 48 px inside favicon.ico, 180 px for the Apple touch icon, and 192 and 512 px for Android and installed web apps. This generator makes them all.

Do I still need favicon.ico?+

It is still worth having. Some browsers, feed readers and tools request /favicon.ico directly, whatever your HTML says.

Can I make a favicon from an emoji?+

Yes. Choose Text or emoji and type one. It is drawn using your device's emoji font, so it will look like the emoji on your system.

Why does my favicon not update?+

Browsers cache favicons aggressively. Hard-refresh, open the favicon URL directly, or add a version query such as /favicon.ico?v=2 to the link tags.

Is a transparent background OK?+

For the browser icons, yes. The Apple touch icon is always filled with your background colour because iOS would otherwise show the transparent areas as black.