Favicon Generator - Free Online Tool

What Is a Favicon Generator?

A favicon is the small icon displayed in browser tabs, bookmarks, and mobile home screens. It's one of the first brand elements users notice and one of the most commonly forgotten. This tool generates all the favicon sizes you need from a single image — 16x16, 32x32, 180x180 (Apple touch icon), 192x192 and 512x512 (PWA manifest) — plus the HTML link tags to paste into your document head.

Required Favicon Sizes

16x16 & 32x32 — browser tab icons. 180x180 — Apple touch icon (iPhone home screen). 192x192 & 512x512 — Progressive Web App manifest icons. SVG — modern scalable favicon (supports dark mode). favicon.ico — legacy format, still needed for some older browsers.

How to Use This Favicon Generator

Upload your source image — Select a square image (512×512px or larger recommended) — your logo, icon, or brand mark.
Preview the favicons — See how your favicon looks at all required sizes — browser tabs, bookmarks, home screens, and OS taskbars.
Customize the background — For transparent source images, choose a background color for platforms that don't support transparency (like iOS home screen icons).
Download the favicon package — Download a zip containing all required sizes (16×16, 32×32, 180×180, 192×192, 512×512) plus the web manifest and HTML link tags.

Tips and Best Practices

→ Start with a 512×512 SVG or PNG. Larger source images downsample better. SVG is ideal because it's infinitely scalable. PNG at 512px is the minimum for crisp results at all sizes.
→ Simplify your icon for small sizes. Your full logo probably won't be legible at 16×16 pixels. Use a simplified version — often just an initial, monogram, or brand mark.
→ Include the SVG favicon. Modern browsers support SVG favicons via <link rel="icon" type="image/svg+xml" href="favicon.svg">. SVG favicons can react to dark mode with CSS media queries.
→ Don't forget the web app manifest. PWAs and Android home screens use the manifest.json icons array. Include 192×192 and 512×512 PNG icons for full coverage.

Frequently Asked Questions

What sizes do I need for favicons?

At minimum: 32x32 (tabs), 180x180 (Apple touch icon), 192x192 + 512x512 (PWA). Best practice includes an SVG favicon for scalability with PNG fallbacks.

What is an Apple touch icon?

A 180x180 PNG that appears when users add your site to their iPhone home screen. Specified with . Without it, iOS screenshots your page instead.

What favicon format is best?

SVG favicons scale perfectly and support dark mode, but browser support isn't universal yet. Use SVG as primary with a 32x32 PNG fallback for maximum compatibility.

📖 Learn More

What sizes do I need for favicons?+

The essential set: favicon.ico (16×16 and 32×32 embedded), 180×180 PNG (Apple touch icon), 192×192 PNG (Android/Chrome), 512×512 PNG (PWA splash). Optional but recommended: SVG favicon (scalable), 48×48 PNG (Windows taskbar). This tool generates all required sizes.

What image format is best for favicons?+

ICO format for maximum compatibility (supports multiple sizes in one file). PNG for modern browsers and home screen icons. SVG for the sharpest rendering and dark mode support. In practice, you need all three: an ICO fallback, PNG icons at specific sizes, and an SVG for modern browsers.

How do I add a favicon to my website?+

Add link tags in your HTML head: a rel="icon" for the ICO/SVG, a rel="apple-touch-icon" for iOS, and reference the web manifest for Android. Most browsers also check for a favicon.ico at the site root automatically, so placing one there provides a basic fallback.

\ud83d\udcd6 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools