Appearance
The Apple touch icon and the maskable Android icon always use the background color: iOS fills transparency with black, and Android crops maskable icons to a circle or squircle.
Web app manifest
Preview
| Preview | File | Size | Download |
|---|---|---|---|
Put the files in your site's root, then paste this into the <head> of every page.
About the Favicon Generator
This tool turns one logo into the set of icons a website needs: the favicon.ico that every browser looks for, the Apple touch icon for iPhone and iPad home screens, the 192 and 512 px icons and a maskable icon for Android and installable web apps, and the site.webmanifest that lists them. Everything is drawn and packaged in your browser; nothing is uploaded.
The .ico holds 16, 32 and 48 px PNG images in one file, which current browsers and Windows read. If you start from an SVG, the original is included as icon.svg for browsers that support scalable favicons. The maskable icon keeps your logo inside the central 80 percent, the safe zone Android uses when it crops icons to a circle or squircle, and the Apple and maskable icons always get a solid background.
How to use it
- Drop a square logo of at least 512 × 512, or an SVG, on the page.
- Adjust padding, corner radius and background, and check the tab, iPhone and Android previews.
- Fill in the app name, short name and theme color for the manifest.
- Select Download all for a ZIP, or download single files.
- Put the files in your site's root and paste the HTML into every page's
<head>.
Examples
The HTML the tool gives you looks like this:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
Common questions
Do I still need favicon.ico?
Yes. Browsers request /favicon.ico even when a page names no icon. PNG and SVG icons are additions, not replacements.
Why does my icon look blurry in the tab?
At 16 and 32 px, fine lines and small text disappear. Use a simplified mark, add little or no padding, and check the browser tab preview.
What is a maskable icon?
An icon with a safe zone that Android can crop into any shape without cutting off the logo. It's listed in the manifest with purpose: maskable.
Why did my favicon not change?
Browsers cache favicons for a long time. Open the icon's URL directly or use a private window to see the new one.
Related tools
- Image Resizer & Converter: crop the logo square first if it isn't.
- Meta Tag & Open Graph Checker: see which icon and manifest a page declares.
- HEX to RGB Color Converter: pick a matching theme color.