起因

搭博客的过程中有一个问题就是在浏览器收藏夹以及被保存到桌面以后显示的Logo。在很久以前, 我们只需要在网站根目录下面放置一个
favicon.ico ,然后在页面中加入:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

如果不加这样的meta,许多浏览器照样也能按照传统直接尝试获取这个文件。甚至,现在这个标签已经被不推荐添加了,因为这有可能对现代浏览器造成困扰,详情见:
Why is favicon.ico not declared in the HTML code?
好吧,我知道你不想读,大意就是这样可能干扰浏览器寻找清晰度更好的 png 等格式作为 favicon。
但是到如今这样一个各种浏览器和移动操作系统遍地开花层出不穷的年代,如何使你的网站在各个浏览器中都能有最好的体验,就成了很麻烦的事情,往往要自己制作许多不同大小格式的图标并且写很多配置。

救星

我Google到了很多相关内容,但基本都是对于单一平台而没有一揽子解决方案的,在这时我在 StackOverflow 的一个回答中看到了这样一个网站:
Real Favicon Generator
只需上传一个较高分辨率的图标,并选择在各种平台上你所需的样式(有实时预览),网站就会生成一个 zip 包供你下载。你所要做的就是把它解压缩到你的网站根目录下,然后把网站给出的 HTML 代码(大概如下:)

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#436614">
<meta name="msapplication-TileColor" content="#436614">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="theme-color" content="#5db2ff">

粘贴到网页源文件合适的地方(一般是 <header> 中)就好。当然,如果你嫌文件太多太零碎,也可以把它放进另外的地方,只是一些配置,例如browserconfig.xmlmanifest.json需要更改。但是这样做是不推荐的,详细原因是:
Why do you recommend to put all files at the root of the web site?
用简洁的话说就是:

标准顶个X用!你不跟着Apple, Microsoft和Google玩就是找死!

最后

什么时候,W3C 能再制定一个统一的标准就好了。 :-)