Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

Manifest Contains Icons at Least 192px

Overview

When a user adds your app to the homescreen, the mobile device needs an icon to display. That icon is specified in the icons array of the Web App Manifest.

The presence of a 192-pixel icon ensures that your icon displays well on the largest Android devices. For smaller devices that need a smaller icon, Android can scale down the 192-pixel icon with reasonable accuracy. In other words, although you can provide smaller-sized icons in your Web App Manifest, it's unnecessary.

Recommendations

Add a 192-pixel icon to your Web App Manifest.

{
  ...
  "icons": [{
    "src": "images/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  ...
}

Check out Manifest Exists for a list of guides that teach you how to properly implement and test "Add to Homescreen" support in your app.

More information

This audit can only guarantee that your icon displays well on Android devices. Other operating systems may require a different icon size for optimal presentation.

Lighthouse fetches the manifest and verifies that the icons property references a 192-pixel icon. The manifest that Lighthouse fetches is separate from the one that Chrome is using on the page, which can possibly cause inaccurate results. Note also that Lighthouse does not check whether the icon actually exists in the cache. It just makes sure that the Web App Manifest defines a 192-pixel icon.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.