Free Favicon Generator (ICO, PNG, Apple Touch & PWA Icons)

Generate favicon.ico, PNG icons (16×16 to 512×512), Apple touch, Android, and PWA icons. No upload to server—everything runs in your browser.

How to use this favicon generator

  1. Upload a square logo (PNG or SVG recommended)
  2. Adjust padding and background for safe-area support
  3. Download favicon.ico or the full ZIP
  4. Add the generated HTML tags to your site

Why this tool is different

  • Runs 100% in your browser—no uploads, no tracking
  • Designed for real production use (ICO, manifest, browserconfig)
  • Explains favicon standards clearly so you know what each size is for

Generator

Upload image

Start with a square logo (ideally 512×512 PNG or SVG) for the sharpest icons.

Drop image here or click to choose (PNG, JPG, etc.)

Images never leave your device. All processing runs locally in your browser.

HTML link tags

Add these to your <head>.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

manifest.json

{
  "name": "My App",
  "short_name": "My App",
  "icons": [
    {
      "src": "/favicon.ico",
      "sizes": "48x48",
      "type": "image/x-icon",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/apple-touch-icon-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Why each favicon size exists

Browsers and devices use different icon sizes in different places. A single favicon.ico can contain 16×16, 32×32, and 48×48 so the browser picks the right one for tabs, bookmarks, and history. PNG favicons at 16×16 and 32×32 give modern browsers a crisp option; 180×180 is the Apple touch icon for home screens; 192×192 and 512×512 are required for Android and Progressive Web Apps.

.ico vs .png for favicons

A favicon.ico file is a container that can hold multiple resolutions (e.g. 16, 32, 48 pixels). One file serves all browser tab and bookmark needs. PNG favicons are one size per file; you add several link tags with different sizes. Modern browsers support both; .ico remains the standard for the default “favicon” because it is a single file and widely supported, including older browsers.

How favicons affect branding and UX

Favicons appear in browser tabs, bookmarks, history, and mobile home screens. A clear, recognizable icon improves trust and makes your site easier to find in a crowded tab bar or bookmark list. Use a simple design that reads at 16×16 and scales up; avoid tiny text or detail. This generator’s padding control helps prevent important edges from being cropped in circular or rounded masks (e.g. maskable PWA icons).

Favicon best practices for modern websites

  • Use a square source image (512×512 or larger) so icons stay sharp on high-DPI screens.
  • Keep the important content in the center 80% so maskable icons are not cropped on Android.
  • Serve favicon.ico from your site root and add the correct link and manifest tags for PWA.