Android Web 应用程序图标被切掉边缘

Question

我正在制作一个网络应用程序，当我在我的 android 设备上 "add to Home Screen" 时，我的应用程序图标没有正确显示。下面是它的截图，下面是图标的真实样子：

这是我网站 head 标签中的代码：

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

Answer 1

如此处所述 (https://www.google.com/design/spec/style/icons.html#icons-system-icons)，图标尺寸可能为 48dp（对于密集布局来说最小！）。

之后，最大尺寸是相对于用户启动器的...

我不知道以 px 为单位的 "perfect" 尺寸是多少（相对于屏幕），但您可以尝试将其调整为 48/48（并替换 "sizes"属性）

Answer 2

查看了 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，这里提到了创建适用于所有屏幕尺寸的图像：

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).

据此，您可以假设图标必须根据屏幕尺寸自动缩小。我对此不太确定，但也许导致您的图标无法正确缩放的原因是因为您的 <link..> 中的 rel 属性不正确？根据您的代码，它显示为 rel="shortcut icon"，而根据 添加到主屏幕 文档，它应该是 rel="icon"。

此外，需要一个配置来支持主屏幕启动，您可以在其中添加一些 <meta> 标签，就像这样（从 添加到主屏幕文档):

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

请尝试一下，如果有效请告诉我。希望这能以某种方式有所帮助。祝你好运

Answer 3

在特定设备上运行 Android 4.4.2 Jelly Bean，我发现当图标大于 92x92 时，主屏幕图标会被截断，即使也提供了 92x92 .

所以只要有了这个就可以在 Jelly Bean 设备上生成一个漂亮的图标。

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

但以下内容将导致在 Jelly Bean 设备上使用 favicon-128.png，右侧和底部被裁剪。但是，这确实适用于较新版本的 Android，因为它应该如此。

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

由于我的网络应用程序针对特定设备运行 Jelly Bean，我决定只提供 92x92 图标。对于一般的网站，我建议遵循 Google's advice 并提供低分辨率和高分辨率图标，这可能会导致 Jelly Bean 设备出现问题。

Answer 4

当您使用 Android Studio 调整徽标大小时，它们具有缩放功能。

调整徽标大小：

1：右击app文件夹 2: 将鼠标悬停在 "new" 上并单击 "create image asset"

然后使用此工具调整大小：

Android Web 应用程序图标被切掉边缘

Android web app icon being cut off the edges

html

android

google-chrome

web-applications

android-launcher