Android web app icon being cut off the edges

android app icon guidelines
android round icon
android adaptive icon template
android icons
android dynamic app icon
android:icon background
android 9 icons
android 10 icons

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:

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">

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

Support display cutouts, display cutouts allow for an edge-to-edge experience while providing space Supporting different screens in web apps � Debugging web apps your app window is letterboxed so that none of your content displays Avoid hard-coding the status bar height, as this can lead to overlapping or cut-off content. With crop, the image edges can be cut off, and with shrink, they aren't. You can adjust the padding, if needed, if the source asset still doesn't fit well. Shape - To place a backdrop behind your source asset, select a shape, one of circle, square, vertical rectangle, or horizontal rectangle. For a transparent backdrop, select None.

as explained here (https://www.google.com/design/spec/style/icons.html#icons-system-icons), the icon dimension may be 48dp (and least for dense layout!).

After, the max size is relative to the user launcher...

I don't know what are the "perfect" dimensions in px (which are relative to the screen), but you may try to resize it by 48/48 (and also replace the "sizes" attribute)

Adaptive icons, Caution: A device OEM can specify a mask that may include a radius that is as short as 33 dp along certain points of the shape. Demo of parallax� If you have an older TV and an NVIDIA SHIELD Android TV, you may notice that some content gets cut off around the edges. This is called overscan, and it can be incredibly annoying in a number of situations, not excluding one of SHIELD’s primary features: gaming. Fortunately, it’s an easy fix.

On a specific device running Android 4.4.2 Jelly Bean, I found that the home screen icon would get cut off when the icon was larger than 92x92, even if 92x92 was also provided.

So just having this produces a great looking icon on the Jelly Bean device.

<link rel="icon" sizes="92x92" href="/favicon-92.png">

But the following will result in favicon-128.png being used on the Jelly Bean device, with the right and bottom sides being cropped. However, this does work on newer version of Android, as it should.

<link rel="icon" sizes="128x128" href="/favicon-128.png">
<link rel="icon" sizes="92x92" href="/favicon-92.png">

Since my web app is targeting a specific device running Jelly Bean, I decided to only provide the 92x92 icon. For websites in general I would recommend following Google's advice and provide low-res and high-res icons, which could cause issues on Jelly Bean devices.

Create app icons with Image Asset Studio, Image Asset Studio helps you create various types of icons at different densities and A launcher icon is a graphic that represents your app to users. With crop, the image edges can be cut off, and with shrink, they aren't. Galaxy TabA SM-T510 Facebook Marketplace are cut off on the left and right sides. Solution of. "I've finally found a solution that solved it for me. Within settings DEVICE > SOUND & DISPLAY > Multi-Window. I toggled off, then on and unchecked both options. Don't really know what the "multi-window" feature does, but as long as the issue is gone

When you size your logo with Android Studio they have a scale feature.

To size your logo:

1: Right-click app folder 2: Hover over "new" and click "create image asset"

Then resize with this tool:

TV app quality, TV is a growing segment of Android devices that requires specific The app displays a 320 x 180px full-size banner as its launcher icon in The app does not display any text or functionality that is partially cut off by the edges of the screen. components and does not attempt to launch a web browser app. I just had the same issue of the edges of the screen bleeding off the edges when I updated to Windows 10 just today. Steps taken: 1. Changed resolutions on Windows Display Settings. Didn't help. 2. Installed most recent available driver from NVIDIA via their provided control panel/updater. Also didn't fix the issue after a restart. 3.

Icon shapes and masking � Issue #555 � w3c/manifest � GitHub, The round icons on Android are roundish and not actually always for the same branding reasons, risking to cut off part of the logo/icon. Thus, an image designed to fit in Android's (or, the Web's) circle safe In the circle, the "f" comes a bit too close to the edge, and in the square, the "f" is a bit too small. Rick Broida found a fix to that: Open the Google Play app, then tap Menu > Settings and clear the check box next to Add icon to Home screen. Rick has a few more tips for optimizing your Android , too.

Technology Now: Your Companion to SAM Computer Concepts, Popular browsers include Microsoft Edge, Google Chrome, and Firefox. enable you to do the following: • Receive warnings of suspected phishing or malware Use an App Tab to pin any website icon so the website is easily available. on your desktop or laptop computer, making navigation difficult or cutting off content. With Android 10 you have an additional advantage: you can decide whether to give access to a particular app at all times, only while using the app or reject it completely: Open the Settings menu

Netflix is zoomed in or cropped, If the Netflix app or the video you're trying to watch appears to be zoomed in or cropped on the top or edges, use this article to resolve the issue. Customizing Web Push notifications with your app icons, colors, and style. Suggested Edits are limited on API Reference Pages You can only suggest edits to Markdown body content, but not to the API spec.

Comments
  • The head tag of the webpage is no visible for the launcher, so there must be something what generates an icon for your app. What is it?
  • I have no idea. here: developer.chrome.com/multidevice/android/installtohomescreen it says that if I set the link tag in my head and press "add to Home screen" in my browser, it will show the icon in my home screen of my android device
  • In that case I have misunderstood your question. I thought you mean you've converted your webpage to an android app...
  • I followed this article and here, 192px times 192px is recommended. I've tried making the image and replacing the size attribute to smaller number, but then the icon got really small
  • Ok, it is something that I don't know very well... So what is your device? Do you use a custom launcher? The problem can come from here... Can you set the icon in your activity code? Import it with android Studio (it will be stored in different sizes, for the different viewports), I think it is the best solution, because it's supporting a larger amount of devices...