Favicon Generator

Generate favicons from text, emoji, or images in all sizes including ICO, PNG, SVG, and full PWA bundle with manifest.json. Runs entirely in your browser.

Was this tool helpful?

How to Use

Create production-ready favicons from text, emoji, or images in seconds. The tool generates every format and size your website needs — ICO, PNG, SVG, and a full PWA bundle with manifest.json.

Step-by-Step Usage

Choose your input mode — "Text / Emoji" to create a favicon from 1-2 characters, or "Image Upload" to resize an existing logo or icon into all required sizes.
Configure your design — In text mode, pick your background color, text color, and adjust the font size slider. The dark mode SVG colors panel lets you set separate colors for users who prefer dark themes.
Click "Generate Favicons" to produce all 8 standard sizes (16px through 512px). The preview grid shows how your favicon appears at each resolution.
Download what you need — Grab the multi-resolution favicon.ico for legacy browser support, individual PNGs for specific sizes, or the full PWA bundle ZIP containing everything plus the HTML snippet and manifest.json.
Copy the HTML snippet and paste it into your site's <head> section to link all favicon formats.

Image Mode Tips

Use a square image (1:1 aspect ratio) for the best results. Non-square images will be stretched to fit.
Start with the highest resolution you have — at least 512x512px is recommended. The tool downscales from there.
PNG with transparency works well for icons that float on any background color.
SVG source files produce the crispest results because they are resolution-independent.

About This Tool

Favicon Formats: ICO vs PNG vs SVG

The ICO format dates back to Windows 3.0 and remains the only format universally supported by all browsers without a <link> tag — browsers look for /favicon.ico at the site root by default. A single ICO file can bundle multiple resolutions (typically 16x16, 32x32, and 48x48) so the browser picks the best match for its display context. Modern ICO files store each resolution as an embedded PNG, which is more efficient than the legacy BMP format.

PNG favicons are linked via HTML <link rel="icon"> tags with explicit sizes attributes. They offer better compression than ICO and are the standard for modern web applications. The 192x192 and 512x512 sizes are required by Chrome for PWA home screen icons and splash screens respectively.

SVG favicons are the newest addition, supported in Chrome 80+, Firefox 63+, and Safari 16+. Because SVG is vector-based, a single file renders crisply at any size from 16px to 1024px. The key advantage is the ability to embed CSS with @media (prefers-color-scheme: dark), making the favicon automatically adapt to the user's light or dark theme preference.

PWA Icons and manifest.json

Progressive Web Apps require a manifest.json (or .webmanifest) file that lists icon paths and sizes. Chrome requires at least a 192x192 icon for the "Add to Home Screen" prompt and a 512x512 icon for the PWA splash screen. The purpose: "any maskable" attribute tells the browser that the icon works both as a regular icon and within the maskable safe zone, where the OS may clip the icon into a circle, rounded square, or other shape.

Theme-Aware SVG Favicons

An SVG favicon with embedded CSS can change its appearance based on the user's operating system theme. The embedded @media (prefers-color-scheme: dark) rule switches colors when the user enables dark mode. This means a dark blue icon on a white background in light mode can automatically become a light purple icon on a dark background in dark mode — without any JavaScript. This tool generates the complete SVG with the media query already embedded.

Apple Touch Icons

When iOS users add a website to their home screen, Safari uses the Apple Touch Icon (180x180px) as the app icon. This icon should be a simple PNG without transparency — iOS will apply its own rounded corner mask and gloss effects. The <link rel="apple-touch-icon"> tag tells Safari where to find this icon. Without it, Safari takes a screenshot of the page instead, which rarely looks good as an app icon. This tool includes the 180x180 PNG and the correct HTML link tag in every bundle.

Why Use This Tool

Every website needs favicons, yet the setup process involves generating 6-8 different sizes, creating multiple file formats, writing HTML link tags, and configuring a PWA manifest. This tool handles all of that in a single click.

Complete coverage — ICO for legacy browsers, PNG for modern browsers, SVG for theme-aware rendering, and Apple Touch Icon for iOS home screen. No missing sizes, no broken icons.
Dark mode support — Most favicon generators only produce static icons. This tool generates SVG favicons with embedded prefers-color-scheme CSS so your favicon matches the user's system theme automatically.
PWA-ready — The full bundle includes a manifest.json with the correct icon entries, sizes, and MIME types. Drop the files into your project and your PWA icon requirements are satisfied.
Maskable icon safe zone — PWA icons with purpose: "maskable" are clipped differently by each OS. Android uses circles, some launchers use rounded squares. The safe zone is the inner 80% of the icon. This tool uses rounded rectangle backgrounds that look good in any mask shape.
Ready-to-paste HTML — Every bundle includes the exact HTML tags you need to paste into your document <head>. No guessing which attributes or sizes to specify.
Zero uploads — Everything runs in your browser via the Canvas API. Your images and text never leave your device. You can verify this by disconnecting from the internet and using the tool normally.

The ICO Binary Format

This tool encodes ICO files manually using the binary ICONDIR specification. The format starts with a 6-byte header (reserved word, image type, image count), followed by 16-byte directory entries for each resolution (width, height, color count, color planes, bits per pixel, data size, data offset), and finally the image data for each entry stored as PNG blobs. Modern ICO files use embedded PNG data rather than legacy BMP, which produces significantly smaller files with full alpha transparency support.

FAQ

What sizes does a favicon need to be?

Modern browsers use multiple favicon sizes. The essential set includes 16x16 (browser tab), 32x32 (taskbar), 48x48 (Windows site), 180x180 (Apple Touch Icon), 192x192 (Android home screen), and 512x512 (PWA splash screen). The ICO format can bundle 16, 32, and 48px versions into a single file.

What is the difference between ICO, PNG, and SVG favicons?

ICO is the legacy format that bundles multiple resolutions in one file and works everywhere. PNG favicons are linked via HTML tags and offer better compression. SVG favicons are vector-based, scale to any size without pixelation, and support CSS media queries for dark mode adaptation. Modern sites typically provide all three formats.

How does a theme-aware SVG favicon work?

SVG favicons can embed CSS with a prefers-color-scheme media query. The browser automatically switches the favicon appearance when the user toggles between light and dark system themes. This is supported in Chrome 80+, Firefox 63+, and Safari 16+.

Is my image uploaded to a server?

No. All favicon generation happens entirely in your browser using the Canvas API. Your images and text never leave your device. There are no network requests, no server-side processing, and no data storage.