Skip to content
TechnologyTools

Image Tools

Favicon Generator

Turn any image or logo into standard multi-resolution PNG favicons, Apple Touch Icons, and web manifests with ready-to-paste HTML code.

100% Client-Side Generation: All favicon resolutions and manifest configurations are generated locally in browser canvas memory without sending images to any server.

Upload your logo, square graphic, or icon

PNG, SVG, or JPG recommended (at least 512x512 px for best quality)

HTML <head> Integration Snippet

Copy and paste directly into your HTML document <head> section:

<!-- Standard Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon (iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android & PWA Manifest -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Web App Manifest (site.webmanifest)

Save as site.webmanifest in your public root directory:

{
  "name": "My Web Application",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone"
}

The Sizes That Actually Get Requested

  • 32×32 and 16×16 ICO: the classic favicon; browsers request /favicon.ico even when a manifest exists.
  • 180×180: Apple touch icon — iOS ignores small sizes and does not honor transparency well, so provide a solid-background version.
  • 192×192 and 512×512: the Android/Chrome manifest icons; the 512 is also what most install prompts show.
  • Design for 16 pixels first: a mark that survives 16×16 reads at every larger size; one designed at 512 usually turns to noise at tab size.

The Icon Files a Site Actually Needs

Browsers ask for a few specific sizes: 16 and 32 pixels for tabs, 180 pixels for the Apple touch icon, and 192 and 512 pixels for the web app manifest used by Android. One square source image of at least 512 pixels lets every size be produced without blurry upscaling.

Design for the smallest size first. Detail that looks good at 512 pixels turns into mush at 16, so use a simple shape, strong contrast and little or no text. Place the generated files in the site root or reference them from the head with the supplied link tags, then test by hard-refreshing, because browsers cache favicons for a surprisingly long time.

How the Processing Works

  1. Load a square logo or image. A 512×512 or larger source produces the sharpest small sizes.
  2. Choose which sizes to generate: 16×16, 32×32, 48×48 for browsers, plus 192×192 and 512×512 for PWA manifest icons.
  3. Add the 180×180 Apple Touch Icon size for iOS home-screen bookmarks if you are building a PWA or mobile site.
  4. Download the generated icons and copy the ready-made <link> tags or manifest snippet directly into your HTML <head>.

Typical Use

Favicons for a website
Input: logo-512.png → sizes 16, 32, 48
Output: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png + HTML
These three sizes cover Chrome, Firefox, Edge, and Safari tab bars. The generated HTML references each one with the correct link rel attributes.
PWA manifest icons
Input: app-icon-1024.png → sizes 192, 512
Output: icon-192.png, icon-512.png + manifest snippet
Progressive Web Apps require 192×192 and 512×512 icons in the manifest for installability. The generated snippet is ready to paste into your webmanifest.

Common Questions

Why multiple favicon sizes?

Different contexts request different sizes: browser tabs use 16–32 px, bookmarks up to 48 px, iOS home screens 180 px, and PWA install icons 192–512 px. Providing the right size avoids blurry scaling.

Does this work with transparent logos?

Yes. PNG output preserves the alpha channel, which is why PNG is recommended over ICO for most modern sites.

Is my logo uploaded?

No. Every size is rendered client-side using canvas scaling, so your logo stays on your device.

Image Toolspopular

Image Resizer

Set exact image dimensions with a ratio lock and export a resized copy without uploading your image.

Image Toolspopular

Image Format Converter

Convert common raster images locally to JPG, PNG, or WebP and download the new format.

Creator Toolspopular

Social Media Image Resizer

Resize and crop images to exact dimensions for Instagram, TikTok, YouTube, X, Facebook, LinkedIn, Pinterest, and Twitch locally in your browser.