Favicon Generator
Generate a real multi-resolution favicon.ico, PNGs for every platform, an SVG with dark-mode support, and site.webmanifest. 100% in your browser.
What is a favicon?
A favicon is the small icon that represents a website in browser tabs, bookmarks, mobile home screens, and search results. Modern favicons are no longer a single 16×16 ICO file — browsers, iOS, Android, and PWAs each expect a specific size and format, and a complete set in 2026 includes a multi-resolution favicon.ico for legacy browsers, a 180×180 apple-touch-icon for iOS, 192×192 and 512×512 PNGs for Android Chrome and PWAs, an SVG with a dark-mode media query for modern browsers, and a site.webmanifest so Android can show your icon on the home screen with the right name and theme color. This tool generates the whole bundle in your browser — nothing is uploaded. Pair it with the QR code generator for quick marketing links, or the image compressor if you need to shrink the source image before uploading.
Text
1–4 characters
Font
Inter
Weight · 700
Color
#FFFFFF
Shape
Color
#6C63FF
Dark mode
Swap colors when the OS is in dark mode (Chromium + Firefox)
App name
Used in site.webmanifest
SVG favicon
Bundle: favicon.ico · 6 PNGs (16/32/96/180/192/512) · site.webmanifest · favicon.svg
Drop this in your <head>
Plain HTML
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">Preview
Browser tab
Your Site
Bookmark bar
Your Site
iOS home screen
Android home screen
Actual size · 16 / 32 / 48
How to use this tool
- 1Choose a source: text, image, or emojiPick the input mode that fits your brand. Text works great for initials, image lets you upload a logo, emoji is the fastest path to a unique favicon.
- 2Set a background shapeTransparent, solid color, rounded square (iOS-style), or circle. The same shape is applied to every output size so the favicon stays consistent.
- 3Check the live previewVerify how the favicon looks in a browser tab, on iOS and Android home screens, and at actual 16/32/48 pixels — most rendering problems show up at the smallest size.
- 4Download the bundleOne click produces a zip with favicon.ico, all PNG sizes, an SVG with dark-mode support, and site.webmanifest — everything you need to drop into /public.
- 5Paste the snippet into your <head>Pick your framework (plain HTML, Next.js, Astro, SvelteKit), copy the snippet, paste it inside the <head> of your layout. Done.