Free tool Favicon generator: ICO, Apple touch icon and manifest in one go
Start from a logo, one or two letters or an emoji. The page draws every size a browser, phone home screen and Google Search look for, packs a real multi-size favicon.ico, writes the site.webmanifest and gives you the tags to paste into your head section.
- Image, text or emoji
- Sizes from Google and Apple docs
- Drawn on your device
Design your favicon
Every change redraws all sizes. Check the 16 px preview: that is what most people see in a browser tab.
Start from
The emoji is drawn with your system's emoji font, so it looks like Apple, Microsoft or Google emoji depending on your device. Those designs have their own licence terms; for commercial use, open sets such as Twemoji (CC BY 4.0) or Noto Emoji (Apache 2.0) are safer.
Shape
Preview
Home screen: iOS rounds the corners of apple-touch-icon itself; Android crops maskable icons to its own shape.
16 and 32 px are enlarged 3× with hard pixels. The Apple touch icon is always square and opaque; transparent areas are filled with white.
Site details for the manifest
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2563eb">{
"name": "My Website",
"short_name": "My Site",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#2563eb",
"background_color": "#2563eb",
"display": "standalone",
"start_url": "/"
}Files
Upload them to your site root (or the path you set) and paste the tags. favicon.ico belongs at the root either way: browsers request /favicon.ico when a page has no icon link.
-
favicon.ico16 / 32 / 48 Browser tabs, bookmarks, Windows -
favicon-96x96.png96 × 96 Google Search (larger than 48 px) -
apple-touch-icon.png180 × 180 iPhone and iPad home screen -
icon-192.png192 × 192 Android home screen and installed web app -
icon-512.png512 × 512 Android home screen and installed web app -
icon-maskable-512.png512 × 512 Android adaptive icon shapes -
site.webmanifestJSON Web app manifest
Drawing icons…
Version v1.0Updated Update history
Which file is used where
There is no single favicon size. Each place that shows your icon looks for a different file.
favicon.ico (16, 32, 48)
Browser tabs, bookmarks and history, and the file browsers request at /favicon.ico when nothing else is declared. One ICO file holds all three sizes and the browser picks the one closest to what it needs.
favicon-96x96.png
A larger PNG for Google Search, which asks for a square icon of at least 8 × 8 and recommends larger than 48 × 48 so it looks good on various surfaces.
apple-touch-icon.png (180)
What iPhone and iPad show when someone adds your site to the home screen. Apple's guide uses 180 × 180 for Retina iPhones. iOS rounds the corners itself, so the file is a full square.
icon-192 / icon-512 and the manifest
Chromium browsers need at least a 192 and a 512 px icon in the web app manifest to show your site on an Android home screen or as an installed app. The maskable version is cropped to circles or squircles without cutting off your logo.
Search engines cache favicons. After you change yours, Google can take days to weeks to show the new one; Google's guide says you can request indexing of the home page with the URL Inspection tool.
Add a favicon to your site in four steps
About five minutes, most of it uploading files.
-
1
Design
Pick Image, Text or Emoji. For a logo, start from a square PNG or SVG of 512 px or more. Keep it simple: fine detail disappears at 16 px.
-
2
Check the small sizes
Look at the enlarged 16 and 32 px previews and both browser tabs. Increase the padding or switch to one bold letter if the icon is unreadable.
-
3
Download and upload
Download the ZIP and upload the files to your site root, or set "Path to icons" to the folder you use. Keep favicon.ico at the root.
-
4
Paste the tags
Copy the tags into the head of every page (usually a shared template or layout). Open the site and check the tab; force-reload if the old icon is cached.
What Google, Apple and browsers ask for
The sizes in this tool come from each vendor's own documentation, checked on 10 November 2026.
- Google Search: square, at least 8 × 8, larger than 48 × 48 recommended; one favicon per hostname; Googlebot must be able to crawl the home page and Googlebot-Image the icon file
- Google accepts the rel values
icon,shortcut icon,apple-touch-iconandapple-touch-icon-precomposed - ICO file: a 6-byte header, one 16-byte directory entry per size, then the images; since Windows Vista each image can be a complete PNG file, which is what this tool writes
- Web app manifest:
nameorshort_name,start_url, and icons withsrc,sizesandtype
| Where | Size | Source |
|---|---|---|
| Google Search results | Square, ≥ 8 px; > 48 px recommended | Google Search Central, favicon guidelines |
| Browser tab (ICO) | 16, 32, 48 px | Microsoft icon guidance recommends at least 16, 32 and 48 |
| iPhone home screen | 180 × 180 | Apple Safari Web Content Guide |
| Android / installed app | 192 × 192 and 512 × 512 | web.dev, web app manifest |
| Maskable icon | 512 × 512, design inside a circle 80% wide | W3C Web App Manifest, icon masks |
Inside the favicon.ico this tool makes
An ICO is a small directory followed by the images. With three PNG images of 16, 32 and 48 pixels, the first 54 bytes are the header and directory.
| Bytes | Field | Value |
|---|---|---|
| 0–1 | Reserved | 0 |
| 2–3 | Type | 1 (icon; 2 would be a cursor) |
| 4–5 | Number of images | 3 |
| 6–21 | Entry 1: width, height, colours, reserved, planes, bits, size, offset | 16, 16, 0, 0, 1, 32, PNG length, 54 |
| 22–37 | Entry 2 | 32 × 32, offset = 54 + length of the 16 px PNG |
| 38–53 | Entry 3 | 48 × 48, offset after the 32 px PNG |
| 54 → | Image data | Three complete PNG files, back to back |
Width and height are single bytes, so 256 px is written as 0. Renaming a PNG to .ico does not create this structure: the file is still a single PNG with a different extension.
Why a favicon does not show up
Most "my favicon is not showing" problems are one of these.
Blocking the icon in robots.txt
Google needs Googlebot-Image to fetch the icon and Googlebot to crawl the home page. A Disallow on /images/ or /static/ can hide it from search results.
A detailed logo at 16 px
Wordmarks and thin lines turn into a smudge. Use the symbol only, or one or two bold letters.
Expecting an instant change
Browsers and search engines cache icons. Force-reload, change the file name or add a version query, and give Google time to recrawl.
Only one PNG size
A single 16 px PNG looks blurry on home screens and high-density displays. Ship the full set: ICO, 180, 192 and 512.
Where your icon shows up next to your data
A favicon is a small part of how your site looks in search results and in the chat window. TapCub reports the numbers around both.
Search clicks and CTR
Connect Google Search Console and Bing Webmaster to see clicks, impressions, CTR and position by page and query.
Learn moreLogo in the chat window
The live chat widget takes your brand colour and logo, so the same square icon can greet visitors in chat.
Learn moreWebsite analytics
Traffic, sources and pages with bots and AI crawlers counted separately.
Learn moreFavicon questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
What do I need to make a favicon?
A square logo (PNG or SVG, ideally 512 px or larger), or just one or two letters or an emoji. Pick the source on this page and download the ZIP: you get favicon.ico, the Apple touch icon, 192 and 512 px PNGs and the manifest.
What size should a favicon be?
There is no single size. Ship favicon.ico with 16, 32 and 48 px, a PNG larger than 48 px for Google Search (this tool makes 96), a 180 px Apple touch icon and 192 and 512 px icons in the web app manifest.
How do I convert a PNG to ICO?
Choose Image, drop your PNG, and download favicon.ico. The tool draws 16, 32 and 48 px versions and packs them into one ICO file with a proper icon directory, instead of just renaming the file.
Why is my favicon not showing in Google?
Check that the icon is linked from the home page, is square and at least 8 × 8 (larger than 48 recommended), and that neither the page nor the icon is blocked in robots.txt. Then wait: Google re-crawls favicons over days or weeks.
Do I still need favicon.ico?
It is still the safest fallback. Browsers and other tools request /favicon.ico when a page declares no icon, and the HTML standard describes that fallback. Keep it at the root even if you also link PNG icons.
What is a maskable icon?
An icon whose background fills the whole square and whose design sits inside the central safe zone, a circle 80% of the width. Android can then crop it to a circle, squircle or rounded square without cutting off the logo.
Can I use an SVG favicon?
Many browsers support <link rel="icon" type="image/svg+xml">, but support varies, and Apple touch icons and manifest icons here are PNG. This tool makes the PNG and ICO set that works everywhere; you can add an SVG link on top.
Is my logo uploaded?
No. The image is opened and drawn on a canvas in your browser; the ICO, PNGs and ZIP are built on your device.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
See how people find and use your site
Add TapCub's script to see visitors, sources and search performance in one place, with bots kept out.