All SVG Icons LogoAll SVG Icons

Free Favicon Generator

Create favicons from text, emoji, SVG code, or uploaded images. Export in all sizes with ready-to-use HTML meta tags and web manifest.

Background

Preview

16px
32px
48px
64px
My Website — yoursite.com
Browser tab preview

Export

Use PNG for broad support, SVG for modern crisp scaling, ICO for legacy browser fallback.

HTML Meta Tags

Includes modern essentials plus optional legacy lines. Keep files in your public root.

markup
<!-- Bare minimum (modern) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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">
<meta name="theme-color" content="#f82a3f">

<!-- Legacy / platform extras -->
<meta name="msapplication-TileColor" content="#f82a3f">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f82a3f">

Must-have (minimum)

`/favicon.ico`, `16x16` + `32x32` PNG, `apple-touch-icon`, `theme-color`, and `site.webmanifest`.

Widely supported

ICO/PNG favicons and Apple touch icon are broadly supported across major browsers and devices.

Legacy / partial

`mask-icon` (Safari pinned tab) and `msapplication-TileColor` are optional for old platform-specific behavior.

site.webmanifest

Used by installable PWAs for home-screen icons, splash behavior, and app presentation.

json
{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "description": "Short site description",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#f82a3f",
  "background_color": "#f82a3f",
  "display": "standalone",
  "start_url": "/",
  "scope": "/"
}

Why Use a Favicon?

A favicon is the small icon displayed in browser tabs, bookmarks, and search results. It's a critical part of your site's identity — it helps users quickly identify your site among many open tabs and improves brand recognition. A well-designed favicon also signals professionalism and attention to detail.

Features

Text & Emoji Support

Create favicons from letters, numbers, or emoji with custom fonts and colors.

SVG Input

Paste SVG code directly — great for using icons from your existing packs.

Image Upload

Upload PNG, JPG, or SVG files to convert into favicons.

PNG, ICO & SVG Export

Download standard PNG sizes, legacy-friendly ICO, and SVG when available.

Meta Tags + Manifest

Copy syntax-highlighted HTML favicon tags and a production-ready site.webmanifest.

Live Preview

See your favicon at multiple sizes and in a browser tab mockup.

Favicon Tag Guide

Use the generator output directly in your <head>. The modern baseline is PNG + SVG + Apple touch icon + manifest + theme color. Add legacy extras only if you specifically need old Safari pinned tabs or older Microsoft tile behavior.

Bare Minimum (Must Have)

favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, site.webmanifest, and theme-color.

Widely Supported

ICO and PNG favicons are broadly supported across major desktop and mobile browsers. Apple touch icon is required for nice iOS home-screen behavior.

Legacy / Optional

mask-icon is Safari pinned-tab specific. msapplication-TileColor targets older Windows tile integrations.

Frequently Asked Questions