What sizes do I need?

16×16 and 32×32 for browser tabs (in /favicon.ico). 180×180 for iOS. 192×192 and 512×512 for Android and PWAs. 150×150 for Windows tiles. The generator produces all of these from one source.

Is /favicon.ico still needed?

Yes, as a fallback. Modern browsers prefer link rel="icon" pointing to PNGs but fall back to /favicon.ico for legacy compatibility. Always include both.

What if my source is rectangular?

Favicons are square. The generator either crops to square (centering) or pads with a chosen color. Best results come from a square source.

How do I add favicons to my site?

Place the generated files at the root of your site. Add the generated link tags to your . The browser fetches the appropriate icon based on context.

Why does my favicon not update?

Browsers cache favicons aggressively, sometimes for days. Force a refresh by clearing cache, opening the icon URL directly, or appending a version query parameter to the link tag.

Is my image uploaded to a server?

No. Generation happens in your browser.

Should I use SVG or PNG?

SVG for the source (resolution-independent). The generator outputs PNGs at specific sizes; modern browsers also support SVG favicons via link rel=icon type=image/svg+xml.

What's site.webmanifest?

A JSON manifest for progressive web apps describing icons, colors, and other metadata. Required for installable web apps; harmless to include even on standard sites.

Free Converter

Favicon Generator

Generate favicon files in multiple sizes (16x16 to 512x512) from any image. Free, instant, and runs entirely in your browser.

Drag & Drop an image here

Supports PNG, JPG, SVG, WebP. Max 10MB.

Or

About Favicon Generation

A favicon is the small icon that appears in browser tabs, bookmarks, and history lists. The original favicon — a 16×16 ICO file at /favicon.ico — has expanded into a complex set of icons at different sizes for different platforms: 16×16 and 32×32 for browser tabs, 180×180 for iOS home screens, 192×192 and 512×512 for Android, and various sizes for Windows tiles. Producing all of these from a single source image is what a modern favicon generator does.

This tool takes a single high-resolution source image (typically a square logo) and generates the full set of favicon assets plus the HTML link tags needed to reference them. Output includes ICO, multiple PNGs, and a manifest.json for progressive web app metadata. Drop the resulting files at the root of your site and reference them via the generated HTML.

All processing happens in your browser. No upload, no API call, no rate limit. The output works on every modern browser and operating system that displays favicons.

Why Generate a Favicon

Sites without favicons look unfinished. Browser tabs show a generic icon; bookmarks have no visual identifier; the site appears less professional. Adding a proper favicon set is a low-effort high-impact polish step that signals attention to detail.

Modern favicon requirements have grown beyond /favicon.ico. iOS home screen icons, Android Chrome icons, Windows tile icons, and dark mode variants all use different files. Generating them all from one source ensures consistent branding without managing each file by hand.

How to Generate Favicons

Upload source image, get the full favicon set.

Upload source image: Use a square image at least 512×512 pixels. PNG is preferred (transparency support); SVG is also accepted. Higher-resolution sources produce sharper smaller icons.
Configure platform options: Enable iOS, Android, Windows, and PWA outputs as needed. Default settings produce the standard set most sites need.
Customize colors and theme: Choose theme colors for Windows tiles and PWA splash screens. Match your brand identity.
Download and deploy: Save the generated zip. Place files at the root of your site and add the generated HTML link tags to your <head>. The HTML references each icon at the right size.

Common Use Cases

Adding favicons to new websites — Every new site needs a complete favicon set. Generation produces it from a single logo source.
Updating outdated favicons — Older sites often have just /favicon.ico; modern requirements need a fuller set. Re-generating fills in missing assets.
Producing PWA icons — Progressive web apps need 192×192 and 512×512 icons plus manifest metadata. The generator produces these correctly.
Migrating between branding — Rebrands often require regenerating all favicons. Single-source generation prevents missing assets.
Testing with different colors — Quickly iterating on theme colors and immediately seeing how the icon set looks at different sizes.

Technical Details

The full modern favicon set: favicon.ico (16+32+48 multi-resolution), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. Plus site.webmanifest for PWA, browserconfig.xml for Windows.

Each PNG is generated by canvas-based downsampling from the source. The ICO is constructed in JavaScript by combining 16/32/48 versions into the multi-resolution ICO format using DataView writes.

HTML link tags reference each file with appropriate rel and sizes attributes. The generator produces these as a copy-paste-ready snippet for your site's <head>.

Best Practices

Use a high-resolution source — Start with at least 512×512 PNG or an SVG master. Downsampling produces sharper smaller icons than upscaling a small source.
Test in multiple browsers — Different browsers and platforms display different icons. Open the deployed site in Chrome, Safari, Firefox, mobile Safari, and Android Chrome to confirm each picks the right asset.
Match colors to your brand — Theme colors and PWA splash screens should reflect your brand identity. Inconsistent colors produce a polished-looking icon with mismatched system integration.
Keep the source SVG for future regeneration — When you rebrand, you'll regenerate from the source. Keep the master SVG (or highest-resolution PNG) accessible.

Frequently Asked Questions

What sizes do I need?: 16×16 and 32×32 for browser tabs (in /favicon.ico). 180×180 for iOS. 192×192 and 512×512 for Android and PWAs. 150×150 for Windows tiles. The generator produces all of these from one source.
Is /favicon.ico still needed?: Yes, as a fallback. Modern browsers prefer link rel="icon" pointing to PNGs but fall back to /favicon.ico for legacy compatibility. Always include both.
What if my source is rectangular?: Favicons are square. The generator either crops to square (centering) or pads with a chosen color. Best results come from a square source.
How do I add favicons to my site?: Place the generated files at the root of your site. Add the generated link tags to your <head>. The browser fetches the appropriate icon based on context.
Why does my favicon not update?: Browsers cache favicons aggressively, sometimes for days. Force a refresh by clearing cache, opening the icon URL directly, or appending a version query parameter to the link tag.
Is my image uploaded to a server?: No. Generation happens in your browser.
Should I use SVG or PNG?: SVG for the source (resolution-independent). The generator outputs PNGs at specific sizes; modern browsers also support SVG favicons via link rel=icon type=image/svg+xml.
What's site.webmanifest?: A JSON manifest for progressive web apps describing icons, colors, and other metadata. Required for installable web apps; harmless to include even on standard sites.

Favicon Generator

Drag & Drop an image here

Related Tools

App Icon Generator

Browser Frame Mockup Generator

Device Mockup Generator

Meme Generator

About Favicon Generation

Why Generate a Favicon

How to Generate Favicons

Common Use Cases

Technical Details

Best Practices

Frequently Asked Questions

Related Articles

Image Format Guide: JPG vs PNG vs WebP vs SVG Explained

Color & Design Tools Guide: Hex, RGB, HSL, and Color Palettes Explained

How to Convert Files Online Safely: Privacy and Security Guide

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk