近日上线了一个小网页, 但是, 看到地址栏和书签栏没有ico, 决定弄一下.

地址和书签的ico比较好弄

<link rel="shortcut icon" href="http://p.oksir.cn/favicon.ico" /> <!-- 这行是ico写法, 不过现在都推荐下面一行, png的写法-->
<link rel="icon" type="image/png" href="http://p.oksir.cn/favicon.png" />
<!-- ok 各种ico都好了, 这个很简单, 但是, 马上我发现苹果有Safari’s pinned tabs support, 这个没关系, 查查资料, 应该是下面的写法-->

<link rel=”mask-icon” sizes="any" href=”http://p.oksir.cn/only_black100.svg” color=”#ff7c00”>

然后, 结果是上面这句话, 就#ff7800发挥了作用, 我猜是svg有问题, 做了如下修改:

  1. 原图背景是黑色的, 另外, 猜测size=any是有意义的.
  2. 删除本身的size数字.
  3. 图不能有第三种颜色, 必须黑白, 不能有灰.
  4. 白色, 苹果会当成前景色, 这就是为啥透明背景的svg会成功的原因.
  5. 貌似原因是我的path层次太多, 一堆group, mask啥的, 因此, 就不对了.

然而上面这些修改并没有卵用, 当然了, path太多这事我也改不动. 然后, 我找到了神器的网站:

[https://realfavicongenerator.net]

结论非常令人崩溃, 即便网站生成的也不行. 不过这个网站还算是半神, 因为, 他生成的其他的都是好用的. 只有这个pinned ⇥不支持.

本地查看修改效果:

~/Library/Safari/Template Icons/

这个目录可以看到, 自动生成的png. 如果成功解析了pinned ⇥ icon.

参考

<link rel="mask-icon" sizes="any" href="/system/cloudos/16FProject130/cloudos_foundation/16FProject130/en-us/resources/images/icloud_icon_for_tabs.svg" color="#5AC8FA"/>
<!-- 苹果icloud页面是上面的写法-->
苹果的svg是下面这个, 大家可以打开看看源码, 确实非常简洁.
https://www.icloud.com/system/cloudos/16FProject130/cloudos_foundation/16FProject130/en-us/resources/images/icloud_icon_for_tabs.svg