如何给 GitHub Pages 页面设置图标 (favicon)

最新推荐文章于 2024-09-02 15:11:05 发布
原创 最新推荐文章于 2024-09-02 15:11:05 发布 · 4.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#GitHub Pages #Favicon #图标

本文详细介绍如何在GitHubPages上为静态网站或纯Markdown站点添加Favicon图标，包括修改站点配置、更新index.html文件及复制主题布局等步骤。

静态工程站点

如果 GitHub Pages 是用一个完整的静态工程来做的，那么很简单：

  1. 向站点根加入一张图片 favicon.ico（未测试 png 格式）

  2. 向静态站点的 index.html 的 <head> 节点加入子节点：

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">

纯 Markdown 站点

如果是纯 Markdown 页面，则需要覆盖当前套用主题（theme）的默认布局：

  1. 首先需要去找到当前主题的模板文件（raw）：

    raw.githubusercontent.com/pages-themes/你套用的主题名，比如：cayman、minimal等等/master/_layouts/default.html

  2. 把这个文件的内容全部复制

  3. 在自己仓库根目录下新建个目录 _layouts ，在里面新建个文件 default.html ，把复制的内容粘贴进去

  4. 向这个文件的 <head> 节点加入子节点，内容同前文那一行

  5. 最后还是要往仓库的根目录里加入 favicon.ico

  6. 提交所有更改

打造完美写作系统：Gitbook+Github Pages+Github Actions
悲伤无声地涌出来
11-24 5027
最开始的灵感来源为使用 travis + gitbook + github pages 优雅地发布自己的书[^1]，后来在学习的过程中发现Github Actions和Github结合的更加密切，因此将Travis CI替换成了Github Actions，并在原文的基础上进行了一系列优化。
解锁SSG新姿势：用VitePress&Github Pages搭建免费个人网站
最新发布
weixin_60895836的博客
01-01 1263
SPA、SSR、CSR这些概念大家应该都耳熟能详，而我们今天要引出的 SSG——静态网站生成，有点像是介于 SSR 和 SPA 之间的一种模式。下面我们讲一下SSG是什么以及如何使用 VitePress 与 Github Pages 免费搭建个人网站。
展示github中的页面（Github Pages）
weixin_30933531的博客
03-14 241
一、创建一个仓库，名为"user_name.github.io"（此处user_name替换为你自己的github用户名），并在根目录下创建index.html，则该仓库下的所有html均可直接展示 例： 通过http://user_name.github.io/ 可直接展示"user_name.github.io"仓库根目录下的index.html 通过http://user_nam...
put a favicon for github pages
weixin_30699463的博客
01-14 138
put the picture "favicon.ico" in the root of your web page repo.then add the following line in the "<head>" of the "index.htm": <link rel="shortcut icon" type="image/x-icon" href="/fa...
利用github pages+GitHub Actions+Hugo搭建个人博客
我的博客
11-23 1368
利用github pages+GitHub Actions+Hugo搭建个人博客
Github上设置小图标/小徽章
void_xinyue的博客
05-17 3581
github 上的小图标看上去很炫酷 如何实现 基本格式如下https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg 一个 markdown 例子![example](https://img.shields.io/badge/example-v1.0-red.svg) csdn显示不出来，可以复制到github或者其他markdown编辑器查看 原理解释 这个 shields 网站专门生产这种自定义的徽标。 比如 https://img.sh..
解决Github Page 部署favicon不生效的一种办法
淼miaomiao的博客
08-04 510
写了一个光遇游戏红石降落时间预测小网页，部署到Github上后却发现原本本地部署能加载的favicon 图标在Github Page加载不了。经过尝试，发现将根路径改为相对路径"./" 后重新提交部署，favicon就能正常显示了。另外通过FastGithub能免费加速访问Github.
personal-website:我的个人Github Pages网站
04-04
GitHub Pages允许用户上传静态网页，这些页面可以通过自定义域名或者默认的GitHub Pages地址进行访问。在这个项目中，“personal-website”是一个示例，它展示了如何构建并部署一个简单的个人网站。 **JavaScript**...
基于GitHub Pages的个人主页源码
“rharish101.github.io:我的个人主页”这一标题所指向的项目，是一个基于GitHub Pages平台构建并托管的个人网站源代码仓库。该项目不仅体现了现代网页开发中静态网站设计与部署的核心理念，也展示了开发者如何利用...
Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
zdaiot的博客
09-25 6187
前言 马上要进入研究生了，不能再过浑浑噩噩的日子了，搭建一个小网站，用于记录自己所学的东西。其实，之前在腾讯云1元乞丐版上也搭建过博客，但是呢，只用来扯淡了。这次使用 GitHubPages 和 Hexo 建立自己的博客，希望能够促进自己成长。 下面先介绍为何选择 GitHubPages 和 Hexo 来搭建博客，然后介绍搭建博客的详细过程。 Why GitHub Pages and Hexo 因...
Favicon.ico
一切都是浮云
03-22 1129
所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳f...
favicon.ico
weixin_33811539的博客
08-15 730
favicon.ico favicon ico webpack html favicon 收藏夹图标， 是favorite icon的缩写，显示在浏览器收藏夹中以及地址栏左侧，或者是windows桌面上某个网页的快捷方式 这个就是favorite icon html代码 <!DOCTYPE html> &l...
favicon.ico 是什么？
youhebuke225的博客
08-26 3125
是一个网站图标文件，它通常显示在浏览器的地址栏、标签页或书签栏中，用于代表一个网站或网页。favicon是 “favorite icon” 的缩写，虽然它实际上并不总是用户的最爱图标，但它已经成为了网站图标的通用术语。
网站favicon图标制作、引用
听海边涛声
09-02 820
网站favicon图标制作、引用
如何给自己的GitHub项目增加各种图标
_
04-14 2091
访问 https://github.com/badges/shields 这个项目，包含非常丰富的GitHub图标，然后根据readme.md 的图标来源服务，集成 GitHub项目，就可以逐步添加了
favicon.ico的三种下载方式
m0_58362792的博客
11-08 9630
在工作中，有时候我们会需要用到一些网站图标，但是浏览器上没有提供直接下载网站图标的方法，想要下载必须使用一些技巧，本文中就来分享下获取网站 favicon 的几种方法。
iconify图标使用
m0_61989957的博客
03-12 5548
iconify图标 离线使用
获取github图标
weixin_34252686的博客
11-16 1920
2019独角兽企业重金招聘Python工程师标准>>> ...
Github Pages部署个人博客（Hexo篇）
weixin_34349320的博客
04-12 480
前言 想在Github上搭建一个个人博客，在网上找了不少的文章，但有的是使用的旧版本，有的语焉不详，最后还是磕磕绊绊地搭起来了，因此写了这篇文章，对自己踩过的坑进行一个总结。水平有限，还请见谅。 博客地址：传送门 系统环境 Windows 10 教育版 Node.js v8.7.0 Npm v5.4.2 Git v2.13.0 在GitHub上创建Github Pages项目 1. 创建新仓库...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值