如何仅加载与屏幕兼容的 favicon 图标？答案

【问题标题】：How to only load favicon icons compatible with screen?如何仅加载与屏幕兼容的 favicon 图标？
【发布时间】：2021-08-03 05:17:29
【问题描述】：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>resume</title>
<link rel="icon" type="image/png" href="./favicon_io/favicon.ico">
<link rel="icon" type="image/png" href="./favicon_io/favicon-32.png" sizes="32*32">
<link rel="icon" type="image/png" href="./favicon_io/favicon-16.png" sizes="16*16">
<link rel="icon" type="image/png" href="./favicon_io/android-192.png" sizes="192*192">
<link rel="icon" type="image/png" href="./favicon_io/favicon-512.png" sizes="512*512">

我的问题是为什么我的本地主机在其余的图像请求中制作 200 第一个（状态代码）和 304（状态代码）？我的意思是它应该只渲染与我的屏幕兼容的那个？我该怎么做？

【问题讨论】：

大小应该用x而不是*定义

标签： html css media-queries favicon

【解决方案1】：

正如 Sysix 所说，您应该使用 x 而不是 * 作为尺寸。

这是我默认使用的典型代码块，多年来我拼凑起来尝试覆盖大多数浏览器的网站图标。似乎工作。我还在 Photoshop 中设置了一个动作，因此只需单击一下，我就可以生成所有尺寸。然后我使用xiconeditor.com 为需要它的旧浏览器生成一个 favicon.ico。

如果有遗漏的话，我会再搜索一些。

<link rel="icon" sizes="32x32" href="/images/icons/icon-32.png">
<link rel="icon" sizes="48x48" href="/images/icons/icon-48.png">
<link rel="icon" sizes="96x96" href="/images/icons/icon-96.png">
<link rel="icon" sizes="128x128" href="/images/icons/icon.png">
<link rel="icon" sizes="144x144" href="/images/icons/icon-144.png">
<link rel="icon" sizes="160x160" href="/images/icons/icon-160.png">
<link rel="icon" sizes="192x192" href="/images/icons/icon-192.png">
<link rel="icon" sizes="196x196" href="/images/icons/icon-196.png">
<link rel="icon" sizes="228x228" href="/images/icons/icon-228.png">
<link rel="icon" sizes="256x256" href="/images/icons/icon-256.png">
<link rel="icon" sizes="384x384" href="/images/icons/icon-384.png">
<link rel="icon" sizes="512x512" href="/images/icons/icon-512.png">
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/icons/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon-180.png">
<!--[if IE]>
    <link rel="shortcut icon" href="/images/icons/favicon.ico">
<![endif]-->
<meta name="msapplication-TileColor" content="#222">
<meta name="msapplication-TileImage" content="/images/icons/ms-tile-144.png">
<meta name="theme-color" content="#222">

如果你使用的是WordPress，可以使用以下php添加到文件路径中来获取模板目录：

<link rel="icon" sizes="32x32" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/icon-32.png">

【讨论】：