What is the right favicon size and format?
Modern favicons must be available in multiple sizes and formats—from 16×16 px for browsers to 512×512 px for PWAs. PNG and SVG are increasingly replacing the old ICO format, defined in the manifest.json for web apps.
What is a favicon used for?
A favicon (a portmanteau of “favorite” and “icon”) is a small graphic that appears above the address bar in browser tabs. It’s a good idea for every website to add a favicon. It enhances brand recognition, gives the site a more professional appearance, and can even improve performance from an SEO perspective.
Favicons can represent a company or brand logo, but because there are strict limitations on their size, they often use only a portion or a simplified version of the logo. On mobile devices, these small graphics are also used for touch icons.
What favicon size is recommended?
Different browsers and devices use different favicon sizes. By default, 16 × 16 px and 32 × 32 px are the most important formats, as they are used in traditional browser tabs.
For Progressive Web Apps — websites that function more like apps — you should also provide favicons at 192 × 192 px and 512 × 512 px. These sizes are defined in the manifest for app icons and are used by browsers like Chrome or Edge when a user “installs” a website.
Which favicon sizes do Google and Apple require?
The favicon size required by Google is particularly important, because Google uses favicons not only in the browser but also in search results. There, they are displayed at 48 × 48 pixels. For Android, you should also provide a 192 × 192 pixel version — this serves as the app icon when users add your website to their home screen.
For Apple devices, the optimal favicon size varies depending on the device. On iPhone, the 60 × 60 pixel format is used. However, a higher resolution is also possible as long as it is a multiple of this value. This ensures a sharp display on high-resolution screens and can be scaled down for other uses. An image sized 180 × 180 pixels is therefore a good choice. Icons on iPad, on the other hand, are displayed at 83.5 × 83.5 pixels. For modern Retina and Super Retina displays, the recommended favicon size is 167 × 167 pixels, which is double that resolution.
These icons are stored as Apple Touch Icons and are embedded into the <head> of the page using the following HTML tag:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">The most important favicon sizes at a glance
Some browsers and devices use exceptions. Especially with older devices, additional dimensions may be required to ensure the browser icon displays correctly. Below is an overview of the most common sizes:
| Browser or device | Size |
|---|---|
| Most modern browsers | 16 × 16 or 32 × 32 pixels |
| Google and Android | 48 × 48 or 192 × 192 pixels |
| iPhone (newer models) | 60 × 60 or 180 × 180 pixels |
| iPad (newer models) | 83.5 × 83.5 or 167 × 167 pixels |
| Chrome Web Store | 128 × 128 pixels |
| Google TV | 96 × 96 pixels |
| Internet Explorer 9 | 24 × 24 pixels |
| iPad home screen | 72 × 72 pixels |
| iPhone (older models) and iPod Touch | 57 × 57 pixels |
| iPhone 4 home screen | 114 × 114 pixels |
| Opera Speed Dial | 195 × 195 pixels |
What file formats work for favicons?
You can use various image formats for your favicon. The classic .ico format is still widely supported, but it is considered outdated. Modern browsers generally prefer PNG or SVG favicons. For PWAs, for example, the PNG format is used in the manifest file because it can be scaled without loss of quality.
Here is an overview of the available file formats:
- .ico: maximum compatibility but limited scalability
- .png: sharp display on all screens, transparency supported
- .svg: vector-based option, ideal for scalable favicons and dark mode designs
- .gif: only in rare cases (e.g., animated icons)
Make sure your server delivers the correct MIME type (e.g., image/png or image/svg+xml) to ensure proper display in all browsers.
How to create a favicon with a generator
There are quite a few details to keep in mind when selecting the ideal favicon size for your website. That’s why the simplest approach is to use a favicon generator. It walks you through the entire process and ensures your icon is created in all the necessary formats for modern browsers.
Reviewer
Melissa Senn
Melissa Senn has been with IONOS since 2016 and focuses on website, e-commerce, social media, and AI in the Digital Guide. As a digital strategist, she uses her extensive SEO and GEO experience to transform complex technological trends into practical content.