Favicon Generator

Generate favicons in every size from an image or custom text. Customize fonts, shapes, gradients & effects. Download PNG ZIP, ICO file, and web app manifest. 100% browser-based — your files never leave your device.

🖼
Drop an image here
PNG, JPG, or SVG — square recommended
Design Your Text Favicon
#ffffff
#0e7490
100% Private. Your images never leave your device. All processing happens locally in your browser using the Canvas API.

How to Use

1

Design Your Favicon

Upload an image or switch to Text / Emoji mode. Choose your font, background shape, colors, and effects. The preview updates live.

2

Preview & Select Sizes

Check the browser tab and home screen mockups. Use the size checkboxes to include only the sizes you need in your export.

3

Export Everything

Download PNG files, a favicon.ico for legacy browsers, a site.webmanifest for PWA, and the HTML snippet for your <head>.

Frequently Asked Questions

What favicon sizes do I need for a complete implementation?

For a complete setup: 16×16 (browser tab), 32×32 (taskbar/bookmark), 48×48 (Windows desktop), 180×180 (Apple Touch Icon for iOS), 192×192 (Android home screen), and 512×512 (PWA splash screen). This tool generates 16, 32, 48, 64, 128, 192, and 512 pixel PNGs plus a favicon.ico.

What image format should I use — PNG, ICO, or SVG?

PNG is the safest choice for modern browsers and supports transparency. ICO (which bundles multiple sizes) is still recommended for the root favicon.ico for legacy browser compatibility. SVG favicons are gaining support but aren’t universal yet. Best practice: use PNG for your primary favicons and include a favicon.ico as a fallback.

What is an ICO file and when do I need one?

An ICO file bundles multiple image sizes (typically 16×16 and 32×32) into one file. Browsers automatically look for /favicon.ico at your domain root, even without a <link> tag. It’s the most compatible format for older browsers and Windows desktop shortcuts. This tool generates a favicon.ico containing both 16×16 and 32×32 PNG images embedded in the ICO container.

Can I create a favicon from an emoji?

Yes. Switch to Text / Emoji mode and paste any emoji into the character field. Emoji favicons are popular because emojis are designed to be recognizable at any scale. Try combining them with a circle or rounded background for a polished app-icon look.

What is a web app manifest and why do I need it?

A site.webmanifest is a JSON file that tells browsers how to display your site when installed as a Progressive Web App (PWA). It specifies the app name, icon paths, theme color, and display mode. Without it, Chrome on Android won’t offer the “Add to home screen” prompt with your custom icon. Use the Manifest tab to generate and download it.

How do I add a favicon for iOS Safari?

iOS Safari uses the Apple Touch Icon. Add this to your <head>: <link rel="apple-touch-icon" sizes="180x180" href="/icons/favicon-192x192.png">. The 192×192 PNG from this tool works well — iOS automatically crops it to a rounded square. If you don’t specify one, iOS will take a screenshot of your page instead.

How do I configure a favicon for Android Chrome?

Android Chrome uses icons declared in your web app manifest. Use the Manifest tab to generate a site.webmanifest with your 192×192 and 512×512 icons, then link it in your HTML: <link rel="manifest" href="/site.webmanifest">. Chrome uses 192×192 for the home screen shortcut and 512×512 for splash screens.

How do I create a Windows Start menu tile?

Add these meta tags to your <head>: <meta name="msapplication-TileColor" content="#your-color"> and <meta name="msapplication-TileImage" content="/icons/favicon-192x192.png">. The 192×192 PNG from this tool works well as a Windows tile image.

Is my uploaded image sent to a server?

No. Everything runs 100% in your browser using the Canvas API and JSZip. Your image is read locally via the FileReader API and never transmitted anywhere. You can disconnect from the internet after the page loads and the tool still works perfectly.

How do I install the favicon on my website?

1. Download the files (PNG ZIP, favicon.ico, or Complete Package). 2. Copy the PNG files to your site (e.g., an /icons/ folder) and place favicon.ico at your site root. 3. Paste the HTML snippet from the HTML Snippet tab into the <head> of every page. 4. Link the manifest with <link rel="manifest" href="/site.webmanifest">.

Why isn’t my new favicon appearing in the browser?

Browser favicon caching is aggressive. Try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R), open a private/incognito window, or clear your browser cache. In Chrome DevTools, right-click the reload button and select “Empty Cache and Hard Reload”. Favicons can remain cached for hours after you update the files.

What is the difference between a favicon and an Apple Touch Icon?

A favicon is the small icon shown in browser tabs and bookmarks. An Apple Touch Icon is used when an iOS user saves your website to their home screen — it appears as an app icon on their device. The Apple Touch Icon should be at least 180×180 pixels and is specified with <link rel="apple-touch-icon">.

Do I need separate retina (@2x) favicon images?

Not separately. By providing multiple sizes (16, 32, 64, 192, 512) and declaring them with the sizes attribute in your <link> tags, browsers automatically pick the most appropriate resolution for the current display. High-DPI screens will use the larger sizes automatically.

Can I use an SVG file as a favicon?

Yes, modern browsers (Chrome 80+, Firefox 41+, Safari 12+) support SVG favicons with <link rel="icon" type="image/svg+xml" href="favicon.svg">. SVG favicons scale perfectly at any resolution and can support dark/light mode via CSS. However, always include PNG fallbacks for IE, older mobile browsers, and other legacy environments.

What is the best size for a PWA icon?

PWA icons need at least 192×192 (required minimum) and 512×512 (recommended for high-DPI splash screens and Chrome’s install prompt). For best results, use a square PNG with the icon centered and about 10–15% padding so it doesn’t appear cropped when displayed as an app icon on different device shapes.