0

I've been using an icon generator, to create favicons/icons for various popular units/browsers/OS, for a website

The result is:

<link rel="shortcut icon" href="favicon.ico />
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="160x160" href="favicon-160x160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />

Of course, this seems like a bit over the top. I have never seen ANY site use this many icon variations

I would like the icon to be available on most popular units, so people can also add the website to home-screen etc. (with the icon)

But is all this really necessary, or could I easily trim it down to just a few?

What would happen if I for example only used one 152x152 size for apple devices, and skipped the smaller sizes?

4

4 回答 4

1

完全矫枉过正。对于Apple，您只需要以下内容

apple-touch-icon.png (57x57 iPhone and iPod touch)
apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen)
apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch)
apple-touch-icon-144x144.png (144x144 retina iPad)

但是，如果您错过了其中任何一个，则会发生以下情况：

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

  If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

  If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

（摘自IOS 开发者库）

因此，您可以轻松地仅使用 144x144.png 并且不会发生任何事情，无论您的图标设计在小尺寸下是否看起来不错，但您完全可以只使用一种尺寸

于 2014-08-16T00:33:15.277 回答
1

第一个解决方案 - 根目录中的文件

创造：

  • favicon.ico，像往常一样，作为 16x16 ICO 图片。这适用于旧版本的 IE。
  • apple-touch-icon.png作为 152x152 PNG 图片。这适用于所有 iOS 设备和 Android Chrome。
  • favicon-196x196.png作为 196x196 PNG 图片。这适用于最近的桌面浏览器（还有 Android Chrome，在撰写本文时它也支持 Apple Touch 图标）。
  • mstile-144x144.png作为 144x144 PNG 图片。适用于 Windows 8 / IE 10 和 Windows 8.1 / IE 11。

将它们放在您网站的根目录中。

声明它们：

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

如您所料，必要时图标会缩小。

是的，favicon.ico没有声明。只要它在网站的根目录中，IE 就会找到它。以防browserconfig.xml万一你使用它。

替代解决方案 - 文件不在根目录中

创建与上面相同的图标。

将它们放在您网站的某个位置，例如。/path/to/icons.

声明它们：

<link rel="shortcut icon" href="/path/to/icons/favicon.ico />
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/path/to/icons/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png" />
于 2014-08-16T11:19:14.367 回答
0

经过更多研究，我最终得到了这个解决方案：

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><![endif]-->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#111111" />
<meta name="msapplication-TileImage" content="mstile.png" />

这个页面帮助了一些http://www.jonathantneal.com/blog/understand-the-favicon/

favicon.png 是 96x96

favicon.ico 为 48x48（或一个文件中的 3 个变体）

apple-touch-icon.png 为 152x152

mstile.png 是 144x144

所以，文件有点大，但这样我就不需要一大堆版本和文件。此外，一个 4-8 kb 的文件供用户下载（即使在手机上）并不多，任何设备都应该抓取文件并在需要时缩小文件大小

于 2014-08-16T11:27:00.513 回答
0

我的解决方案：

1) 准备 310x310 分辨率和 PNG 格式的图标图像。

2）去http://faviconit.com，生成你的favicon，下载并解压，复制到项目的某个文件夹中（在我的例子中是root/favicon/）

3）然后去http://www.favicon-generator.org/，生成你的图标，下载并解压缩，然后只复制android-icons ( android-icon-*.png ) 和manifest.json到项目中的某个文件夹（在我的情况下root/favicon/）

4) 不要忘记更改manifest.json和browserconfig.xml中的路径

5）然后在你的html头中使用这样的东西：

<link rel="shortcut icon" href="/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
于 2016-10-11T09:55:47.827 回答