somsome somsome - 6 months ago 16
Android Question

Android web app icon being cut off the edges

I am making a web app, and when I "add to Home Screen" on my android device, the icon of my app is not being displayed properly. Below is the screenshot of it, and below that is what the icon really should look like:

enter image description here

enter image description here

This is the code I have inside the head tag of my website:

<link rel="shortcut icon" sizes="192x192" href="mydomain.com/img/site-icon/nice-highres.png">

Answer

Looked around the Add to Homescreen page for a while but it doesn't really mention any behavior on how the icon is scaled, but I found a tutorial about How to Add Icons and here, it mentions about creating the images available for all screen sizes:

If you don’t want to create all these images, you should at least create the larger resolution ones. That way they’ll look good on the hi-res devices. The older devices will load the closest size available to their required size and shrink them down (this works but isn’t ideal if you want complete control and the fastest download).

Based from this, you can presume that the icon MUST automatically be scaled down depending on the screen size. I'm not quite sure about this, but maybe what is causing your icon to not scale properly is because the rel attribute in your <link..> is incorrect? As per your code, it shows as rel="shortcut icon" while as per the Add to Homescreen doc, it should be rel="icon".

Also, a configuration is needed to support a homescreen launch, where you add some <meta> tags, like so (from the Add to Homescreen doc):

<!doctype html>
<html>
   <head>
     <title>Awesome app </title>
     <meta name="viewport" content="width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="icon" sizes="192x192" href="/icon.png">
   </head>
   <body></body>
</html>

Care to try it out and let me know if it works. Hope this helps somehow though. Good luck