Favicon Generator

Create favicons from text, emoji, or images — generates ICO, PNG, and all required Apple Touch icon sizes.

Last updated: March 25, 2026

Browser Preview

New Tab

Text (1-2 chars)

Font Family

Text Color

Background

Shape

Size/Scale: 60%

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

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

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

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

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

Click "Generate Favicons" to produce all required output sizes

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

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.

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