🎨 Design ✅ 100% Free ⚡ Instant Download

Favicon Maker

Generate favicons in every size from an image, text, or emoji. Outputs .ico, all PNG sizes (16 to 512px), Apple Touch Icon, and PWA icons — with ready-to-paste HTML and a site.webmanifest.

Step 1 — Choose source type

Step 2 — Provide source

📁

Drop an image here, or click to browse

Best results from square images with a transparent PNG

PNG JPEG WEBP GIF SVG

Text / initials (1–4 characters)

Background colour

Text colour

Background shape

Emoji

Background colour

Background shape

Quick pick

🚀

Step 3 — Options

Sizes to generate

Inner padding

Generating favicons…

Resizing to all sizes & building .ico file

⚠️

Generation Failed

An error occurred.

Preview — all generated sizes

📋 Paste into your <head>

📄 site.webmanifest — save to your web root

⬇️ Download individual files

📊 Package Stats

—

Sizes

—

Files

✓

.ico

✓

PWA ready

📏 Size Reference

16×16

Browser tab

32×32

Taskbar, shortcuts

48×48

Windows site icon

96×96

Google TV, desktop

180×180

Apple Touch Icon

192×192

Android PWA

512×512

PWA splash screen

🔒

Processed server-side, never stored. Uploaded images are resized in memory and returned as base64. No files are written to disk.

💡 Favicon Tips

🔲

Use a square source image. Non-square images are cropped from the centre when resized to square sizes.

🎨

PNG with transparency gives the cleanest result, especially for rounded or circular designs.

📱

180×180 Apple Touch Icon is used when users add your site to their iPhone home screen.

⚡

Keep it simple. Favicons display at 16×16 — complex logos become unreadable. Use a single letter, symbol, or bold icon.

🔗 Related Tools

Social Image Generator

Color Picker & Converter

Utilities

What Is a Favicon?

A favicon (short for "favourite icon") is the small image displayed in browser tabs, bookmarks, address bars, and shortcuts. It's typically a .ico file containing multiple image sizes (16×16, 32×32, 48×48), but modern websites also need PNG favicons at larger sizes for Apple devices and Progressive Web Apps (PWAs).

Despite being small, favicons play a significant role in brand recognition. A well-designed favicon makes your site instantly identifiable in a crowded tab bar and is required for PWA installation on Android and iOS.

Which Favicon Sizes Do You Need?

16×16 & 32×32: Standard browser tab and taskbar icons. Always include these in your favicon.ico.
48×48: Windows shortcut icons and some older Android browsers.
96×96: Google TV and some desktop environments.
180×180: Apple Touch Icon — shown when a user adds your site to their iPhone or iPad home screen.
192×192: Android PWA launcher icon, referenced in site.webmanifest.
512×512: PWA splash screen on Android. Chrome requires this for "Add to Home Screen" prompts.

Frequently Asked Questions

Upload all the generated files to your web root (same directory as your index.html). Then paste the HTML snippet into the <head> section of every page. The <link rel="icon"> tags tell browsers where to find each size. For WordPress, you can use the Customizer → Site Identity → Site Icon to upload your favicon directly.

Both. The .ico file is required for compatibility with older browsers and Windows. Modern browsers prefer SVG or PNG. Best practice is to serve a favicon.ico at the root (legacy support) alongside separate PNG files linked in the <head>. This tool generates both automatically.

Browsers aggressively cache favicons. To force a refresh: hold Shift and click Reload in Chrome/Firefox, or open DevTools → Network → check "Disable cache" then reload. In production, add a version query string to the favicon URL, e.g. href="/favicon.ico?v=2".

A web app manifest is a JSON file that tells browsers how to display your site when installed as a PWA (Progressive Web App). It specifies the app name, icons, theme colour, and display mode. Chrome and Edge use it to determine which icon to show when a user adds your site to their Android home screen.

Yes — modern browsers (Chrome 80+, Firefox 41+, Safari 12+) support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG favicons scale perfectly at any size and support dark mode via the prefers-color-scheme media query inside the SVG. However, older browsers and Safari on iOS still require .ico and PNG fallbacks, so always include those too.