Favicon & App Icon Generator

Modern browsers, iOS home screens, Android PWAs, and Google Search snippets each expect a different icon size - from a classic 16×16 tab icon to a 180×180 Apple Touch Icon and 512×512 web app manifest graphic. This browser-based favicon generator lets you upload a logo image or design a monogram icon from text and brand colors, preview how it looks in light and dark browser tabs, and download a complete ZIP bundle with favicon.ico, all PNG sizes, site.webmanifest, and the <head> HTML tags.

Why a single favicon.ico file is no longer enough

Ten years ago, dropping a single 16×16 favicon.ico file into your website's root folder was the entire checklist. Today, a website's icon appears across half a dozen high-DPI surfaces, and missing any of them leaves your site showing a generic globe placeholder or a blurry pixelated square:

• Desktop Retina browser tabs (32×32 and 16×16 PNG / ICO): Standard and 2x high-DPI desktop tabs in Chrome, Safari, Firefox, and Edge.
• Google Search mobile & desktop results (48×48 multiples / 192×192): Google's search crawler specifically requires favicons that are multiples of 48px square (or scalable) to display beside your site title in SERPs.
• iPhone and iPad Home Screen bookmarks (180×180 apple-touch-icon.png): When an iOS user adds your web app to their home screen, Safari looks for a dedicated 180×180 non-transparent icon.
• Android Chrome & PWA Install Prompts (192×192 and 512×512): Referenced inside site.webmanifest for home screen icons and progressive web app splash screens.

Generating your complete favicon kit step by step

1. Choose Image Mode or Text/Monogram Mode: Upload an existing square logo (.png, .svg, .jpg, .webp) OR switch to Text Mode to type 1–3 initials, pick a font family, and set foreground and background colors.
2. Customize padding, background, and corner radius: Adjust the icon border radius (Square 0%, Rounded App Icon 20%, or Circle 50%), inner padding, and solid or transparent background fill.
3. Check the live browser tab preview: Inspect how your icon renders at tiny 16×16 scale against both a light browser tab bar and a dark mode browser tab bar.
4. Download the ZIP bundle: Click Download Favicon Package (.zip) to get favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest.
5. Copy the HTML <head> snippet: Click Copy HTML and paste the <link rel="icon" ...> tags into your site's index.html or layout template.

Features that save twenty minutes in Figma or Photoshop

Built-in monogram and text icon designer

When you are launching a side project, documentation site, or internal dashboard, you rarely have a dedicated illustrator on standby. Typing two initials (like ST), picking a bold geometric typeface, setting a brand hex background, and rounding the corners to 22% produces a crisp, legible app icon in fifteen seconds.

Multi-size high-precision canvas resampling

Scaling a 512×512 logo down to 16×16 in one step can leave thin strokes looking faint. The generator renders each target dimension (16, 32, 48, 180, 192, 512) cleanly on dedicated high-quality HTML5 canvases and packages a binary .ico file alongside the standard PNGs.

Dark-mode tab legibility preview

The #1 favicon mistake is exporting a pure black transparent logo (#111111) that looks great in a light-mode Chrome tab and completely disappears into a dark grey (#202124) dark-mode tab. The live preview shows both tab themes side by side so you can add a subtle background pill or light border before exporting.

A real example: shipping icons for a Next.js / Vite web app

Suppose you are deploying a new developer tool called PulseLog and have a transparent SVG mark (pulselog-mark.svg) in brand blue #2563EB.

1. Drop pulselog-mark.svg into the Favicon Generator.
2. In the dark-mode tab preview, you notice the blue mark is slightly dim against a dark tab bar, so you enable a solid #0F172A rounded-square background (20% radius) with 15% inner padding.
3. Click Download Favicon Package (.zip) and extract the files into your project's public/ directory.
4. Copy the generated <link> block:

   <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" />

1. Every desktop browser, iOS bookmark, and Android PWA install prompt now loads the exact resolution it expects.

Practical tips and limitations

• Keep detail minimal at 16×16: Never put full words or intricate illustrations inside a favicon. At 16×16 pixels, anything smaller than a single bold letter or simple geometric symbol turns into an unreadable smudge.
• Avoid transparency on apple-touch-icon.png: iOS automatically fills transparent areas of home-screen icons with solid black. Always use a solid background fill or let the generator apply a background color for your 180×180 touch icon.

Privacy and local execution

Your brand logos, custom fonts, and manifest settings are processed 100% locally inside your browser using HTML5 Canvas and JSZip. Zero network calls or file uploads occur.

Essential <head> icon files and what each platform reads

Every operating system and browser family looks for a slightly different icon declaration when rendering tabs, bookmarks, and home-screen tiles:

• /favicon.ico (16×16 & 32×32): Legacy fallback automatically requested by desktop browsers, RSS readers, and web crawlers even when no <link> tag is present in the HTML.
• /favicon-32x32.png & /favicon-16x16.png: Modern PNG tab icons declared via <link rel="icon" type="image/png" sizes="32x32">, offering full 8-bit alpha channel smoothness.
• /apple-touch-icon.png (180×180): Loaded by iOS Safari on iPhone and iPad whenever a user taps Share → Add to Home Screen or saves a Favorites tile.
• /android-chrome-192x192.png & /android-chrome-512x512.png: Referenced inside site.webmanifest so Android Chrome and desktop progressive web app (PWA) installers can render crisp launcher icons and splash screens.

Related tools

Need to pick an accessible brand color for your icon background? Use the Online Color Picker or sample hues from an existing photo with Color Palette Extractor. If your source logo has a white box behind it, strip it first with Background Remover. Read our complete walkthrough on how to use the favicon generator.