Icon Generator Free Online Tool 2026

Last updated March 22, 2026

Favicon Package — All Required Sizes

The Icon Generator creates all favicon sizes from a single source image. Here is the complete set of files generated and the HTML to reference them:

/* Generated favicon files */
favicon.ico          (16x16, 32x32, 48x48 — multi-size ICO)
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
apple-touch-icon.png (180x180 — iOS home screen)
android-chrome-192x192.png
android-chrome-512x512.png
mstile-150x150.png   (Windows Start menu tile)
safari-pinned-tab.svg (Safari pinned tab)

/* HTML head tags to include */
<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">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#1a73e8">
<meta name="theme-color" content="#1a73e8">

Web App Manifest for PWA Icons

Progressive Web Apps require a manifest.json with icon entries. The generator creates this file automatically:

/* site.webmanifest (generated) */
{
  "name": "My Application",
  "short_name": "MyApp",
  "description": "My web application description",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

iOS App Icon Sizes

iOS requires icons in many specific sizes for different device types and contexts:

/* iOS icon sizes (points × scale = pixels) */
App Store:        1024×1024px  (required for submission)
iPhone @3x:       180×180px    (60pt × 3 — iPhone 6 Plus and newer)
iPhone @2x:       120×120px    (60pt × 2 — older iPhones)
iPad Pro @2x:     167×167px    (83.5pt × 2)
iPad @2x:         152×152px    (76pt × 2)
Spotlight @3x:    120×120px    (40pt × 3)
Spotlight @2x:    80×80px      (40pt × 2)
Settings @3x:     87×87px      (29pt × 3)
Settings @2x:     58×58px      (29pt × 2)
Notification @3x: 60×60px      (20pt × 3)
Notification @2x: 40×40px      (20pt × 2)

/* iOS icons must NOT have transparency */
/* The generator automatically fills transparent areas with white */

/* Xcode Assets.xcassets naming convention */
AppIcon-20@2x.png    → 40×40px
AppIcon-20@3x.png    → 60×60px
AppIcon-29@2x.png    → 58×58px
AppIcon-60@2x.png    → 120×120px
AppIcon-60@3x.png    → 180×180px
AppIcon-1024.png     → 1024×1024px

Android App Icon Sizes

Android requires icons in multiple density buckets for different screen densities:

/* Android launcher icon sizes */
Density    Size      DPI    Folder
---------  --------  -----  ---------------------------
mdpi       48×48px   160    res/mipmap-mdpi/
hdpi       72×72px   240    res/mipmap-hdpi/
xhdpi      96×96px   320    res/mipmap-xhdpi/
xxhdpi     144×144px 480    res/mipmap-xxhdpi/
xxxhdpi    192×192px 640    res/mipmap-xxxhdpi/
Play Store 512×512px  —     (upload separately)

/* Adaptive icon (Android 8.0+) */
/* Requires separate foreground and background layers */
/* Each layer: 108×108dp (safe zone: 72×72dp center) */

res/mipmap-anydpi-v26/ic_launcher.xml:
<adaptive-icon>
  <background android:drawable="@drawable/ic_launcher_background"/>
  <foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

/* Google Play Store requirements */
Feature graphic: 1024×500px (JPEG or PNG)
App icon:        512×512px  (PNG, max 1MB)
Screenshots:     min 320px on shortest side

Windows Tile Configuration

The generator creates the browserconfig.xml for Windows Start menu tiles:

/* browserconfig.xml (generated) */
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#1a73e8</TileColor>
    </tile>
  </msapplication>
</browserconfig>

/* HTML meta tag to reference it */
<meta name="msapplication-config" content="/browserconfig.xml">

/* Windows tile sizes */
Small tile:  70×70px
Medium tile: 150×150px
Wide tile:   310×150px
Large tile:  310×310px

Source Image Requirements

For best results, your source image should meet these requirements before uploading to the generator:

/* Recommended source image specs */
Minimum size:  512×512px (1024×1024px recommended)
Format:        PNG with transparency (preferred) or SVG
Shape:         Square (1:1 aspect ratio)
Color space:   sRGB
Background:    Transparent or solid color

/* Design guidelines */
Safe zone:     Keep important content within center 80%
               (outer 10% may be cropped on some platforms)

iOS:           No transparency — use solid background
               Rounded corners applied automatically by iOS

Android:       Use adaptive icon format for Android 8+
               Keep content within 72dp safe zone

Favicon:       Must be recognizable at 16×16px
               Simple shapes and high contrast work best

/* What NOT to do */
✗ Text that's too small to read at 16×16px
✗ Thin lines that disappear at small sizes
✗ Complex gradients that look muddy when scaled down
✗ Rectangular source images (will be cropped to square)