Favicon Generator
favicon.ico, app icons, manifest and HTML tags from a logo or a letter.
Design
1–2 characters read best at 16 × 16 px.
Noto Sans looks the same on every device.
0% square · 50% circle
iPhone and Android home-screen icons can’t be transparent.
Preview
Actual size
Home screen
Website details
Shown when people install your site or add it to their home screen.
Used under the home-screen icon (about 12 characters fit).
How the site opens once installed: standalone looks like an app.
“/” means the root of your site (recommended).
Files
HTML for your <head>
site.webmanifest
About the Favicon Generator
Create every icon a website needs from one design. Start from your logo (PNG, SVG, JPG or WebP), or type a letter or emoji and choose colours, font, size and corner rounding. You get favicon.ico (16, 32 and 48 px in one file), PNG favicons, the 180 px Apple touch icon, 192 and 512 px app icons — including a maskable icon for Android — a site.webmanifest and the HTML to paste into your pages.
Previews show the icon in light and dark browser tabs, at its real pixel size and on phone home screens. Everything is generated in your browser and downloads as a single ZIP file.
How to use it
- Choose Text or emoji and type one or two characters, or choose Image and drop in your logo.
- Adjust the background, corner rounding, font and size. Check the tab previews — at 16 × 16 pixels, simple and bold works best.
- Fill in Website details: your site name, theme colour and the folder the icons will be uploaded to.
- Press Download all (.zip), upload the files to your site and paste the HTML lines inside the
<head>of every page.
Examples
Text “A” · Noto Sans Extra bold · white on #1d5fcb · 22% rounding
favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest, favicon-snippet.html, README.txt
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#1d5fcb">
Common uses
- Giving a new website, blog or web app a proper icon in browser tabs, bookmarks and search results.
- Making the home-screen icon people see after adding your site on iPhone or Android.
- Replacing a blurry or missing favicon on an existing site.
- Quick monogram or emoji icons for side projects, documentation sites and internal tools.
What each file is for
- favicon.ico — the classic favicon with 16, 32 and 48 px images inside. Browsers request
/favicon.icoautomatically, even without a link tag. - favicon-16x16.png and favicon-32x32.png — PNG favicons for browser tabs (the 32 px one is used on high-resolution screens); favicon-48x48.png for site shortcuts.
- apple-touch-icon.png (180 × 180) — shown when someone adds your site to an iPhone or iPad home screen. It has a solid background and square corners; iOS applies its own rounded shape. Apple also looks for it in the site root automatically (Apple).
- icon-192.png and icon-512.png — app icons listed in the web app manifest, used by Android and by installable web apps.
- icon-maskable-512.png — a maskable icon. Android crops app icons into circles, squircles and other shapes; only a centre circle with a radius of 40% of the icon is always visible (web.dev), so your design is placed inside that zone on a full-bleed background.
- site.webmanifest — the Web Application Manifest with your site name, colours and icons.
Tips for a sharp, recognisable favicon
- Keep it simple: one or two letters, a single symbol or a simplified logo. Fine details disappear at 16 pixels.
- Check light and dark tabs: a dark logo on a transparent background can vanish in a dark browser theme — add a background colour if it does.
- Start big: use a square image of at least 512 × 512 px, or an SVG.
- Search results: Google shows favicons in search results and recommends a square icon larger than 48 × 48 px (Google Search Central); the 192 px PNG in the snippet covers this.
- Caching: browsers keep old favicons for a long time. After uploading new icons, open
/favicon.icodirectly and reload it, or check in a private window.
Fonts and emoji
Choose Noto Sans for letters that look the same on every device: the font (SIL Open Font License) is served from this site and only downloaded when you use it, including Devanagari letters. The other font choices use your device’s fonts.
Emoji are drawn with your device’s emoji font, so the PNG captures the design you see (Apple, Google, Microsoft and Samsung emoji look different). Emoji artwork belongs to the company that made the font — check its terms before using an emoji as a business logo.
Limitations
- Icons are raster images (ICO and PNG). No SVG favicon is produced; if you already have an SVG logo you can also link it directly with
<link rel="icon" href="/icon.svg" type="image/svg+xml">. - Animated images use their first frame; animated favicons are not created.
- Emoji depend on your device’s emoji font, so the same emoji may look different if you generate the icons on another device.
- Noto Sans is downloaded from this site the first time you use it; without a connection the system font is used instead.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Do I still need favicon.ico?
It is still the most compatible choice: browsers look for /favicon.ico on their own, and some feed readers and older programs use nothing else. Modern browsers also read the PNG and manifest icons. Including everything costs only a few kilobytes.
Where should I upload the files?
To the root folder of your website (next to your home page) if you can — /favicon.ico and /apple-touch-icon.png are then found automatically. If you use another folder, enter it under Icon folder on your site so the HTML and the manifest point to the right place.
Why doesn’t my new favicon show up?
Browsers cache favicons aggressively. Open the icon’s address directly and reload it, clear the cache, or test in a private window. Search engines update favicons on their own schedule, which can take days or weeks.
Can the favicon have a transparent background?
Yes — tick Transparent. The favicon and the 192/512 px icons keep the transparency. The Apple touch icon and the maskable icon need a solid background, so they use the App icon background colour.
Is my logo uploaded anywhere?
No. Your image is opened and resized by your browser, and the ZIP file is created on your device. Nothing is sent to MySmartCoPilot or anyone else.
What is the theme colour?
Browsers that support it (mostly on Android) tint the address bar and the window of an installed web app with this colour. By default it matches your icon background.