2024-10-25 
2024-10-25 写在前面
虽然本文有用到第三方在线工具，但你想手搓的话也是完全可行的。
本文将以png做favicon为例，用text和emoji同理。
方法步骤
工具相关
- 访问favicon.io，点击PNG → ICO
- 把图片拖进长方形区域，或者通过点击上传
- 点击Download
- 把favicon_io.zip保存到网站根目录后解压缩
- 滚到下面，有一段代码，点击Copy备用
网站相关
- 打开主题的header.php文件
- 把之前Copy的代码粘贴进<head></head>内部，保存
开始折腾
听话的孩子到上一步就结束了，很不巧，我是反骨仔，我就不要保存在网站根目录！
那你想保存在哪呢？
当然是我的图库啦！图片通通丢一起去，ico也算图片，跟png待一块去吧！
那要改哪里呢？
要改两个地方：一是插进head里的代码，二是解压后的site.webmanifest文件。
那要怎么改呢？
把引用地址改成实际的路径就可以啦~
我是在我的图库新建了一个favicon文件夹，然后把解压后的所有东西都丢进去了。
所以我的实际地址的前缀是https://img.kazelife.com/favicon/而不是代表根目录的/。
示例代码
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}我的版本
<link rel="apple-touch-icon" sizes="180x180" href="https://img.kazelife.com/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://img.kazelife.com/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://img.kazelife.com/favicon/favicon-16x16.png">
<link rel="manifest" href="https://img.kazelife.com/favicon/site.webmanifest">{"name":"","short_name":"","icons":[{"src":"https://img.kazelife.com/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"https://img.kazelife.com/favicon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}为什么要这么麻烦呢？代码不是变得更长了吗？
因为我希望网站本体的备份越小越好，不希望夹带着多余的图片；
因为我希望后期编辑或更改图片时，不用把整个网站都部署一遍；
因为我希望图片都能被归置在一处地方，不用想用到时找来找去；
……
综上所述，我就这么多此一举地折腾了！爱咋咋的吧！
什么，我都说到这份上了，你居然不嫌麻烦也想搞个图库？
既然你也是喜欢一劳永逸的同道中人，那就点这里跟我拥有同款图库吧！