网站发布后总是报错favicon.ico 403 not found. 坑很多啊!

生成favicon

自行ps一个正方形的图标,网页显示的尺寸是16×16,做的时候最好是用32×32,可以在线生成ico图标

设置位置

找到目录hexo\themes\modernist\layout_partial\head.ejs里:

<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">  
替换为:  
<link rel="icon" type="image/x-icon" href="<%- theme.favicon %>">  
如果主题文件里没有这句引用,就手动在里面加一下  

然后把favicon.ico放到hexo\source目录下
清除缓存,疯狂刷新页面就出来了

ps生成的也好,在线制作的图片也好,都是标量图,处理过实际效果会模糊,要多次调整文字位置的像素占用、字体、以及文字抗锯齿方式 才能让ico在网页上显示不模糊

多次生成结果:

  • 图标的垂直位置得居中,也就是说:图标画布的顶边距 = 底边距
  • 图标自身高度所占用像素点,得是双数
  • 字体、图标少拐弯,抗锯齿方式最好用”锐利”这种比较清晰,没有模糊边

我的图标:字体:Gadugi(Regular) + 锐利 + 19像素字(实际图片里高18px),顶边距=底边距=7px