Favicon generator

Generate favicon files locally from text, emoji, or an image. Nothing is uploaded.

Single letter, number, symbol, or any emoji

72%
0%

0% = square · 50% = circle

Paste into <head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Live preview
16×16Tab small
32×32Tab / taskbar
64×64High-DPI
180×180Apple Touch

How to generate a favicon

  1. Choose a source: Text / Emoji to type a letter, number, or any emoji; or Image to upload your own logo.
  2. Adjust colors, font size, or image fit — the preview updates live on the right.
  3. Click Download favicon package to get a ZIP with all files ready to use.
  4. Unzip and copy the files to your site root, then paste the <link> tags shown below the button into your HTML <head>.
  5. Open site.webmanifest and fill in your app name and theme color.

What sizes does a favicon need?

A complete modern favicon setup requires multiple sizes to look sharp across all browsers and devices. This generator produces all of them automatically.

  • 16×16 px — browser tab, bookmarks bar
  • 32×32 px — Windows taskbar, most browser tabs
  • 180×180 px — Apple Touch Icon (iOS home screen)
  • 192×192 px — Android Chrome home screen
  • 512×512 px — PWA splash screen
  • favicon.ico — legacy support for old browsers

favicon.ico vs PNG — what to use?

Use both. favicon.ico is a legacy format supported by all browsers including old Internet Explorer — place it in your site root and browsers will find it automatically. PNG favicons support full color and transparency and are required for Apple devices. Modern sites declare PNG files in the HTML <head> and keep favicon.ico as a fallback.

How to add a favicon to your website

Place your favicon files in the site root, then add these tags to your HTML <head>:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Frequently Asked Questions

What sizes does a favicon need?
A modern favicon setup needs 16×16, 32×32, and 180×180 (Apple Touch Icon) PNG files, plus a favicon.ico for legacy browsers. This generator produces all required sizes automatically.
What is the difference between favicon.ico and PNG?
favicon.ico is a legacy format supported by all browsers, including old Internet Explorer. PNG favicons support full color and transparency, and are required for Apple devices. Modern sites use both for full coverage.
Can I use an emoji as a favicon?
Yes. Select Emoji mode, type or paste any emoji, and it will be rendered at all required favicon sizes. You can download the result as a PNG set or favicon.ico.
How do I add a favicon to my website?
Place your favicon files in the site root, then add link tags to your HTML head pointing to the PNG files and apple-touch-icon. See the code snippet above for the exact markup.
Are my images uploaded anywhere?
No. All processing happens directly in your browser using the Canvas API. Your images never leave your device — nothing is uploaded to any server.