Favicon Generator

What is a favicon?

A favicon is the small icon that represents your site in browser tabs, bookmarks, history, search results on mobile, and on a phone's home screen when someone saves your site. A missing favicon makes a site look unfinished, and browsers log an error for every visit when /favicon.ico is not found.

Different devices need different sizes. This generator produces the set that covers every modern browser and platform:

• favicon.ico containing 16, 32 and 48-pixel versions, for browser tabs and older software.
• favicon-16x16.png and favicon-32x32.png for modern browsers.
• apple-touch-icon.png (180 × 180) for iPhone and iPad home screens.
• android-chrome-192x192.png and 512x512 plus a site.webmanifest for Android and installable web apps.

How to make your favicon

1. Choose Letter or emoji and type one or two characters, then pick a shape and colors. Or choose Image and drop in your logo.
2. Check the previews, including how it looks in a browser tab at 16 pixels.
3. Enter your site name and theme color for the web app manifest.
4. Click Download all to get a ZIP file, and copy the HTML snippet.

Installing the favicon

Unzip the files into the root folder of your website, the same folder as your home page (on most hosts this is public_html). Then paste the HTML snippet inside the <head> of every page, or into your theme's header template:

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

Browsers cache favicons aggressively, so you may need a hard refresh or a private window to see the change.

Design tips

• Keep it simple: at 16 pixels, fine detail and thin lines disappear. A bold initial or a simplified mark works best.
• Use strong contrast between the symbol and the background.
• For logos, start from a square image of at least 512 × 512 pixels with some padding around the mark.

More worked examples

Letter icon: a bold white “T” on an indigo rounded square stays readable at 16 pixels, while a detailed logo often does not.

Common mistakes to avoid

• Using a detailed logo at 16 px. Simplify it to one bold mark.
• Skipping favicon.ico. Some browsers and crawlers request it directly.
• Forgetting browser caching. Hard-refresh to see a new icon. Choose brand colors with the color palette generator.

Sources and methodology

The calculations on this page follow these published standards and references. The code is covered by automated tests against known values.

• web.dev – Add a web app manifest