更换Hexo的网页图标/小图片Hexo change page favicon

本文介绍Hexo主题中favicon图标的修改方式,仅适用于被修改的主题。先准备好图片,利用在线工具(如bitbug)制作成16x16和32x32的图标,将图标放到主题下的source/images路径,编辑配置文件指定新图标,最后发布网站到master分支。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自己原创文章link: https://wangxiaoyu-go.github.io/2018/11/18/change-theme-favicon/


Table of Contents

说明

制作favicon图标

图片位置与编辑配置文件


 

说明

本文介绍的是主题theme配置文件中的修改方式,也就是说仅适用于被修改的主题。
另外还有在hexo根目录下设置favicon的方式,虽然这种方法的好处是无需再各个主题单独设置,以下原因没有使用:
1.考虑到标签页/网页小图标favicon的颜色style等还是要和theme结合比较美观
2.试了在hexo根目录配置文件中设定的方式,并没有成功

关于所说明的标签页小图标,即favicon,效果如下,
修改前(next主题):

修改后:

制作favicon图标

  1. 准备好用作标签页/网页小图标favicon的图片
  2. 搜索favicon 在线,可以看到一些在线图片转favicon的工具
    我用的是这个(link): bitbug
  3. 利用工具做成图标。
    我做了16x16,与32x32的。

图片位置与编辑配置文件

1. 图片位置

打开next主题的_config.yml文件,favicon:有以下内容:

favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png

也就是说当前使用的图标位置路径是 主题下的 source/images 。
把刚才制作好的图标放到这里。

2. 编辑配置文件

在next主题的_config.yml文件,修改新的图片作为favicon的对象:

favicon:
small: /images/favicon16.ico
medium: /images/favicon32.ico

然后在本地环境就能看到效果了。
其他还是执行hexo g,  hexo d发布网站到master分支上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值