ToolsGiver

Design

Favicon Generator

Text, emoji or image → complete favicon package. ICO + all PNGs + SVG dark mode + manifest + HTML snippet.

Up to 3 characters · initials work best

SquareRoundedCircle

Live Preview

16×16
32×32
64×64
128px
256px

Browser Tabs

Chrome
My App
Firefox
My App
Safari
My App

Home Screen

iOS
My App
Android
My App

Platform Coverage

✓
Desktop Browsers
Chrome · Firefox · Edge · Opera
✓
Safari Desktop
macOS · 16×16 / 32×32 PNG
✓
iOS Safari
Apple Touch Icon 180×180
✓
Android Chrome
192×192 + 512×512 via manifest
✓
PWA Install
site.webmanifest included
✓
Dark Mode SVG
prefers-color-scheme auto

Download Package

9 files: favicon.ico · 16×16 · 32×32 · 48×48 PNG · apple-touch-icon · android-192 · android-512 · favicon.svg · site.webmanifest

HTML Snippet

<!-- Paste inside <head> -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#6366f1">

site.webmanifest

{
  "name": "My App",
  "short_name": "My App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#6366f1",
  "background_color": "#6366f1",
  "display": "standalone",
  "start_url": "/"
}

SVG Favicon

Auto dark mode via prefers-color-scheme

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .light { display: block }  .dark { display: none }
    @media (prefers-color-scheme: dark) { .light { display: none } .dark { display: block } }
  </style>
  <g class="light"><defs><linearGradient id="gl" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#6366f1"/>
          <stop offset="100%" stop-color="#8b5cf6"/>
        </linearGradient></defs>
        <rect width="100" height="100" rx="10" fill="url(#gl)"/><text x="50" y="50" font-family="Inter,sans-serif" font-weight="bold" font-size="48" fill="#ffffff" text-anchor="middle" dominant-baseline="central">A</text></g>
  <g class="dark"><defs><linearGradient id="gd" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#8b5cf6"/>
          <stop offset="100%" stop-color="#6366f1"/>
        </linearGradient></defs>
        <rect width="100" height="100" rx="10" fill="url(#gd)"/><text x="50" y="50" font-family="Inter,sans-serif" font-weight="bold" font-size="48" fill="#ffffff" text-anchor="middle" dominant-baseline="central">A</text></g>
</svg>

Framework Install Guide

1. Extract ZIP → copy all files to your site root
2. Paste in <head>:

<!-- Paste inside <head> -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#6366f1">

How to Install

1
Download ZIP
Click 'Download All Files' above to get the complete 9-file favicon package.
2
Copy files to root
Extract and copy all files to your website root folder (same level as index.html or /public).
3
Paste HTML snippet
Copy the HTML snippet and paste it inside your <head> tag. All platforms are now covered.

Overview

What this tool does

A favicon is the small icon that shows in browser tabs, bookmark lists, the home screen of a phone, and the address bar of every browser. A real favicon set is more than one PNG: it includes a Windows ICO file, a PWA manifest, an Apple Touch Icon, multiple PNG sizes for different display densities, and ideally a dark-mode SVG. This generator builds the whole package from a single source: a piece of text (an emoji or letter), an emoji on its own, or an uploaded image. The output is a ZIP containing every file you need plus the exact HTML snippet to paste into your <head>. Useful for any web project that wants to look polished in every browser and operating system without manually generating eleven different files.

How to

Use it in 3 steps

  1. Pick a source: text or emoji (good for solo projects), or upload an image.
  2. If you're using text, pick a font, color, and background. The preview updates live.
  3. Click generate. The tool renders every size and packages them into a ZIP.
  4. Download the ZIP. Unzip it into your site's root (or public folder).
  5. Paste the HTML snippet into your <head>. The snippet covers every browser and platform.

FAQ

Frequently asked questions

▶What files are included in the ZIP?

favicon.ico (Windows + legacy browsers), favicon-16, favicon-32, favicon-48, favicon-96, apple-touch-icon (180px for iOS home screen), android-chrome PNGs (192 and 512), a site.webmanifest for PWAs, an optional SVG with dark-mode support, and a ready-to-paste HTML snippet.

▶Where do I put the files?

Drop them in your site's public root (so they are served from /favicon.ico, /apple-touch-icon.png, etc.). Paste the HTML snippet into the <head> of every page.

▶Does the dark-mode SVG work in every browser?

Modern browsers (Chrome, Safari, Firefox, Edge) respect the prefers-color-scheme media query inside the SVG. Older browsers fall back to the PNG, so you lose nothing by including it.

▶Can I regenerate later?

Yes. Open the tool, pick the same source, and download a fresh ZIP. Nothing is stored on a server.

Related

You might also like

Color Palette Generator

8 harmony modes · image extraction · WCAG contrast checker · CSS/Tailwind/JSON export · 60 trending palettes.

design