Free Favicon Generator
Create all the favicon sizes your website needs from a single source image or emoji. Upload a PNG, JPG, or SVG, or simply type an emoji or text initials. Instantly preview every size from 16×16 to 512×512, adjust background color and corner rounding, then download as individual PNGs or a single ZIP bundle. Includes a ready-to-use site.webmanifest.
Source
Type up to 2 characters or an emoji
Appearance
Preview — click any size to download
HTML to add to your <head>
<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">
Frequently Asked Questions
What favicon sizes do I need?+
At minimum: 16×16 and 32×32 (browser tab), 180×180 (Apple Touch Icon for iOS), 192×192 and 512×512 (Android/PWA). A 48×48 for Windows tiles and 96×96 for Google TV are also recommended. This tool generates all of them at once.
What is a site.webmanifest?+
The site.webmanifest (also called manifest.json) tells Android/Chrome browsers how to display your site when added to the home screen. It references your icon sizes and app name. The generated manifest includes references to the 192×192 and 512×512 icons this tool generates.
What source image should I use?+
Use a square image with a transparent or solid background. SVG files scale perfectly at all sizes. PNG is the best raster format. Your source should be at least 512×512 pixels for best quality. If using an emoji, the browser renders it at each size.
How do I add a favicon to my website?+
Upload the generated favicon files to your site root (/). Add to your HTML <head>: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Add <link rel="manifest" href="/site.webmanifest"> for PWA support.
Can I use an emoji as a favicon?+
Yes. Type an emoji in the text input and this tool renders it at all sizes using your system font. This is popular for personal sites and side projects. Note that emoji appearance varies slightly across operating systems.
Everything You Need to Know About Favicons
A favicon is the small icon that appears in browser tabs, bookmarks, history, and search results. Getting favicons right involves generating a specific set of sizes and linking them correctly in your HTML. Skip any of the required sizes and some devices will fall back to a generic icon or show nothing at all.
Why you need multiple favicon sizes
Different devices and contexts request different icon sizes. Desktop browsers use 16×16 and 32×32 for the tab. Windows pinned sites use 48×48 and 96×96. iOS home screens use 180×180 (Apple Touch Icon). Android and Chrome PWAs use 192×192 and 512×512 from the site.webmanifest. If you only provide one size, browsers will scale it — often producing blurry results at small sizes. This generator creates every size at native resolution for crisp rendering everywhere.
Choosing the right corner radius
iOS and Android automatically apply corner rounding to app icons at the OS level, so you don't need to bake rounded corners into your source image for mobile. However, for the 16×16 and 32×32 browser tab icons, a subtle corner radius (10–20%) can make the icon feel more refined. Setting radius to 50% creates a circular icon — popular for personal sites, profile pages, and avatar-style brands.
Emoji favicons: a legitimate choice
Using an emoji as a favicon is increasingly common for side projects, tools, and personal sites. Emoji are universally recognised, require no design work, and render crisply at every size using the system font. The main downside is that the exact appearance varies between operating systems (Apple, Google, and Microsoft each have their own emoji designs). For a production brand, stick to a custom icon. For a quick project or internal tool, emoji favicons are perfectly reasonable.
What to put in site.webmanifest
The site.webmanifest (Web App Manifest) is a JSON file that tells browsers how to display your site when installed as a Progressive Web App. The minimum required fields are name, icons (with 192×192 and 512×512 at minimum), and display. The generated manifest from this tool includes all required fields with sensible defaults — edit the name and short_name values before uploading to your server.