Favicon & App Icon Generator

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

Upload a square logo (PNG or SVG recommended)
Adjust padding and background for safe-area support
Download favicon.ico or the full ZIP
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

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.

Frequently Asked Questions

What sizes should I use?

16×16 and 32×32 are standard favicon sizes for browser tabs. 48×48 is used in some contexts. 180×180 is the Apple touch icon for iOS. 192×192 and 512×512 are required for Android and PWA. A maskable 512×512 icon has safe-area padding so it looks correct in circular or rounded masks.

What is the difference between .ico and .png?

A single favicon.ico file can contain multiple resolutions (e.g. 16×16, 32×32, 48×48), so the browser picks the right one. PNG favicons are one size per file. Modern browsers support both; .ico is still preferred for broad compatibility and one-file convenience.

How do I add these to my site?

Place the files in your site root (or /public). Add the HTML link tags to your layout or index.html head. For PWA, reference manifest.json. For Windows tiles, use browserconfig.xml.

Explore these related free tools to enhance your productivity and workflow.

Image Resizer

Resize images to specific dimensions while maintaining quality

Image Converter

Convert between JPG, PNG, WebP, GIF, and other image formats

SVG to PNG Converter

Convert SVG files to PNG format with custom sizes, backgrounds, and DPI scaling

Box Shadow Generator

Generate CSS box shadows with custom offsets, blur, spread, color, and opacity

Generator