Favicon Size Guide

Q: What size is a favicon?

The classic favicon size is 16x16 pixels for browser tabs. 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.

Q: 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.

Q: 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.

Favicon Size: Complete Reference

The standard favicon size for browser tabs is 16x16 pixels, but a complete favicon setup should include multiple sizes: 16x16, 32x32, and 48x48 pixels in favicon.ico, 180x180 for Apple Touch Icon, and 192x192 and 512x512 for Android and Progressive Web Apps. All favicon images should be square.

Quick answer: favicon size to use

Use 16x16 as the classic browser tab favicon size, then include larger square icons so browsers, phones, and installable web apps can choose the best file.

Browser tab	16x16 and 32x32
favicon.ico	16x16, 32x32, and 48x48
Apple Touch Icon	180x180
Android/PWA	192x192 and 512x512

Generate all sizes from an image Generate all sizes from text

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)

Recommended Default Favicon Package

If you want one setup that works across browsers, iOS, Android, and Progressive Web Apps, use these files in your site's root folder:

favicon.ico with 16x16, 32x32, and 48x48 images
favicon-16x16.png and favicon-32x32.png
apple-touch-icon.png at 180x180
android-chrome-192x192.png and android-chrome-512x512.png
site.webmanifest pointing to the Android icons

The favicon converter creates this full package from a logo or image, and the text favicon generator creates the same package from initials or short text.

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. For more detail, see the favicon.ico guide:

<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 size is a favicon?

The classic favicon size is 16x16 pixels for 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.

Should I use 16x16 or 32x32 for a favicon?

Use both. The 16x16 icon is the classic browser tab size, while 32x32 gives browsers and high-DPI displays a sharper option. Put both inside favicon.ico and include PNG versions for modern browsers.

Generate All Favicon Sizes Automatically

Our tools create every size you need in a single download:

Related Guides

What is a Favicon?
Learn the basics

favicon.ico Guide
Understand the classic ICO file

Text Generator
Create text and initials favicons