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

最新推荐文章于 2023-03-12 19:17:59 发布
最新推荐文章于 2023-03-12 19:17:59 发布
阅读量4k 收藏 2
点赞数 4
分类专栏： GitHub GitHub Pages 文章标签： GitHub Pages Favicon 图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfod1997/article/details/98107975
版权

静态工程站点

如果 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. 提交所有更改

阿远的脱发之旅
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
展示github中的页面（Github Pages）
weixin_30933531的博客
03-14 135
一、创建一个仓库，名为"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 88
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上设置小图标/小徽章
void_xinyue的博客
05-17 3136
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..
Favicon.ico
一切都是浮云
03-22 983
所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳f...
利用github pages+GitHub Actions+Hugo搭建个人博客
我的博客
11-23 1089
利用github pages+GitHub Actions+Hugo搭建个人博客
favicon.ico的三种下载方式
m0_58362792的博客
11-08 5839
在工作中，有时候我们会需要用到一些网站图标，但是浏览器上没有提供直接下载网站图标的方法，想要下载必须使用一些技巧，本文中就来分享下获取网站 favicon 的几种方法。
alerithe.github.io:我的个人GitHub Pages存储库
04-29
为了使这个网站在GitHub Pages上正常运行，用户需要遵循一定的部署流程，例如设置自定义域名（如果需要）、配置CNAME文件（用于自定义域名）以及在GitHub上发布更新。此外，GitHub Pages支持Jekyll，一个静态站点...
personal-website:我的个人Github Pages网站
04-04
GitHub Pages允许用户上传静态网页，这些页面可以通过自定义域名或者默认的GitHub Pages地址进行访问。在这个项目中，“personal-website”是一个示例，它展示了如何构建并部署一个简单的个人网站。 **JavaScript**...
ZakGhost354313.github.io
04-13
5. **设置自定义域名**：如果需要更专业的外观，可以将GitHub Pages与自定义域名关联。 6. **优化SEO（搜索引擎优化）**：确保页面标题、描述等元素有利于搜索引擎收录和排名。 7. **添加社交网络链接**：让访问者能...
alejanzzz.github.io:在Github Pages上发布的Certus项目
04-07
4. **设置GitHub Pages**：在仓库的设置页面启用GitHub Pages服务，并选择源分支和目录（通常选择`main`分支的根目录）。 5. **发布**：完成以上步骤后，GitHub Pages会自动构建并发布网站，用户可以通过`...
arjangupta.github.io：此帐户的中央GitHub Pages存储库
02-13
8. **其他资源**：如robots.txt（告诉搜索引擎如何索引网站），或者favicon.ico（网站图标）等。 综合以上分析，我们可以推测这个GitHub Pages项目是一个包含HTML、CSS、JavaScript的静态网站，可能使用Jekyll工具...
iconify图标使用
m0_61989957的博客
03-12 4270
iconify图标 离线使用
获取github图标
weixin_34252686的博客
11-16 1823
2019独角兽企业重金招聘Python工程师标准>>> ...
Github Pages部署个人博客（Hexo篇）
weixin_34349320的博客
04-12 424
前言 想在Github上搭建一个个人博客，在网上找了不少的文章，但有的是使用的旧版本，有的语焉不详，最后还是磕磕绊绊地搭起来了，因此写了这篇文章，对自己踩过的坑进行一个总结。水平有限，还请见谅。 博客地址：传送门 系统环境 Windows 10 教育版 Node.js v8.7.0 Npm v5.4.2 Git v2.13.0 在GitHub上创建Github Pages项目 1. 创建新仓库...
定制Github上的小图标/小徽章
兮动人
08-14 1216
对于经常刷github的小伙伴来说，这种图标确实太常见了，下面就介绍下怎么定制自己独具一格的图标 如：Vue 上的图标 F12 查看 Vue 上的图标，发现图片指向一个地址
github的README上加入标签/图像链接/badges
Castlehe的博客
02-02 4941
https://github.com/bipinKrishnan/fastai_course/blob/master/README.md 加入colab和binder链接。 加入aswsome标签
用Github Pages建了一个主页示例
justforuse的博客
04-02 1391
至于为什么试了一次Github Pages，完全是刷知乎关于建立个人网站的时候看到的，虽说买了一个域名用来学(de)习(se)，但站多不压身啊~按照官网的指导就做成了一个个人网站，步骤还算简单，也不需要很长时间。官方网站(上不去的话自己想办法吧，这事儿不能说的太细）简单的翻译一下流程： 在Github上建立一个新的目录，项目名称为 xxxx.github.io（xxx就是你的github用户名），剩
hexo+Github Pages博客美化及优化
Orient
10-23 577
本人博客地址：zhyoung.cn 博客打开太慢 编辑主题配置文件，注释一行代码： family: Lato 编辑/themes/next/layout/_partials/head/external-fonts.swig文件，把fonts.googleapi.com改为fonts.useso.com 指定不渲染文件 在Hexo目录下的source目录下添加不需要渲染的文件：te...
如何搭建一个独立博客——简明Github Pages与Hexo教程
热门推荐
poem_of_sunshine的专栏
06-08 7万+
摘要：这是一篇很详尽的独立博客搭建教程，里面介绍了域名注册、DNS设置、github和Hexo设置等过程，这是我写得最长的一篇教程。我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来，希望能给后来者一个明确的指引，同时用这篇教程开篇，正式开始我的第八大洲之旅。 前言 作为一个技术小白，没有技术基础，看网上的教程也云里雾里，看程序员的教程相当不容易，稍微有些细节描述得不清楚自己就要绕弯路去
GitHub Pages
最新发布
08-22
GitHub Pages是一个允许用户将GitHub仓库转换为网站的服务。通过GitHub Pages，您可以展示您的简历、项目、文档或任何其他内容。您可以在GitHub Pages上创建个人网页、项目页面或文档页面，使用自己设计的内容和组织架构。GitHub Pages提供了简单的方式来搭建和托管您的个人网页或项目页面。您可以使用git命令上传文件至GitHub仓库，或者直接在GitHub仓库内选择已编译好的index.html文件来快速搭建网页。GitHub Pages的URL由您的GitHub帐号名和仓库名组成，例如如果您的GitHub帐号为mygithub，需要发布的仓库名为myrepo，那么该页面的URL将为：https://mygithub.github.io/myrepo。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages，打造个人博客网站，展示个人简历、...](https://blog.csdn.net/Xminyang/article/details/125239381)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [github pages 用法详解](https://blog.csdn.net/lancemao/article/details/126497147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值