---
title: "Favicon Generator — SVG, PNG, ICO & PWA Icons"
description: "Free favicon generator for SVG, PNG, ICO, and PWA icons. Create from text, emoji, image, or SVG with dark mode support. Runs locally in your browser."
url: https://favicongenerator.io/
---

Modern Favicon Generator

# Generate SVG, PNG, ICO & PWA Icons in Seconds

Create a complete favicon set from text, emoji, images, or SVG. Includes SVG, ICO, Apple Touch, PWA icons, and a 96×96 PNG fallback. Runs locally in your browser with dark mode support.

### Installation

First, use the download button to download the files listed below. Place the files in the root directory of your website.

- favicon.svg
- favicon.ico (contains 16×16 + 32×32)
- favicon-96x96.png (96×96)
- apple-touch-icon.png (180×180)
- icon-192.png
- icon-512.png
- site.webmanifest
- favicon-code.html (optional)

Next, click **Copy HTML** (or copy from the HTML Snippet box above) and paste it into the `<head>` of your HTML.

Need help? Read the [tutorials](https://favicongenerator.io/tutorials) for framework-specific install notes.

## Modern favicon best practices

Modern favicon setup is simple: use SVG as the primary icon, add PNG/ICO fallbacks, and include Apple Touch + PWA icons. This generator outputs the full set in one download.

SVG keeps icons crisp at any size, while PNG/ICO provide compatibility and reliable rendering in search results and legacy contexts. Keep files lightweight and use high-contrast shapes for small sizes.

### Why this setup works

- **Scales cleanly** from 16×16 to 512×512
- **Compatible** with modern browsers and fallbacks
- **Dark mode ready** with light/dark colors
- **Search-result friendly** with a 96×96 PNG
- **Lightweight** assets for fast load

**Browser support (modern browsers)**

| Browser | SVG Support | Dark Mode | Recommended Format |
| --- | --- | --- | --- |
| Chrome / Edge (modern) | ✅ Full | ✅ Yes | SVG + PNG fallback |
| Firefox (modern) | ✅ Full | ✅ Yes | SVG + PNG fallback |
| Safari (recent) | ✅ Good | ⚠️ Limited | SVG + PNG fallback |
| Legacy / embedded | ⚠️ Limited | — | ICO or PNG |

## Recommended favicon file set

This file set works across modern frameworks and static sites. Place it in your root or `/public` folder and use the generated HTML snippet.

### Perfect File Structure

```
/public
  ├── favicon.svg              # Primary icon (modern browsers)
  ├── favicon.ico              # Fallback (IE/Safari/Shopify/Webflow)
  ├── favicon-96x96.png        # Google SERP fallback (96×96)
  ├── apple-touch-icon.png     # 180×180 (iOS standard since iOS 8)
  ├── icon-192.png             # 192×192 (Android/PWA)
  ├── icon-512.png             # 512×512 (PWA splash screens + WordPress Site Icon)
  └── site.webmanifest         # PWA configuration
```

**Essential Favicon Sizes (Priority Order)**

| Size | Purpose | Priority | Notes |
| --- | --- | --- | --- |
| SVG | Modern browsers, scalable, dark mode | High | Keep lightweight |
| 16×16 | Browser tabs, bookmarks | High | Keep lightweight |
| 32×32 | Retina tabs, Windows taskbar | High | Keep lightweight |
| 96×96 | Search results / fallback | Recommended | Keep lightweight |
| 180×180 | Apple touch icon (iOS/iPadOS) | High | Keep lightweight |
| 192×192 | Android home screen, PWA | High | Keep lightweight |
| 512×512 | PWA splash screens + WordPress Site Icon | High | Keep lightweight |

### Platform support guide

Different platforms have slightly different requirements. Use this quick guide to pick the right file and placement.

**Platform-Specific Favicon Requirements**

| Platform | Required Files | Upload Method | Notes |
| --- | --- | --- | --- |
| **WordPress** | icon-512.png | Settings → Site Icon | Upload the 512×512 PNG. WordPress generates the rest. |
| **Webflow** | favicon.ico + icon-512.png | Project Settings → Favicon | Upload ICO for browsers, PNG for dashboard display |
| **Wix** | Any square PNG | Site Settings → Favicon | Wix converts uploads. Use a square PNG for best quality |
| **Shopify** | favicon.ico | Online Store → Themes → Customize | Use favicon.ico for broad compatibility |
| **Squarespace** | Any square PNG | Design → Browser Icon | Upload a square PNG; Squarespace converts |
| **Next.js / React** | All files from ZIP | Drop in /app or /public | Place files in /app or /public. Add the HTML snippet when needed |
| **Static HTML** | All files from ZIP | Copy files + paste HTML snippet | Use the HTML snippet from the download for compatibility |
| **PWA (Progressive Web App)** | icon-192.png + icon-512.png + site.webmanifest | Root directory + manifest link | Include the manifest and both icon sizes |

#### Platform Pro Tips:

- **WordPress:** Upload icon-512.png in Site Icon.
- **Webflow:** Add favicon.ico plus a 256×256 PNG for dashboard previews.
- **Shopify:** Use favicon.ico for best compatibility.
- **Custom HTML:** Paste the snippet and use absolute paths.
- **PWA:** Keep 192×192 and 512×512 icons in the manifest.

### Next.js / React quick setup

For Next.js (App Router), place files in `/app` or `/public` . For Vite/React, place files in `/public` and add the HTML snippet to `index.html` .

#### Next.js Quick Start:

1. Download the ZIP from this Favicon Generator
2. Place files in `/app` or `/public`
3. Add the snippet if your setup does not auto-detect icons

#### Next.js App Router (metadata):

```
import type { Metadata } from 'next';

export const metadata: Metadata = {
  manifest: '/site.webmanifest',
  icons: {
    icon: [
      { url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96' },
      { url: '/icon-192.png', type: 'image/png', sizes: '192x192' },
      { url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' },
    ],
    shortcut: '/favicon.ico',
    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
  },
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0f172a' },
  ],
};
```

#### Vite/React Projects:

1. Place all favicon files in `/public` directory
2. Use absolute paths: `/favicon.svg` not `./favicon.svg`
3. Copy the HTML snippet from this generator into `index.html`

#### PWA Requirements:

Installable PWAs expect both 192×192 and 512×512 icons in the manifest. This generator includes both.

## Dark mode-ready icons

Dark mode is common across browsers and OS themes. Provide light and dark colors so your favicon stays readable in tabs, bookmarks, and search results.

The SVG output can include light/dark styles via CSS media queries, and the HTML snippet sets theme-color for each mode.

### Dark mode tips

- **Use high contrast** at 16×16 and 32×32 sizes.
- **Test both themes** in your browser.
- **Keep shapes simple** for clarity at small sizes.

### AI & CLI Automation

AI tools can help you draft a simple SVG quickly. Generate a clean icon, then paste it into the SVG tab or code editor to produce the full favicon package.

#### AI Prompt Examples (Copy & Use These)

**For Claude Code / AI Agents:**

`"Use the Favicon Generator at [your-url] to create a complete favicon package. I need an SVG with dark mode support, colors #6366f1 (light) and #93c5fd (dark), letter 'A', Inter font, with all PNG sizes for Next.js deployment."`

**For Design Generation:**

`"Create a minimalist SVG icon representing [your concept], suitable for a 32×32 favicon, with bold shapes and high contrast. Output as optimized SVG code."`

**For CLI Automation:**

`npx sharp-cli input.png -o favicon-{size}.png --resize {size}` `curl -X POST https://your-favicon-api.com/generate \ -d '{"text":"A","colors":{"light":"#2563eb","dark":"#93c5fd"}}'`

If you already automate design assets, this generator can be the final packaging step for web-ready favicon files.

## Performance & SEO

Favicons do not directly change rankings, but they improve recognition in tabs, bookmarks, and search results. A clear, consistent icon helps users find your site quickly.

Keep assets lightweight and simple. Small, optimized files load fast and render crisply at tiny sizes.

### Performance checklist

- **Keep files small** so icons load instantly.
- **Use simple shapes** that remain clear at 16×16.
- **Ship only what you need** to avoid extra bytes.

**Tip:** SVG and PNG should be optimized. The generator outputs lightweight files by default.

### Helpful references

If you want to dive deeper, these resources cover favicon and PWA guidance:

- **W3C** - Web standards
- **MDN Web Docs** - Favicon and manifest docs
- **Next.js Docs** - App Router metadata
- **web.dev** - Performance and PWA guidance
- **WHATWG** - HTML specifications
- **Can I Use** - Browser compatibility

## Ready to ship?

Favicon setup should be quick. Use the generator above, download the ZIP, and drop the files into your project. The HTML snippet is ready to paste.

Need guidance for a specific platform? Check the tutorials for step-by-step instructions.

**Ready to create your favicon?** Scroll up and use the generator.

Markdown view of https://favicongenerator.io/. Favicon API, MCP server and agent docs: https://favicongenerator.io/developers