Skip to main content

Favicon Generator

Favicons are more complex than they look. Every platform — browsers, iOS, Android, Windows, and PWA — expects different sizes, formats, and configuration files. This generator handles the full spec: upload an image or build one from text, customize settings per platform, preview in dark and light browser mockups, then download a ZIP with every icon, manifest, and code snippet ready to use.

Drop your image here or click to browse

PNG, JPG, WebP, or SVG — 512x512px or larger recommended

How It Works

  1. 1. Upload a source image (PNG, JPG, WebP, or SVG — 512x512 or larger recommended) or create a text-based icon by choosing letters, font, and colors.
  2. 2. Customize settings per platform: background color and padding for Apple Touch Icon, theme color and maskable support for Android, tile color for Windows, and a monochrome silhouette for Safari. Live previews update in real time across Chrome tabs, iOS home screens, Google Search results, and Windows Start.
  3. 3. Download the complete favicon package as a ZIP file with all icons, manifests, and configuration files. Copy ready-to-use code snippets for your CMS or framework.

What You Get

Browser Favicons

favicon.ico (multi-size), favicon.svg, and PNG icons at 16x16, 32x32, 48x48

Apple Touch Icon

apple-touch-icon.png at 180x180 with custom background color and padding

Android & PWA

192x192 and 512x512 icons, site.webmanifest with theme color and maskable support

Windows Tiles

mstile-150x150.png and browserconfig.xml with custom tile color

Safari Pinned Tab

Monochrome SVG silhouette with configurable color. Works best with an SVG source image.

Framework Code Snippets

Ready-to-use code for HTML, Next.js, Astro, WordPress, Shopify, Laravel, Kirby, and Hugo

Frequently Asked Questions

What sizes should a favicon be?
Modern favicons require multiple sizes across platforms: 16×16 and 32×32 for browser tabs, 48×48 for the Windows taskbar, 180×180 for Apple Touch Icon, 192×192 and 512×512 for Android and Chrome PWAs, and 150×150 for Windows tiles. Including an SVG favicon provides a scalable fallback for any size not explicitly listed. This generator produces all of them from a single source image.
Do I still need a favicon.ico file?
Yes, favicon.ico is still useful as a legacy fallback, particularly for PDF viewers and older browsers. Modern browsers prefer PNG or SVG favicons specified in HTML link tags, but having favicon.ico in your site root provides maximum compatibility. This generator creates a multi-resolution ICO file containing all three sizes: 16×16, 32×32, and 48×48.
What is a maskable icon?
A maskable icon is designed for Android's adaptive icon system, where the OS applies different shaped masks (circle, rounded square, squircle) depending on the device. Maskable icons include extra padding — a "safe zone" covering the inner 80% of the canvas — so important content isn't cropped. The generator lets you toggle maskable icon output on or off, and shows the safe zone overlay in preview so you can confirm nothing important is at risk of being cropped.
What is a Safari pinned tab icon?
Safari pinned tab icons appear when users pin your website as a tab in Safari. They must be single-color SVG files — Safari renders them as monochrome silhouettes in the color you specify via the "color" attribute. For best results, upload an SVG source image, and this generator will automatically create a monochrome version.
What source image size should I use?
Upload at least a 512x512 pixel image for the best results across all platforms. SVG is ideal since it scales perfectly to any size. If using a raster image (PNG, JPG), 1024x1024 provides excellent quality for all output sizes. Avoid images smaller than 64x64 as they will appear pixelated at larger sizes like the 512x512 Android icon.
Is this favicon generator free?
Yes, completely free. No account required, no watermark, and no file size limits. Everything is generated directly in your browser — no files are uploaded to any server.
What HTML do I need to link my favicons?
The ZIP includes an instructions.html file with ready-to-paste code for every platform. The essential tags are a <link rel="icon"> for the PNG and SVG favicons, a <link rel="apple-touch-icon"> for iOS, and a <link rel="manifest"> for Android/PWA. Use the code snippet tabs in step 3 to get framework-specific output for Next.js, Astro, WordPress, and more.
What's the difference between a favicon and a PWA icon?
Favicons appear in browser chrome — the tab bar, bookmarks, and browser history. PWA icons are used when a user installs your site as an app or adds it to their home screen; they're declared in the site.webmanifest file and need to be larger (192×192 and 512×512). This generator produces both sets from a single source image.
Can I use a PNG instead of SVG?
Yes. PNG works for all outputs except the Safari pinned tab icon, which requires an SVG source. For the best results across all platforms, upload a PNG at 1024×1024 or larger. SVG is preferred when available because it scales without quality loss at any output size.