WebToolsPlanet
Image Tools

Favicon Generator

Create favicon files and matching HTML tags for websites, apps, and prototypes. Generate browser icons, Apple Touch icons, and PNG sizes from text, emoji, or an uploaded image.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Favicon Generator?

A favicon (short for "favorites icon") is the small icon displayed next to your page title in browser tabs, bookmarks, browser history, and home screen shortcuts. It is one of the most immediately recognizable branding elements of a website — a well-designed favicon is immediately identifiable even at 16×16 pixels. Despite its small size, the favicon ecosystem is surprisingly complex: browsers, operating systems, and devices all request different file formats and sizes.

A complete favicon implementation requires: a 16×16 ICO file for legacy browser tab display, a 32×32 PNG for standard displays, a 192×192 PNG for Android home screen, and a 180×180 PNG for Apple Touch Icons (iOS home screen). Each must be declared with specific <link> tags in your HTML <head>. This tool handles all of it — you upload or design your icon, and it generates all required sizes and provides the exact HTML code to paste into your <head> element.

How to Use Favicon Generator

1

Choose your icon source type: Text (initials, letters), Emoji (🚀, ✅, 🎯), or Image (upload a PNG/SVG)

2

For Text/Emoji: customize the background color, text color, font weight, and border radius using the controls

3

Preview the icon at multiple sizes (16px, 32px, 64px) to verify readability at small sizes

4

Click "Generate Favicons" to produce all required output sizes

5

Download the favicon.ico file and the folder of PNG sizes, then copy the generated <link> HTML tags into your <head>

Common Use Cases

  • Creating an initial letter favicon (like "G" for Gmail) for a new web application in minutes
  • Adding a branded emoji favicon to a personal blog or portfolio site for personality
  • Converting an existing square SVG logo to all required favicon formats and sizes in one step
  • Generating a complete favicon package for a client project without needing Photoshop or Illustrator
  • Creating a high-contrast favicon that remains legible in browser dark mode
  • Quickly creating a placeholder favicon for a development site so the browser tab doesn't show the default globe icon
  • Generating the Apple Touch Icon for a Progressive Web App (PWA) that users can install to their home screen
  • Creating different colored favicon variants for staging vs production environments for easy environment identification

Example Input and Output

The HTML tags required for a complete modern favicon implementation:

What the tool generates
Icon: "WT" text on dark background
Sizes generated: 16×16, 32×32, 180×180, 192×192 px
Files: favicon.ico, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png
HTML you paste into your <head>
<!-- Paste these in your HTML <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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="manifest" href="/site.webmanifest">

How This Tool Works

Text or emoji icons are rendered into an off-screen HTML Canvas element. The configured background color is drawn as a rectangle, then the text is drawn centered using the Canvas 2D fillText() API. The resulting canvas is exported at each required size (16, 32, 180, 192 px) using canvas.toDataURL() and converted to downloadable Blob URLs. For ICO file generation, the 16×16 and 32×32 bitmaps are manually encoded into the ICO binary format (using a JavaScript ICO encoder). Uploaded images are drawn onto canvas at each output size using drawImage().

Technical Stack

HTML5 Canvas APICanvas.toDataURL()ICO binary encoderClient-side processing only

Client-Side Processing

All favicon generation uses the browser's Canvas API — your images and icon designs never leave your device. Nothing is uploaded to our servers.

Dark Mode Favicons

Modern browsers support media-sensitive favicons using the prefers-color-scheme media feature in the SVG. You can provide light and dark variants: <link rel="icon" href="favicon-dark.svg" media="(prefers-color-scheme: dark)">. This ensures your favicon stays visible against both light and dark browser chrome.

PWA Icon Sizes

For a Progressive Web App (PWA), you additionally need 512×512 and 384×384 icons declared in your webmanifest for Android app splash screens. Some badges and notifications also use 96×96 and 128×128 sizes. When building a PWA, add "purpose": "any maskable" to your icon entries so Android can apply the adaptive icon mask shape.

Frequently Asked Questions

What is the difference between favicon.ico and favicon.png?

favicon.ico is the original format — a Windows bitmap container that can hold multiple resolutions (16×16, 32×32, 48×48) in a single file. It is supported by all browsers, including old IE. favicon.png is a modern alternative — smaller file size, better color support, and supported by all modern browsers (Chrome, Firefox, Safari, Edge). Best practice is to provide both: a favicon.ico for legacy fallback and a 32×32 PNG for modern browsers.

What is an Apple Touch Icon?

When a user adds your website to the iOS home screen or "Saves to Reading List", iOS looks for the apple-touch-icon to display as the app icon. It must be a 180×180 px PNG. If not provided, iOS takes a screenshot of the page instead, which looks terrible. Always include a <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> in your <head>.

Why is my favicon not updating after I replace the file?

Browsers aggressively cache favicons — sometimes for days. To force-refresh: (1) Hard reload the page (Ctrl+Shift+R). (2) Open the favicon URL directly (e.g. /favicon.ico) and hard-reload it. (3) Clear browser cache. (4) In production, use cache-busting: append a query string ?v=2 to the favicon URL in your HTML. In development, use a Chrome incognito window to see the new favicon immediately.

What is site.webmanifest and do I need it?

site.webmanifest is a JSON file that describes your web application for browsers and Android devices. It specifies the app name, icon paths, theme color, and display mode (standalone, fullscreen). It is required to enable "Add to Home Screen" functionality on Android Chrome. Provide a minimal webmanifest with your favicon package for best cross-platform support.

What format should I use for my source image?

SVG is ideal — it is resolution-independent and will produce crystal-sharp results at all output sizes. Square PNG (512×512 or 1024×1024) is the best raster fallback. Avoid rectangular images — they will be cropped or letterboxed. The favicon space is always square. Ensure your design has enough contrast at small sizes; fine details disappear entirely at 16×16

What is the minimum size for a readable text favicon?

At 16×16 pixels (the smallest browser tab size), you can typically fit 1 or 2 characters with minimal visual detail. Single letters, simple symbols, or bold emoji work best. Avoid thin strokes, small text, or complex shapes — they become illegible blurs. This is why most major brands use a simplified version of their logo (just the first letter or a single icon) rather than their full wordmark.

Image Workflow

Compress, convert, resize, crop, and prepare assets for websites and social platforms in one pass.

Image Compressor
Reduce image file size online — compress JPEG, PNG, and WebP without losing visible quality.
Image Converter
Convert images between PNG, JPG, WebP, and AVIF formats — with quality controls and batch conversion.
Image Cropper
Crop, rotate, and resize images with preset aspect ratios — all locally in your browser with no quality loss.
Image Filters
Apply CSS-based photo filters — brightness, contrast, saturation, blur, hue rotate, grayscale — and download the result.
Image Resizer
Resize images to exact pixel dimensions or percentages, with aspect ratio lock, in your browser.
Instagram Post Generator
Create realistic Instagram post mockups for presentations, concept proofs, and social media planning.
Tweet to Image Converter
Convert tweet text to a beautifully designed image card — share quotes, testimonials, and posts on Instagram, LinkedIn, and Pinterest.

Related Tools

Part of Collections

Posts for This Tool

Broader workflow content that links this tool back into the wider cluster.

All posts
QR code with logo feature image
generator

How to Add a Logo to a QR Code Without Breaking It

A guide to creating branded QR codes with a logo in the center while keeping them scannable. Covers error correction, logo size limits, contrast rules, and testing checklist.

5 min read