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

2024-05-03 13:15:57

自己原创文章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图标

准备好用作标签页/网页小图标favicon的图片
搜索favicon 在线，可以看到一些在线图片转favicon的工具
我用的是这个（link）： bitbug
利用工具做成图标。
我做了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分支上。

更换Hexo的网页图标/小图片Hexo change page favicon相关推荐

Hexo攻略-更换网页图标
Hexo攻略-更改网页图标 Hexo next主题默认的网页图标长这个样子~ 当然要和别人不一样! 下载图标自己也可以绘制,懒得话就去下载,到这里进行下载,ico文件和png都可以,我下载的是ico ...
搭建hexo博客修改设置网页图标icon失败的解决方法
问题描述基于hexo新搭建好的个人博客想更换网页图标的icon 期望达到的效果更换前: 更换后: 背景我用的chrome浏览器,使用的是yilia主题,参考前端 | hexo+yilia博客主 ...
Hexo博客中插入图片，在网页中无法显示：采用图床外链的方法
个人博客:小序的时光机,欢迎访问! 最近在用Hexo搭建博客过程中,发现如果在博文中添加本地图片,网页上的图片无法显示.网上的搜到的方法很多都是利用hexo-asset-image插件,然而该插件还是 ...
hexo上传网页无法显示图片的有效解决方法
本文是hexo+github快速搭建html5一文的一部分:https://alvincr.com/2021/01/hexo-with-github_pages/#i-4 个人博客:alvincr.c ...
网页收藏栏小图标＿如何设置在网页地址栏中的小图标
网页中如何设置在网页地址栏中的小图标 <link rel="icon" href="/dir/favicon.ico" mce_href="/d ...
html文件hexo博客,使用小书匠写 MarkDown 文档 Hexo 博客
小书匠是一个功(zhong)能(liang)强(ji)大的 MarkDown 文档编辑器,除了支持常规的 MarkDown 语法,还要很多扩展语法(代码高亮 ,gfm ,脚注 ,上标 ,下标 ,文字高 ...
html让图片位置固定缩放不改变为HI,CSS Sprites技术实现一张图片上很多小图片，分别定位到网页的不同位置...
之前,一直看到百度站长工具有个页面优化建议的功能,其中多次提到css Sprites这个词,当时也就是想到减少图片加载次数这个好理解,怎么做?却一直都没有去深思.今天偶然看到一个网站小图标都在一张背景 ...
fontAwesome代替网页icon小图标
fontAwesome代替网页icon小图标引言奥森图标(Font Awesome)提供丰富的矢量字体图标-通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都 ...
【宇宙最强编辑器VS Code】（二）美化VS Code（更换主题和文件图标主题、设置背景图片）
上百篇原创人工智能系列教程,从理论到实战,手把手带你掌握人工智能,点击☞这里☜进入传送门~ 1.VSCode更换主题 1.1.更换内置主题选择文件->首选项->颜色主题进入主题设置界面, ...

最新文章

热门文章