Favicon Generator
Create a favicon from text or emoji — get PNG previews in all required sizes.
1–2 characters or an emoji
Preview
256px
64px
32px
16px
on dark
Download
HTML Head Tags
Frequently Asked Questions
What sizes does a favicon need to be?▼
Modern best practice: 16×16px (browser tab), 32×32px (browser bookmark), 180×180px (Apple touch icon), 192×192px (Android), 512×512px (PWA splash). You can serve a single SVG favicon that scales perfectly: <link rel='icon' href='favicon.svg' type='image/svg+xml'>. As a fallback, include a 32×32 ICO file.
Should I use .ico or .png for my favicon?▼
.ico format is a container that can hold multiple sizes (16px, 32px, 48px) in one file. It's still needed for IE compatibility and some email clients. .png is simpler and widely supported. Modern best practice: serve favicon.svg as primary (scales perfectly), favicon.ico as fallback for old browsers.
How do I make a transparent favicon?▼
For transparent favicons, use PNG or SVG formats — ICO supports transparency but inconsistently across browsers. Transparent backgrounds work best when your favicon text/icon is visible on both light (white browser tab) and dark (dark mode) backgrounds.
What is an Apple Touch Icon?▼
The Apple Touch Icon is a 180×180px PNG used when users save your website to their iOS home screen. Without it, iOS captures a screenshot of the page. Add it with: <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. Android uses 192×192px and 512×512px icons for the same purpose.