⭐ Favicon Generator

Convert any image to a complete favicon set — ICO, PNG (16×16 to 512×512), Apple Touch Icon, and manifest.json. Free online favicon generator — no signup required.

Drop image here or click to upload

PNG, JPG, SVG, WebP supported

How to Use

Upload your image

Drag and drop any image onto the upload area, or click to browse your files. Square images work best.

Preview all sizes

Instantly see your image at all 8 standard favicon sizes: 16, 32, 48, 64, 128, 180, 192, and 512 pixels.

Download your favicons

Click any size card to download that size as a PNG, or use "Download All Sizes" to get them all at once.

Frequently Asked Questions

What is a favicon? +

A favicon is the small icon shown in browser tabs, bookmarks, and search results next to your website's name. It's typically 16×16 or 32×32 pixels and helps users identify your site quickly among many open tabs.

What image formats can I upload? +

You can upload PNG, JPG, JPEG, GIF, WebP, or SVG files. For best results, use a square image (equal width and height) with a transparent background saved as PNG.

Which favicon sizes should I generate? +

The standard set includes: 16×16 and 32×32 (browser tabs), 48×48 (Windows taskbar), 180×180 (Apple Touch Icon for iOS), 192×192 and 512×512 (Android/PWA). Including all sizes ensures your favicon looks good on every device.

How do I use the generated favicons on my website? +

Add these link tags to your HTML <head>: <link rel="icon" sizes="32x32" href="/favicon-32.png">, <link rel="apple-touch-icon" href="/favicon-180.png">. Place the files in your website root for best browser compatibility.

Is my image sent to a server? +

No. All resizing happens in your browser using the HTML5 Canvas API. Your original image never leaves your device and is never uploaded to any server.

Complete Guide: Favicon Generator

A favicon is the small icon that appears in browser tabs, bookmarks, and increasingly in PWA launchers and OS taskbars. What started as a single 16×16 pixel image has grown into a complex matrix of icon sizes and formats required across browsers, devices, and contexts.

Favicon Sizes You Need in 2026

The minimum complete set for broad compatibility:

16×16 PNG/ICO — browser tab (legacy, small)
32×32 PNG/ICO — browser tab (standard), Windows taskbar
48×48 PNG/ICO — Windows site pinned icon
180×180 PNG — Apple Touch Icon (iOS home screen, Safari pinned tab)
192×192 PNG — Android home screen, Chrome PWA
512×512 PNG — PWA splash screen, Google Play store listing

The HTML to reference these:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

SVG Favicon: The Modern Approach

Modern browsers (Chrome 80+, Firefox 41+, Safari 12+) support SVG favicons, which are resolution-independent and can include media queries for dark mode:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <!-- fallback -->

An SVG favicon can adapt its appearance automatically:

<!-- Inside favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    @media (prefers-color-scheme: dark) { .bg { fill: #1a1a1a; } }
    .bg { fill: white; }
  </style>
  <rect class="bg" width="100" height="100"/>
  <!-- icon content -->
</svg>

Maskable Icons and the Safe Zone

Android adaptive icons can be masked into different shapes (circle, rounded square, teardrop) depending on the device manufacturer's launcher. A maskable icon must keep all important visual content within the central 80% safe zone (a circle inscribed in the icon square). The outer 20% padding may be cropped. A separate maskable icon variant is recommended — don't use the same asset as your regular icon, as important details near the edges will be cut off.

manifest.json Icon Array

The Web App Manifest defines how your PWA appears when installed:

{
  "name": "My App",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ]
}

The purpose field accepts any (default), maskable, or monochrome. Including a maskable 512×512 icon ensures your PWA looks sharp on all Android launchers.

PNG vs ICO: When to Use Which

ICO format supports multiple resolutions embedded in a single file (16×16, 32×32, 48×48). It was the original favicon format and is still needed as a fallback at /favicon.ico because browsers request this path automatically without a <link> tag. PNG format is preferable for larger sizes and is required for Apple Touch Icons. For the root favicon.ico, include at minimum 16×16 and 32×32 sizes in the ICO container.

Why You Should NOT Manually Scale a 16×16 Image

Manually scaling a high-resolution logo to 16×16 almost always produces a blurry result. At this size, you typically need to redesign the icon as an abstract symbol or letterform — the full logo won't be legible. Professional favicon workflows start with a simplified, high-contrast version of the brand mark, drawn at the target size rather than scaled down. Pixel-hinting (nudging anchor points to align with pixel boundaries) improves sharpness at small sizes.

After generating favicons, compress the PNG files with our Image Compressor. To convert SVG source files to PNG for specific sizes, use our SVG to PNG converter.