What is a Favicon?
Learn the basics
Favicon Sizes
The standard favicon sizes are 16x16, 32x32, and 48x48 pixels for the ICO format, 180x180 for Apple Touch Icon, and 192x192 and 512x512 for Android and Progressive Web Apps. All favicons must be square. A complete favicon setup includes an ICO file with multiple sizes plus PNG icons for mobile devices.
Complete Favicon Sizes Reference
| Size | Format | Where It's Used | Required? |
|---|---|---|---|
| 16x16 | ICO / PNG | Browser tabs, bookmarks bar, history | Yes |
| 32x32 | ICO / PNG | Browser tabs (high-DPI), Windows taskbar shortcuts | Yes |
| 48x48 | ICO | Windows desktop shortcuts, site icons | Recommended |
| 180x180 | PNG | Apple Touch Icon (iPhone, iPad home screen) | Yes |
| 192x192 | PNG | Android home screen, web app manifest | Yes (for PWA) |
| 512x512 | PNG | Android splash screen, PWA install dialog | Yes (for PWA) |
Visual Size Comparison
Here's how each standard favicon size compares visually. The smallest sizes are used in browser tabs, while the largest are used for mobile home screens and app installs.
16x16
32x32
48x48
180x180(scaled)
192x192(scaled)
512x512(scaled)
HTML Code for Each Favicon Size
Copy and paste these HTML <link> tags into
the <head> section of your website to include
all recommended favicon sizes.
ICO Favicon (16x16, 32x32, 48x48)
The ICO file contains multiple sizes in a single file. Place
favicon.ico in your website's root directory. Most
browsers will find it automatically, but you can also add this
link tag:
<link rel="icon" type="image/x-icon" href="/favicon.ico">PNG Favicons (16x16 and 32x32)
PNG favicons offer better quality than ICO on browsers that support them. Include both sizes:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Apple Touch Icon (180x180)
Required for iOS devices. When users add your site to their home screen, this icon is displayed:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Android and PWA (192x192 and 512x512)
Android icons are defined in a web app manifest file. Create a
site.webmanifest file in your root directory:
<link rel="manifest" href="/site.webmanifest">With the manifest file containing:
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Complete HTML (All Sizes)
Here's the complete set of HTML tags to include all recommended
favicon sizes. Add these to your <head>:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">Which Favicon Sizes Do I Need?
For most websites, you need these files at minimum:
- favicon.ico — Contains 16x16, 32x32, and 48x48 pixel versions. Required for universal browser support including older versions of Internet Explorer.
- apple-touch-icon.png (180x180) — Required for Apple devices. Displayed when users add your site to their iPhone or iPad home screen.
- android-chrome-192x192.png and android-chrome-512x512.png — Required if your site is a Progressive Web App or if you want a home screen icon on Android devices.
- favicon-16x16.png and favicon-32x32.png — Optional but recommended. Provides higher quality icons than ICO format on modern browsers.
Our favicon converter and favicon generator create all of these sizes automatically in a single download.
Frequently Asked Questions
What is the standard favicon size?
The most common favicon size is 16x16 pixels, which is displayed in browser tabs. However, modern websites should include multiple sizes: 16x16, 32x32, and 48x48 in an ICO file, plus 180x180 for Apple devices and 192x192 and 512x512 for Android.
Can a favicon be any size?
Favicons must be square (same width and height). While browsers will resize non-standard dimensions, using the standard sizes ensures the best quality. Non-square images will be cropped or distorted.
What size should a favicon.ico file be?
A favicon.ico file should contain three sizes: 16x16, 32x32, and 48x48 pixels. The ICO format is unique because it can store multiple sizes in a single file, allowing browsers to choose the most appropriate size.
What size is the Apple Touch Icon?
The Apple Touch Icon should be 180x180 pixels.
This is used when users add your website to their iPhone or
iPad home screen. Use the
<link rel="apple-touch-icon"> HTML tag to
specify it.
What are the favicon sizes for Android?
Android uses 192x192 pixels for the home screen icon and 512x512 pixels for the splash screen and PWA install dialog. These are specified in a web app manifest (site.webmanifest) file.
Do I need an SVG favicon?
SVG favicons are optional but offer benefits: they're lightweight, infinitely scalable, and support dark mode via CSS media queries. However, browser support is limited to Chrome, Firefox, and Edge. If you use SVG, keep the ICO file as a fallback.