Favicon & app icon generator
Create a complete favicon package - ICO, PNGs, Apple touch icon, web manifest, and HTML snippet - from text, an emoji, or an image. All in your browser.
Design your favicon
Preview
64px
32px
Includes favicon.ico, PNGs (16-512px), apple-touch-icon, web manifest, and an HTML snippet. Generated in your browser - your image never leaves your device.
HTML snippet
<link rel="icon" href="/favicon.ico" sizes="any" /> <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" />
Launching a new site?
A favicon is one box on the launch checklist. We build complete, production-ready websites - fast. Bring us your idea.
Talk to an engineerQuick answer: A favicon is the small icon shown in browser tabs, bookmarks, and home-screen shortcuts. A complete set needs favicon.ico, 16x16 and 32x32 PNGs, a 180x180 Apple touch icon, and 192x192 plus 512x512 PNGs in a web manifest. This generator creates all of them from text, an emoji, or an image and bundles them in a ZIP with a copy-ready HTML snippet.
Favicon files and where each is used
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16/32/48 | Legacy browsers, default /favicon.ico requests |
| favicon-32x32.png | 32x32 | Modern browser tabs |
| apple-touch-icon.png | 180x180 | iOS home screen |
| favicon-192x192.png | 192x192 | Android / PWA |
| favicon-512x512.png | 512x512 | PWA splash / install |
How to add a favicon to your website
Adding a favicon is a five-minute job once you have the files. Use the generator above for the icons, then follow these steps:
- Create the icons. Enter text, an emoji, or upload a logo, pick your colors and shape, and generate the full set.
- Download the package. You get
favicon.ico, PNGs from 16x16 to 512x512, an Apple touch icon, and a web manifest in one ZIP. - Upload the files to your site's root or
public/folder so they're served from the domain root. - Add the HTML snippet (below) to the
<head>of every page. - Hard-refresh and verify the icon shows in the tab and on a mobile home-screen shortcut.
The HTML snippet
A modern, complete favicon reference looks like this (the generator gives you a copy-ready version):
<link rel="icon" href="/favicon.ico" sizes="any"> <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">
Why favicons matter
A favicon is a small file with an outsized impact. It's the icon a visitor sees in their browser tab, their bookmarks bar, their history, and on their phone's home screen if they save your site. When someone has a dozen tabs open, a distinctive favicon is how they find yours - missing one leaves a generic globe or blank page that reads as unfinished or untrustworthy.
Favicons also feed search and AI: Google shows favicons next to results on mobile, so a clean icon improves your visual presence in the SERP. And for any site that wants to be installable as a Progressive Web App, the 192px and 512px manifest icons are required - they become the app icon and splash screen. In short, the favicon is a tiny, cheap branding and trust signal that's surprisingly easy to get wrong or skip entirely.
ICO vs PNG vs SVG favicons
- ICO is the legacy format requested by default at
/favicon.ico. It can bundle multiple sizes and guarantees the widest compatibility, so it's still worth including. - PNG is what modern browsers use for crisp tab icons (16/32px) and for the Apple touch and manifest icons (180/192/512px).
- SVG favicons scale perfectly and can adapt to dark mode, but support isn't universal - use SVG as a progressive enhancement on top of ICO/PNG, not a replacement.
The practical answer in 2026: ship ICO + PNG (and optionally SVG). This generator handles the ICO and PNG set for you.
Common favicon mistakes
- Only a 16x16 icon. It looks blurry on retina displays and home screens. Ship the full size range.
- Too much detail. A full logo with text turns to mush at 16px. Use a simple mark, initials, or a single glyph.
- Missing Apple touch icon. iOS shows a zoomed-in screenshot instead of your brand when users save your site.
- Wrong location or caching. Files must be reachable from the root; browsers cache favicons hard, so hard-refresh when testing.
Frequently asked questions
- What files do I need for a favicon in 2026?
- favicon.ico, 16x16 and 32x32 PNGs, a 180x180 Apple touch icon, and 192/512px PNGs in a web manifest. This tool generates all of them.
- Do I still need favicon.ico?
- Yes - browsers and crawlers request /favicon.ico by default, and ICO bundles multiple sizes. Modern browsers also accept PNG/SVG.
- What size is an Apple touch icon?
- 180x180px. iOS uses it for home-screen shortcuts.
- Can I make one from text or emoji?
- Yes - enter 1-3 characters, pick colors and a shape, and download crisp icons at every size.
- Is my image uploaded anywhere?
- No - everything is generated in your browser with Canvas. Your image never leaves your device.
Related tools
Related free tools
Keep going with these tools
Business Name Generator
Generate brandable name ideas instantly
Business Name & Domain Checker
Check if your business name is available
Website Launch Checklist
Score your launch readiness in minutes
Privacy Policy & Terms Generator
Generate launch-ready legal docs in minutes
CSS Gradient Generator
Linear, radial & conic gradients
Color Palette Generator
Build a palette from any image
Want a team to handle it for you? We design and build fast, SEO-ready websites that convert. Explore AI web development.
Related guides
Go deeper with our guides
Practical, up-to-date guides on the strategy, costs, and execution behind this tool.
Small Business Website Guide 2026: Plan, Build, Launch
How SMBs can plan, build, and launch a professional website: scope, realistic costs, features, and maintenance.
UX Design Principles for Small Business Websites
UX principles that drive revenue: navigation, forms, mobile patterns, accessibility, and a full audit checklist.
Ready to ship your next product?
Tell us what you're building. Senior engineers will scope, plan, and start delivering your product with production-ready architecture - fast.