Favicon Generator
favicon.ico, Apple, PWA and maskable icons from text or a logo. Runs in your browser.
About this favicon generator
This favicon generator turns a logo, an SVG, a letter or an emoji into the full set of website icons: favicon.ico, the Apple touch icon, Android and PWA icons, a maskable icon, the site.webmanifest file and the HTML tags to paste into your page. It is for anyone launching a site who wants the icons right the first time.
You see the result as you design it, in a browser tab in light and dark themes, on an iPhone and Android home screen, and at the real 16 pixel size. Everything is drawn on your device and comes out as one ZIP.
Features
Text, emoji, image or SVG
Type one or two letters or pick an emoji, choose a font, colors and a square, rounded or circle shape. Or drop in a PNG, JPG, WebP or SVG logo.
A real multi-size favicon.ico
The ICO file holds 16, 32 and 48 pixel versions stored as PNG images, so each browser picks the size it needs.
Maskable icon with safe-zone preview
Android crops app icons to the launcher's shape. Switch between circle, squircle, rounded and square masks and see the dashed safe zone your logo should stay inside.
Correct Apple touch icon
The 180×180 icon is always opaque and full-bleed, because iOS shows transparent corners as black and rounds the corners itself.
Manifest and tags filled in for you
Enter your site name, short name, theme color and folder, and the site.webmanifest and link tags use them. No placeholder names slip into production.
SVG passthrough
Upload an SVG and the original file is included as favicon.svg, with its own link tag, for crisp icons on high-density screens.
How to use the favicon generator
- 1Type a letter or emoji, or drop in an image or SVG logo.
- 2Set colors, shape and padding while checking the tab and home-screen previews.
- 3Enter your site name, then download the ZIP and paste the HTML tags into your head.
When to use it
A new site or side project
No logo yet? A bold initial on a brand color, or a single emoji, reads well at 16 pixels and takes a minute.
Turning a logo into icons
Drop in the square version of your logo. If it isn't square, choose to fit the whole image or fill the square and crop.
Making a site installable
Chrome needs 192 and 512 pixel icons in a web app manifest before it offers to install a site. The package includes both, plus a maskable version.
Fixing a missing or blurry favicon
Check the 16 pixel preview at 4× zoom. If your logo turns to mush, switch to a letter or simplify the artwork.
What size should a favicon be?
There is no single size. Browser tabs show 16×16 CSS pixels, which is 32 real pixels on most modern screens. Google Search asks for a favicon that is a multiple of 48 pixels square. iPhones use 180×180 for home screen bookmarks, and installable web apps need 192 and 512.
This package covers all of them:
- favicon.ico with 16, 32 and 48 px images, for tabs, bookmarks and old browsers
- apple-touch-icon.png at 180 × 180, for iPhone and iPad home screens
- icon-192.png and icon-512.png, listed in the manifest for Android and installed apps
- icon-maskable-512.png, the full-bleed version Android crops to its own shape
- favicon.svg, only when you start from an SVG
Do I still need favicon.ico?
Yes, keep it. Browsers request /favicon.ico from your site root even when no tag points to it, and some tools that fetch your pages only look there. Support for PNG and SVG favicons is good in current browsers, but the ICO is the safe fallback.
Storing PNG images inside an ICO has been allowed since Windows Vista. It keeps the file small and the edges smooth.
What is a maskable icon?
A maskable icon fills its whole square with color, and the device cuts it into a circle, squircle or rounded square. The Web App Manifest spec defines a safe zone: a centered circle with a radius of 40% of the icon. Anything outside it may be cut off.
That is why the maskable padding slider exists. At the default 20%, a letter or compact logo sits well inside the circle. Turn on the safe-zone overlay and check each mask shape.
How do I add a favicon to my website?
Unzip the package into the folder you entered, usually the site root. Paste the tags from favicon-tags.html into the head of every page, or into your layout template. Then open the site in a private window, because browsers cache favicons hard and an old icon can hang around for days.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Where icons are made | In your browser | Uploaded to a server |
| Input | Text, emoji, image or SVG in one tool | Separate pages for each |
| Maskable icon | Included, with mask and safe-zone preview | Often missing |
| Apple touch icon | Always opaque, no black corners | May keep transparency |
| Manifest | Filled with your name and colors | Placeholder values to edit |
Tips
- Start from a square image at least 512 pixels wide. Crop your logo to a square first so nothing important gets trimmed.
- Look at the dark tab preview. A dark logo on a transparent background can vanish on dark browser themes, so add a background color or a light outline.
- If you start from an SVG, clean up the SVG first. Editor exports often carry metadata and hidden layers that bloat a file loaded on every page.
- Pick text and background colors with strong contrast. The color contrast checker gives you the ratio, and tiny icons need more contrast than body text.
- While you're editing the head of your page, the meta tag generator writes the title, description and social tags.
Questions
What size should a favicon be?
Use several sizes: 16, 32 and 48 px inside favicon.ico, 180 px for the Apple touch icon, and 192 and 512 px for the web app manifest. This tool makes all of them from one design.
Can I use an emoji as a favicon?
Yes. Pick or paste an emoji in text mode and it is drawn into PNG and ICO files. It uses your computer's emoji font, so the style matches your system's emoji set.
Why is my favicon not showing?
Usually it is the browser cache. Open the site in a private window or a different browser. Also check that the files are in the folder the link tags point to and that /favicon.ico loads directly.
Can a favicon be an SVG?
Yes, current browsers accept SVG favicons. Upload an SVG and it is included as favicon.svg with its own link tag, while the ICO and PNG files cover browsers that don't support it.
Why does my Apple touch icon have black corners?
iOS fills transparent pixels with black. This tool always gives the 180 px icon a solid background, using your background color or the app background color.
What is the theme color for?
It tints the browser toolbar on some mobile browsers and colors the title bar of installed web apps. It goes into both the meta tag and the manifest.
Is my logo uploaded?
No. All icons are drawn on a canvas in your browser and zipped on your device. Nothing is sent to a server.