什么是收藏夹图标，它的作用是什么？
图标是在浏览器标签，书签和搜索结果摘要中显示的标志（图标）。
Favicon在Web应用程序中扮演重要角色。它可以改善站点在搜索结果中的外观，提高站点的知名度，帮助用户在书签和标签中快速找到所需的页面。
此外，用户可以将您网站的页面添加到手机的主屏幕，或将其另存为Web应用程序。在这种情况下，使用favicon，您可以在大量其他应用程序中快速找到站点。
网站图标使用什么格式？
以前，ICO被用作主要格式。这种格式的特殊性是多维性。该文件可以存储几种图标大小。ICO被PNG格式取代。仍然支持ICO，但是大多数现代浏览器都选择了PNG图标格式，该格式更轻巧。某些浏览器无法在ICO文件中选择正确的图标，从而导致低分辨率图标的滥用。
本文将介绍哪些平台？
- 经典桌面浏览器
- Android Chrome浏览器
- iOS Safari网络剪辑
- 苹果系统
- 视窗
经典桌面浏览器
让我们从经典台式机开始。
如前所述，今天的ICO格式已经过时，但这并不意味着您无需忘记它。 ICO格式可以保存您的图标并在某些情况下正确显示网站图标。例如，在IE 11之前，不支持PNG格式。因此，对于IE10及更低版本，您需要使用旧的ICO格式。在这种情况下，建议使用以下ICO和PNG格式的组合：
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">要创建多尺寸的ICO图标，您可以使用icoconvert转换器服务。生成图标时，您必须选择以下尺寸：16x16、32x32、48x48（最高分辨率的图标）。
PNG图标的大小如下：16x16、32x32、96x96、120x120。为什么是120x120的图标？Yandex帮助通知它可以使用此大小的图标。
如果我们关注rel（资源类型）的值，那么大多数浏览器都会考虑使用图标，而IE浏览器会考虑使用快捷方式图标。
Android Chrome浏览器
Android希望看到192x192 PNG图标，鼓励使用Alpha通道（透明度）。
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">Android Chrome依赖于网络应用清单。任何站点都可以使用清单链接到某些图标。
清单文件本身为json格式，并使用以下行声明：
<link rel="manifest" href="…/manifest.json">可以使用RealFaviconGenerator服务生成Android Chrome的清单文件。
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}图标应具有以下尺寸：PNG格式的72x72、96x96、144x144、192x192、512x512，建议您设置透明性。由于图标可以具有透明背景，因此可以在清单中使用background_color指定颜色。
值得取消的是，在电话上，用户可以将浏览器页面保存到主屏幕。它只是到您网站页面的链接，将拉起名称为android-icon-192x192.png的图标，该图标已在您的代码中声明。
如果将清单连接到站点，则在打开页面时，系统可能会提示用户将站点另存为应用程序。在这种情况下，您可以在视觉上声明相同的图标（android-icon-192x192.png），或重新设计适合您需要的应用程序图标，并在清单中使用适当的尺寸进行声明。
iOS Safari网络剪辑
iOS Safari希望看到一个苹果触摸图标。这是一个180x180的PNG图标，没有Alpha通道（没有透明度）。图标的四角将自动变圆，从而更易于创建Apple touch图标。
IOS用户还可以将站点添加到主屏幕，它看起来像一个应用程序。这样的链接显示为图标，称为Web剪辑。
以下图标尺寸旨在支持多种设备，例如iPhone和iPad：
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">在代码中，添加rel =“ apple-touch-icon”属性，并使用尺寸指定尺寸。
如果站点上没有图标的大小是设备建议的大小，则将使用最接近的较大图标。苹果触摸的主要图标是180x180图标。其他设备可以混合使用该图标。
创建图标时不要忘记填充。它们的所有面都必须至少为4px。这是为了防止您的图标被剪切，因为iOS应用程序图标具有圆角。
应该注意的是，并非只有iOS设备需要苹果触摸图标... 某些浏览器（例如Android Chrome）可能会使用苹果触摸图标，因为它们比其他高分辨率PNG图标更常见。
苹果系统
在Mac OS中，情况完全不同。如果用户尝试将站点保存到桌面，则将显示带有html代码的页面的屏幕截图，而不是站点图标。
要添加图标，您需要使用SVG格式，该格式允许您制作图标蒙版。当您在Safari中固定标签时，将显示此图标。
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">您需要在代码中添加rel =“ mask-icon”属性。SVG图标本身必须为黑色。图标的颜色在color =“＃e52037”属性中设置。
SVG图标用于单色的固定选项卡（无焦点）中。悬停时（固定的标签焦点），图标将以具有“颜色”属性的颜色绘制。“颜色”属性的颜色也传递到触摸栏。
创建图标时，您需要删除所有现有阴影，使其平坦而简单。您可以使用“ Union”和“ Flatten”操作将图标简化为单个对象。这些操作很容易在Figma中应用。
如果您不愿创建一个遮罩图标，浏览器将仅显示您站点域的首字母。
视窗
使用Windows，需要花些时间才能做好。
对于IE10及更低版本，必须使用ICO格式，因为IE11之前不支持PNG。
随着IE11和Windows 8.1的出现，将站点固定为活动磁贴成为可能。对于小图块，使用默认图标，但对于大图块和宽图块，则需要设置特定大小的图像。这可以通过将元数据标签添加到站点标记或通过创建browserconfig.xml（浏览器配置文件）来完成。
向大型图块的网站标记添加元数据标签的示例：
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">在这一行中，我们指定图块的背景色：
<meta name="msapplication-TileColor" content="#2b5797">您可以指定您的网站名称：
<meta name="application-name" content="My Application">什么是browserconfig？这是一个XML文档，列出了与Metro UI对应的各种图标。
要在标记中包含browserconfig文件，请将以下行添加到头部：
<meta name="msapplication-config" content="…/browserconfig.xml">文件本身将如下所示：
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>所述browserconfig文件定义不同片大小的图像。
Microsoft建议使用更大的图像尺寸来支持高像素密度的屏幕。
以下列表提供了使用不同大小的一些准则：
- 小型-70x70（建议尺寸：128x128）
- 中-150x150（建议尺寸：270x270）
- 宽-310x150（建议尺寸：558x270）
- 大-310x310（建议尺寸：558x558）
例如，对于70x70的图片，建议的尺寸为128x128。这意味着您需要创建一个具有透明背景的128x128图像，其名称将为mstile-70x70。对其余尺寸执行相同操作。
准备网站图标
在将图标添加到站点的根文件夹之前，需要进行准备。图标的原始大小不是很大，但是可以以最小的质量损失对其进行压缩。
例如，在我的情况下，所有图像的权重为200kb，压缩后为50kb。图像的质量几乎没有改变。您可以使用任何方便的图像压缩服务。我用过iloveimg。
结论
网站标记中的连接顺序：
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">使用代码的最后一行“主题颜色”，您可以用任何颜色绘制地址栏和通知栏。内容值设置颜色。
使用RealFaviconGenerator检查您的网站图标。该服务将向您显示图标在不同平台上的显示方式，并告诉您在哪里以及可能出现什么问题。
此外，此服务可以生成所需的大小，图标格式和代码。但是必须检查信号源是否存在所有建议的尺寸，以便在各种设备上正确显示。