Generate Adaptive Favicons
Create favicons that automatically switch between light and dark mode. Generate from your own images or create custom text-based icons with Google Fonts. Plus PWA icons for iOS and Android.
Upload your own icons (SVG, PNG, or JPG) for light and dark modes. Perfect if you already have custom icon designs.
- ✓ Upload custom SVG, PNG, or JPG icons
- ✓ Separate designs for light and dark modes
- ✓ Automatic resizing and optimization
- ✓ Generates all required sizes (16px to 512px)
Create text-based favicons with any Google Font. Choose colors, shapes, and fonts to design your perfect icon from scratch.
- ✓ 1,800+ Google Fonts to choose from
- ✓ Custom colors for light and dark modes
- ✓ Multiple background shapes (square, rounded, circle)
- ✓ Auto-resize text to fit perfectly
Turn any emoji into a polished favicon. Choose from Twemoji, OpenMoji, Blobmoji, Noto, Fluent, and Fluent Flat artwork styles.
- ✓ 6 emoji artwork styles to choose from
- ✓ Custom background colors for light and dark modes
- ✓ Multiple background shapes (square, rounded, circle)
- ✓ Full searchable emoji picker
More Tools
Additional utilities to audit and verify your existing favicon setup.
Verify that your website's favicons are correctly configured across all platforms and browsers.
- ✓ Checks favicon.ico, PNG icons, Apple Touch Icon
- ✓ Verifies Web App Manifest 192x192 and 512x512 icons
- ✓ Detects SVG adaptive favicon support
- ✓ Shows a preview thumbnail of each found icon
What You Get
Every download includes a complete, production-ready favicon bundle, no extra steps required.
Adaptive SVG
Automatically switches between light and dark themes
All Sizes
16x16, 32x32, 48x48, 180x180, 192x192, 512x512
PWA Ready
iOS and Android home screen icons included
Privacy First
All processing happens in your browser
Frequently Asked Questions
Everything you need to know about adaptive favicons and how this tool works.
prefers-color-scheme media query
embedded directly in the SVG.prefers-color-scheme are supported in all modern browsers including Chrome, Edge, Firefox, and Safari (desktop).
For browsers that don't support SVG favicons, such as older versions of Safari and Internet
Explorer, the generated bundle includes a fallback favicon.ico and PNG icons that will be used automatically via the <link> tags.The downloaded ZIP bundle contains:
favicon.svg— Adaptive SVG favicon for modern browsersfavicon.ico— Legacy ICO fallback (16x16, 32x32, 48x48)apple-touch-icon.png— 180x180 icon for iOS home screenicon-192.png&icon-512.png— PWA icons for Androidsite.webmanifest— Web App Manifest for PWA supportindex.html— Ready-to-paste<head>snippet
- Download the ZIP and extract all files to the root of your website (e.g.
public/). - Copy the HTML snippet from the included
index.htmlor from the preview on the generator page. - Paste the snippet inside the
<head>section of your HTML. - Deploy and verify using the Check Favicons tool.
site.webmanifest file with references to the 192x192 and 512x512 PNG icons required by Android and Chrome. The apple-touch-icon.png (180x180) covers the iOS "Add to Home Screen" requirement. Just link the manifest in your <head> and you're PWA-ready.