本文译自 Andrey Sitnik 首发于 Evil Martians 的文章,讲述了如何用取巧省事的方法,打造一套符合现代网页和浏览器标准的 Favicon 图标集
📝 文章概述:
- 太长不看版
- 从传统完整图标集说起
- 我的 Favicon 图标类型选择
- 被遗忘的 Favicon 图标格式们
- 打造我们的终极 Favicon 图标集
Favicon 一般用于作为缩略的网站标志,它显示在浏览器的地址栏、标签或收藏夹上,是展示网站个性的缩略 logo 标志。传统完整图标集需要设置不同尺寸、不同种类的多张图标,以适应不同平台的展示需求。一些网站往往没有做 Apple touch icon,因此在 Safari 中展示出灰色的图标
本文中作者给出了自己的 Favicon 图标集方案,其中包含 5 个图标和一个 JSON 文件。只需一个 logo 的 SVG 文件,就可以开始制作。WordPress 等动态博客后台和插件支持快速设置 Favicon,静态博客可以根据本文的思路进行配置
在结尾,作者提到了想要做一个自动化工具完成上述步骤,但目前项目并未问世。即使不是前端从业者,普通博主也可以多加关注 Favicon 兼容情况、Meta 信息是否完善,以便自己的博客以最佳的样子呈现在访客面前。更多详情见 原文,针对翻译较为晦涩的地方,亦可直接阅读英文原文。
📘 关联阅读:How to Favicon in 2021 – Six files that fit most needs
📘 关联阅读:How to Favicon in 2021 – Six files that fit most needs 中文译文
频道:@NewlearnerChannel