更换Hexo的网页图标/小图片Hexo change page favicon
自己原创文章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.更换内置主题 选择文件->首选项->颜色主题进入主题设置界面, ...
最新文章
- 华为2016年应届毕业生招聘公告
- VS2008常见编译错误（总结篇）
- 未处理的异常：进程性能计数器已禁用
- ruby on rails 之图片压缩
- 智表ZCELL产品V1.4.0开发API接口文档 与 产品功能清单
- 如何设置Eclipse新建项目的默认编码方式
- ToString yyyy-MM-dd ,MM 小写的故事。
- 软景php,你不得不知的软景配置标准
- JzxxOJ 1299 半斤八两 题解
- 「解析」netron 模型可视化
- win10打开计算机闪屏,Win10打开资源管理器闪屏怎么办？Win10资源管理器闪屏问题的解决方法...
- 令人心酸的100个微瞬间 不信你不会被触动 别落泪哦
- android 平板 旗舰,聊一款旗舰级安卓平板电脑
- 少年成长篇。。。作文素材
- pycharm编写的py文件如何在linux下通过 ./ 运行，初识shebang
- 2021-7-9 学习记录：前端动画制作钟表
- 汽车自动泊车辅助系统APA(上)
- 【转载】androidstudo如何跨越这个厚厚的墙，亲测有效 Could not resolve com.android.tools.build:gradle:
- 致远SPM解决方案之进度管理
- java画满天星_java实现的满天星效果实例