Command Palette

Search for a command to run...

Developer Tool

Favicon Generator

Generate favicons in all required sizes from an image. Get ICO, PNG, and Apple Touch Icon formats.

About Favicon Generator

A favicon generator creates favicon files in all required sizes from a single source image. Favicons (favorite icons) are the small icons displayed in browser tabs, bookmarks, and home screens. Despite their small size, favicons are an important part of branding and user experience — they help users identify your site among many open tabs and create a professional impression. Modern favicon requirements include multiple sizes for different devices and contexts.

How to Use

Upload a source image (PNG, JPG, or SVG) or enter a text/emoji to generate from. The generator creates favicon files in all standard sizes: 16x16, 32x32, 48x48 (standard), 180x180 (Apple Touch Icon), 192x192 and 512x512 (Android/Chrome), and a favicon.ico containing multiple sizes. It also generates the HTML code to include all favicons in your page.

Formula / Key Equations

The generator resizes the source image to each required dimension using high-quality image scaling. For ICO format, multiple sizes (16, 32, 48) are packed into a single favicon.ico file using the ICO file format specification. Apple Touch Icon and Android icons follow platform-specific naming and sizing conventions.

Common Use Cases

Creating professional favicons for new websites and web applications. Updating existing favicons with new branding. Generating all required icon sizes from a single image. Creating icons for progressive web apps (PWA). Building favicon sets for client websites. Ensuring consistent branding across all platforms.

Limitations

Generated favicons may lose quality when the source image is much smaller than the target size (upscaling). For best results, use a source image at least 512x512 pixels. ICO format has limited transparency support compared to PNG. Some browsers may cache favicons aggressively — you may need to clear browser cache to see updated favicons.

Frequently Asked Questions

What sizes does a favicon need to be?

Modern websites need multiple favicon sizes: 16x16 and 32x32 (standard browser tabs), 48x48 (Windows site icons), 180x180 (Apple Touch Icon for iOS), 192x192 and 512x512 (Android/Chrome PWA). A single favicon.ico can contain multiple sizes for backward compatibility.

What is an Apple Touch Icon?

An Apple Touch Icon is a 180x180 PNG image used by iOS devices (iPhone, iPad) when a user adds your website to their home screen. It should be a simplified version of your logo without fine details that would be lost at small sizes. The file is named apple-touch-icon.png.

Why is my favicon not updating?

Browsers aggressively cache favicons. To force an update: clear your browser cache, add a version query parameter to the favicon URL (favicon.ico?v=2), or use a different filename. In development, hard-refreshing (Ctrl+Shift+R) often works. CDN caching may also delay updates.

What is a site.webmanifest?

A site.webmanifest is a JSON file used by progressive web apps (PWAs) and Android browsers to define app icons, theme colors, display mode, and other metadata. It references your icon files (192x192 and 512x512) and provides a native app-like experience on mobile devices.

Can I use an SVG favicon?

Yes, SVG favicons are supported by modern browsers (Chrome, Firefox, Safari 16+). SVG favicons scale perfectly at any size and can include dark/light mode variants. Use <link rel='icon' type='image/svg+xml' href='/favicon.svg'>. However, you should still provide ICO and PNG fallbacks for older browsers.

Related Tools