本文译自 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