如何只加载与屏幕兼容的图标图标？

Question

<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（状态代码）？我的意思是它应该只渲染与我的屏幕兼容的那个？我该怎么做？

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

如何只加载与屏幕兼容的图标图标？

How to only load favicon icons compatible with screen?

html

css

media-queries

favicon