Recommended Sizes for icons of PWA, Manifest web apps, iOS and Android, Windows apps, browser extensions

Here you will learn the tips, best practices and key points for determining the size for icons for Progressive Web Apps (PWA), web apps, and other regular mobile and desktop apps as well as icon dimensions for browser extensions. This is the most comprehensive guidelines for icon size recommendations from authentic sources. → → Watch Video Tutorial below.

• Lighthouse requires at least an icon sized 192x192 pixels for favicons of PWA (progressive web apps). Lighthouse also recommends another copy of favicon in 512x512 pixels.

• For PWA (progressive web apps) sites, different favicon sizes and formats can be declared. For example, you can create icons in 48x48, 72x72, 96x96, 144x144, 168x168, 192x192, 256x256, 512x512 pixels. [RD]

• For web apps, you can create a same size icon in different image formats such as one copy of 48px square in WebP and another copy of 48px square in ICO or PNG format.

• Microsoft Edge expects favicons of PWA sites to be 192x192, 256x256, 384x384, and 512x512 pixels.

• Web apps manifest also recommends to create a circled safe zone for the favicon by creating around 10% padding on all sides and positioning the favicon on the center.

• For windows apps logo icons, Microsoft recommends target size dimensions of 16x16, 20x20, 24x24, 30x30, 32x32, 36x36, 40x40, 48x48, 60x60, 64x64, 72x72, 80x80, 96x96, 256x256, at the minimum. The app icons may appear in start menu, taskbar, task manager, splash screen and Microsoft store.

• Material icons are provided by Google Fonts, which can be downloaded in PNG or SVG format and suitable for web, Android and iOS projects.

• For progressive web apps, you can use adaptive and maskable icons.

Dozro Services: Check Price for Creation of Favicon, Brand Minimalist Logo, and Small Business Website.

• You should use different sizes of icons for progressive web apps. However, Lighthouse's audit will pass when a single 512x512 px icon is present. [RD]

• Web developers have discussed and suggested that lighthouse requirement for PWA icon size should be 144 pixels. [RD]

• As per my search, for web apps, there cannot be a one size fits all rule. There cannot be a perfect size dimension for all platforms and usage. You should provide icons in multiple sizes and formats for best results.

• For splash screen or launch screen of sites launched from a home screen of mobile, you should design a larger favicon. Apple recommends that you should not use a static image for launch screen. The purpose of launch screen is solely to to give perception to the users that your app is quick to launch.

• For every native app in iOS you must supply a launch image of at least 1920px × 1080px size dimensions.

• Apple recommends native app icon size for iPhone 180x180 px, for iPad Pro 167x167 px, for iPad and iPad Mini 152x152 px, for app store 1024x1024 px. [RD]

• It is interesting to note that for web apps, the most popular favicon size is 192x192. On second number, 512x512 pixels in most used comparative list. On third number is 144x144 pixels. The 96x96 pixels size falls on the 4th position among the most used. 48x48 px is among the 5th most used size dimensions for icons of web apps. [RD]

• It is interesting to note that Microsoft recommends an image of 128 x 128 pixels for icons of browser extensions. Google also recommends 128x128 pixel size for extension icon but suggests that the actual icon should be 96x96 pixels with PNG format while creating 16x16 pixel transparent padding which provides a safe zone. [RD]

• For Google Play icons (Android phone), Google recommends that final icon size must be 512x512 pixels, in PNG format, in sRGB color space with maximum file size of 1024 KB.

Google, Microsoft and Apple recommend different sizes for icons of progressive web apps, native apps and browser extensions.

For Office Add-ins, Microsoft recommended icon size in 2023 is 64 px but three required size are 16 px, 32 px and 80 px. Microsoft provides comprehensive tips and guidelines for designing of icons for windows apps.

If you could not provide multiple favicons for PWA, then consider 512 x 512 pixels single image. For progressive web apps, you should always prefer to upload favicon images in multiple sizes.

However, for websites you must provide only a single favicon image for favorable search appearance.

Note: Previously, all authentic sources of information on this page were premium but now I have made them FREE to help you guys. I hope you appreciate this.

Please do me favour and Email us, any corrections, update, feedback and improvement of information in this article so that it remain helpful for most people.

More Resources

Please also check following useful resources.

• Favicon Display Locations: Where Does Website Favicon Appear other than browser tab.

• Best Favicon Image Format – ICO, PNG, JPG, SVG?

• Favicon – why it Loads late? Do Favicon Affect SEO?

• Favicon Ideal Size – the Best Size for a Website Favicon.

• Examples of Best Favicon Designs.

• FAVICON Design Ideas and Examples.

• What is the best size for a website logo?

• Guidance about designing an ideal logo for your website.

• Get our Dozro Services to design a great favicon for your website.