HTML 网站图标：.ico还是.png正确的标签使用方法|极客笔记
HTML 网站图标：.ico还是.png正确的标签使用方法|极客笔记
极客笔记
源码Opengrok视频课程
当前位置：极客笔记 > HTML > HTML 问答 > HTML 网站图标：.ico还是.png正确的标签使用方法
HTML 网站图标：.ico还是.png正确的标签使用方法
HTML 网站图标：.ico还是.png正确的标签使用方法
在本文中，我们将介绍HTML网站图标的使用方法以及如何选择正确的图标文件类型和标签。
阅读更多：HTML 教程
什么是网站图标？
网站图标，也被称为浏览器图标或favicon，是显示在浏览器标签页、书签栏和浏览器收藏夹中的小图标。网站图标可以提高网站的专业性和可识别性，使其在用户的书签列表中更易于识别。
选择正确的图标文件类型
通常，网站图标的文件类型可以是.ico或.png。.ico是Windows操作系统的图标文件格式，而.png是一种透明背景的图片格式。那么到底应该选择哪种文件类型呢？
.ico文件类型
.ico 文件类型是最早被广泛接受的网站图标文件类型，它可以在多个操作系统和浏览器上正常显示。使用 .ico 格式的图标可以确保在各种平台上以最佳方式呈现。
.png文件类型
随着网页设计和开发的发展，现在也可以使用 .png 文件类型作为网站图标。.png 在透明性方面更加灵活，可以允许图标具有透明的背景，这样能够更好地与不同网页背景颜色融合。此外，.png 格式也提供了更高的图像质量。
综上所述，.ico 文件类型是传统和通用的选择，适用于基本的网站图标需求。而 .png 文件类型则提供了更大的自由度和高质量的图像。
正确的标签使用方法
在HTML中，正确使用 标签是添加网站图标的方法。下面是使用 .ico 和 .png 文件类型的示例：
使用 .ico 文件类型
在这个示例中，我们使用了一个名为 favicon.ico 的 .ico 文件作为网站图标。通过添加这个 标签，浏览器会自动加载和显示该图标。
使用 .png 文件类型
这个示例中，我们使用了一个名为 favicon.png 的 .png 图片文件作为网站图标。同样地，通过添加 标签，浏览器会加载并显示这个图标。
需要注意的是，href 属性指定了图标文件的路径，你需要将其替换为你实际的图标文件路径。
其他标签和属性
除了上述 标签外，还有一些其他的标签和属性可以增强网站图标的呈现效果，包括：
apple-touch-icon：用于在iOS设备的主屏幕上显示图标。
shortcut icon：用于在旧版本的Internet Explorer浏览器中显示图标。
sizes：指定图标在不同设备和分辨率下的尺寸。
color：指定图标的颜色。
这些标签和属性可以根据需要添加到 标签中，以增强网站图标在不同平台和设备上的展示效果。
总结
通过本文，我们了解了HTML网站图标的使用方法和如何选择正确的图标文件类型和标签。我们知道了.ico文件是传统和通用的选择，并且适用于基本的网站图标需求。而.png文件提供了更大的自由度和高质量的图像。无论是选择.ico还是.png，借助正确的标签，我们可以轻松地为网站添加一个专业和独特的图标。
所以，当你构建自己的网站时，不要忘记添加一个独特的网站图标，这将提高你网站的品牌识别度和用户体验。
上一篇 HTML 提交 GET 表单时，查询字符串会从动作 URL 中移除
下一篇 HTML 使用JavaScript在上传之前如何检查文件MIME类型
Camera课程
API2 教程
Perf 教程
Native FW 教程
ISP 教程
Sensor 教程
Python教程
Python 教程
NumPy 教程
Django 教程
Java教程
Java 教程
Web教程
JavaScript 教程
jQuery 教程
CSS 教程
PHP 教程
Laravel 教程
TypeScript 教程
WordPress 教程
数据库教程
SQL 教程
SQLite 教程
MySQL 教程
PL/SQL 教程
MongoDB 教程
图形图像教程
OpenCV 教程
办公软件教程
Excel 教程
Linux教程
Linux命令全集
Linux内核API
LVGL 教程
计算机教程
操作系统 教程
计算机网络 教程
C语言 教程
C++ 教程
Swift 教程
大数据教程
Hadoop 教程
Spark 教程
Scala 教程
开发工具教程
Git 教程
Jenkins 教程
ChatGPT 教程
IntelliJ 教程
文章目录什么是网站图标？选择正确的图标文件类型.ico文件类型.png文件类型正确的标签使用方法使用 .ico 文件类型使用 .png 文件类型其他标签和属性总结
© 2024 极客笔记 蜀ICP备20003487号-1
友情链接：极客教程 |Matplotlib Tutorials | CSS Tutorials | Numpy Where
回顶回顶部
引入阿里iconfont图标方法以及注意事项 - 知乎
引入阿里iconfont图标方法以及注意事项 - 知乎切换模式写文章登录/注册引入阿里iconfont图标方法以及注意事项tuonioooo计算机技术与软件专业技术资格证持证人背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/ 在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标，加入购物车。点击页面右上角的购物车图标，打开自己的购物车，选择添加至项目，我们就可以在自己的项目下看到添加的图标了。在我们的项目下，可以对图标进行编辑，如：大小、颜色、填充色，旋转等操作。Vue工程中引入iconfont官方文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code根据官方文档，有unicode引用、font-class引用、symbol引用三种引入方式，这三种方式又分有两种情况：下载到本地引入，在线链接引入。在Iconfont网页我们自己的项目下可以看到这些方式选择。unicode引用 不推荐本地引入unicode方式代码量少，并不需要下载本地文件。链接引入unicode模式下的在线链接指的是font-face代码。在vue中，将项目生成的font-face代码和自定义的iconfont样式写在App.vue的style中，就可以在项目中引用图标了。此时样式是全局作用的，如果想要实现图标不同的样式，可以增加一层自定义样式。在”myIconStyle”样式中修改color等属性可以覆盖全局的样式，实现单个的样式修改。这里注意理解下，官方文档说的“不支持多色”，是指我们iconfont网页项目中，就算有多色图标，引用的时候会自动去色，统一变成默认的颜色，不管你给图标一编辑了红色图标二编辑了黄色，在项目中用unicode方式引用的时候都会变成默认颜色，但是我们仍然可以通过修改css样式实现图标颜色自定义，只是这个颜色编辑放在代码层面来了。font-class引用 推荐使用如官方文档所说，font-class是为了让程序更加直观可读，直接用unicode会造成阅读困难。font-class模式关键在于生成的css文件。本地引入按照下图选择文件放入自己的项目中，vue中建议在assets文件夹下新建一个iconfont文件夹，放相关文件。常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2@font-face {
font-family: "iconfont"; /* Project id 2974228 */
src: url('iconfont.woff2?t=1640340931514') format('woff2'),
url('iconfont.woff?t=1640340931514') format('woff'),
url('iconfont.ttf?t=1640340931514') format('truetype');
}再就是引入时，需要注意的是字体文件路径引用是否准确，否则打包可能不识别然后在main.js中引入iconfont.css文件，就可以正常使用了。import './assets/iconfont/iconfont.css'链接引入方式一：在index.html头部中，引入css文件即可方式二：点开css代码链接复制css代码，在项目中粘贴到iconfont.css文件中 ，在App.vue或main.js中引入import './assets/iconfont/iconfont.css'注意：iconfont.css中url 官方默认是cdn 链接, 打包时请改成http否则不识别@font-face {
font-family: "iconfont"; /* Project id 2974228 */
src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),
url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),
url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');
}打包后@font-face {
font-family: "iconfont"; /* Project id 2400747 */
src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),
url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),
url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');
}symbol引用 不推荐本地引入将下载好的iconfont.js文件放入自己的工程目录，在main.js中引入，在App.vue中写好通用css代码，即可使用。import './assets/iconfont/iconfont.js'这里注意一点，下载下来的js文件是压缩过的，如果项目使用了eslint语法校验会疯狂报错，可以在js文件开头加入 /* eslint-disable */来指定该文件不应用eslint校验。链接引入在index.html头部中，引入js文件即可uni-app 引入iconfont图标基本上引入方式跟上Vue相同，但是会遇到打包时图标引入不显示的问题，解决方式如下：1.在iconfont.css中，需要使*~@* 将路径添加完整@font-face {
font-family: "iconfont"; /* Project id 2642111 */
src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),
url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),
url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');
}2.在App.vue全局引入iconfont.css3.使用图标，在标签内的class通过"iconfont icon-"添加下载好的图标即可
总结 symbol引用最受官方推荐，也是最优的方式，但是浏览器兼容不好，目前来看，前端需要兼容一些低版本的浏览器，所以如果考虑到用户使用，不建议采用symbol引用。 unicode引用浏览器兼容最好，但是可读性差，font-class引用虽然兼容性比unicode引用差一点，但是提高可读性，综合来看，目前项目中还是采用font-class引用比较好。 因为引用网络资源的不稳定，所以建议采用本地引入的方式。 如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件。 再就是引入时文件路径的问题，打包都需要注意。点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！往期推荐分享6个实用的网站，非常Nice利用Vue 脚手架 开发chrome 插件，太方便了！Vue类似hooks的新库VueUse使用NodeJs和JavaScript开发微信公众号再见 Swagger UI！国人开源了一款超好用的 API 文档生成框架，Star 4.7K+，真香！！JavaScript 细节和一些实际应用，了解一下本文使用 文章同步助手 同步编辑于 2021-12-27 22:54图标Icon Font阿里软件赞同 4添加评论分享喜欢收藏申请
HTML 为什么我的网站图标不显示|极客教程
HTML 为什么我的网站图标不显示|极客教程
极客教程
基础编程
C语言C++语言C++ 多线程ShellPerlLeetCodeC#
前端开发
HTMLBootstrapJavaScript 参考手册WebSocketMarkdownreact
后端开发
数据库管理系统SQLMySQLMongoDBRedis命令
Python开发
PythonNumpyMatplotlibScrapyPandasPyTorchtkinterpygamePyGTKTurtle
Java开发
JavaSpringSpring BootJSPServletGuava
大数据
大数据HDFSMapReduceYarnHiveSparkHBaseStormSpark StreamingFlinkZooKeeper
人工智能
机器学习深度学习数学基础线性代数TensorflowKerasscikit-learn
移动开发
AndroidFlutterKotlin
图形图像
OpenCV
开发工具
VSCodeGitGithub
当前位置：极客教程 > HTML > HTML 问答 > HTML 为什么我的网站图标不显示
HTML 为什么我的网站图标不显示
HTML 为什么我的网站图标不显示
在本文中，我们将介绍为什么有时候网站的图标（favicon）不显示，并提供一些解决这个问题的方法和示例。
阅读更多：HTML 教程
什么是网站图标（favicon）？
网站图标，也被称为favicon（即favorites icon），是显示在浏览器标签页和书签栏中的小图标。它不仅可以增加网站的可识别性和品牌形象，也可以方便用户快速识别和访问网站。
favicon.ico 文件的位置
在HTML中，favicon.ico文件的位置可以在文档的
标签中通过 元素的 rel 和 href 属性指定。一般来说，我们建议将favicon.ico文件放在网站的根目录下，这样浏览器在访问网站时可以更快速地加载该文件。以下是一个示例代码：
需要注意的是，不同浏览器对favicon.ico文件的支持可能略有不同。除了favicon.ico文件外，现代的浏览器还支持更多的图标格式，如PNG和SVG，可以通过使用 元素的不同属性来指定。例如，您可以使用以下代码指定一个PNG格式的favicon图标：
favicon.ico 文件的命名和尺寸
为了确保网站图标能够在不同的浏览器和设备上正确显示，我们推荐按照一定的命名和尺寸规范来准备favicon.ico文件。虽然不同浏览器对图标的尺寸要求有所不同，但以下是一些常用的建议大小：
16×16 像素 – 用于浏览器标签页和书签栏中的小图标
32×32 像素 – 用于一些较新的浏览器标签页
48×48 像素 – 用于Windows 7+的任务栏按钮
64×64 像素 – 用于iPad和其他移动设备上的主屏幕图标
另外，为了确保浏览器在不同设备上的兼容性，我们建议同时提供多个尺寸的图标。可以在HTML中使用 元素的 sizes 属性来指定图标的不同尺寸。示例如下：
清除浏览器缓存
在修改网站图标后，有时候浏览器会因为缓存原因而无法加载新的favicon.ico文件。为了解决这个问题，可以尝试清除浏览器的缓存，并强制浏览器重新加载网页。
不同浏览器的缓存清除方法不尽相同，以下是一些常见浏览器的操作：
Chrome: 在浏览器地址栏中输入 chrome://settings/clearBrowserData ，勾选“缓存图片和文件”选项，然后点击“清除数据”按钮。
Firefox: 在浏览器地址栏中输入 about:preferences#privacy ，在“隐私和安全”选项卡中找到“Cookies和站点数据”部分，点击“清除数据”按钮，勾选“缓存”选项，然后点击“清除”按钮。
Edge: 在浏览器地址栏中输入 edge://settings/clearBrowsingData ，勾选“缓存数据和文件”选项，然后点击“清除”按钮。
使用网站图标生成器
如果您不熟悉网站图标的制作和格式转换，也可以使用一些在线的网站图标生成器来帮助您生成各种尺寸和格式的图标文件。这些网站图标生成器通常提供了简单易用的界面，您只需要上传一个高质量的图像文件，然后它们会自动生成各种尺寸的图标文件供您下载和使用。
以下是一些常用的网站图标生成器：
Favicon Generator
RealFaviconGenerator
ICO Convert
总结
在本文中，我们介绍了为什么有时候网站的图标不显示，并提供了一些解决这个问题的方法和示例。通过正确设置favicon.ico文件的位置、命名和尺寸，清除浏览器缓存，以及使用网站图标生成器，您可以确保您的网站图标能够在不同的浏览器和设备上正确显示，提升用户体验和品牌形象。希望本文能对您有所帮助。
上一篇 HTML 当textarea有溢出时打印
下一篇 HTML br标签可以具有哪些CSS属性
Python教程
Python 教程
Tkinter 教程
Pandas 教程
NumPy 教程
Flask 教程
Django 教程
PySpark 教程
wxPython 教程
SymPy 教程
Seaborn 教程
SciPy 教程
RxPY 教程
Pycharm 教程
Pygame 教程
PyGTK 教程
PyQt 教程
PyQt5 教程
PyTorch 教程
Matplotlib 教程
Web2py 教程
BeautifulSoup 教程
Java教程
Java 教程
Web教程
HTML 教程
CSS 教程
CSS3 教程
jQuery 教程
Ajax 教程
AngularJS 教程
TypeScript 教程
WordPress 教程
Laravel 教程
Next.js 教程
PhantomJS 教程
Three.js 教程
Underscore.JS 教程
WebGL 教程
WebRTC 教程
VueJS 教程
数据库教程
SQL 教程
MySQL 教程
MongoDB 教程
PostgreSQL 教程
SQLite 教程
Redis 教程
MariaDB 教程
图形图像教程
Vulkan 教程
OpenCV 教程
大数据教程
R语言 教程
开发工具教程
Git 教程
VSCode 教程
Docker 教程
Gerrit 教程
Excel 教程
计算机教程
Go语言 教程
C++ 教程
HTML 精品教程HTML 教程HTML 概述HTML 基本标签HTML 元素
文章目录什么是网站图标（favicon）？favicon.ico 文件的位置favicon.ico 文件的命名和尺寸清除浏览器缓存使用网站图标生成器总结
© 2024 极客教程 备案号：蜀ICP备11026280号-10
友情链接：极客笔记 |Matplotlib Tutorials | CSS Tutorials| Numpy Where
回顶回顶部
网页上矢量的的icon是怎么做到的？ - 知乎
网页上矢量的的icon是怎么做到的？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册图标设计图标前端工程师UI设计师Icon Font网页上矢量的的icon是怎么做到的？一直以为网页上的icon都是位图，就像下图，我在Safari里放大页面，追波的icon就变糊了，但是搜索的放大镜icon为什么依旧清晰呢，是因为是矢量…显示全部 关注者16被浏览17,860关注问题写回答邀请回答好问题添加评论分享8 个回答默认排序知乎用户icon fonts利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。除了「分辨率无关」这个最大的优点之外，icon fonts 还具有：文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。加载性能好：因为图标都被打包进一套字体内，http request 减少。这如同我们常用的 css sprites 技术。支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。当然 icon fonts 也有它的不足：样式单一，无法针对不同分辨率来调整icon 的细节，比如降低大尺寸icon 的线条粗细。颜色单一，CSS 无法方便的去定义彩色的 icon，倒是有通过叠加组合的方式来达到彩色图标的目的。移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。有少量的移动设备有可能会和 icon fonts 的字符编码冲突，导致icon 显示不正常（我们自己风车Android 版本就碰到了这个问题）。所以 icon fonts 也并不是一套完美的响应式图片的解决方案，当它适宜你的应用场景时，比如：你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。你的目标用户使用桌面浏览器为主，或者，你愿意为非兼容设备做兼容hack。那么 icon fonts 是一个令设计师和前端工程师都心花怒放的方案。说白了就是把图标变成了字体。以上是很久以前看到的博文，因为自己也很感兴趣所以摘抄一份，希望对你有所帮助。至于i标签怎么使用，如何引入，就要根据具体框架去关联相关的库了。这个是最基本的库，里面有对应的代码应用，可以了解一下~发布于 2018-04-28 14:05赞同 52 条评论分享收藏喜欢收起Toodesign 关注我们浏览网页时可能会发现上面有很多简单的线性图标。比如下图天猫商品分类左侧的小图标微博下方评论小图标嗯，就是这样一组看似很简洁却不简单的小图标这样的小图标绘制起来不难，难就在于放在网页当中如何能保证清晰的显示，它的尺寸会非常的小，以至于低到是30px的正方形，在这样低像素的情况下，想保证在网页保持清晰，其实是非常难的。我曾经试过各种方法，包括绘制矢量图形，存成png或web格式，可放到网站总会出现锯齿，显得十分模糊。以前大多采用比较麻烦的方式来处理，一是运用svg矢量的图标运用到网页当中，不过我感觉很复杂，总之到现在我还没学会。另一种，是一个像素一个像素的调整，调整到不出现锯齿为止，但这种方法真的超级麻烦又费事，像我这样焦急症岂不要活活急死。直到后来出现了新的解决方法，比如font awesome，在其网站上下载一套矢量图标，上传到自己的服务器，需要某个图标时就调用出来。但是现在几乎很少人使用这种方法了，一是占用自己服务器空间资源，二是想使用新的图标又要重新从网站上下载需要的图标，有时还不一定有自己想要的。现在我来介绍一款比较实用的工具，iconfont（阿里巴巴矢量图标库）。顾名思义图标是矢量的，无论多大或多小都不会存在模糊状况，轻轻松解决了图标模糊的问题。不仅可以免费使用，上面还有大量已设计好的图标供你选择。所有图标在阿里云端上存储，不占用自己服务器空间内存，还能起到网站加速作用。支持自定义上传自己设计的图标，更换添加图标只需要更新一行代码，还支持自定义改变颜色大小，总之所有的一切，都尽掌握在你的css代码中，想怎么搞就怎么搞。具体使用，iconfont官网上讲解的已经足够详细了，你可以去浏览学习一下，如果在使用过程中有什么疑惑或新发现，也可以在下方和我留言交流学习。编辑于 2018-04-28 16:52赞同 134 条评论分享收藏喜欢
如何将网站图标添加到您的 WordPress 博客 - 知乎
如何将网站图标添加到您的 WordPress 博客 - 知乎首发于WordPress实用技术切换模式写文章登录/注册如何将网站图标添加到您的 WordPress 博客邱哥https://wpeyes.com您想了解如何在 WordPress 中添加网站图标吗？Favicon 或站点图标是在浏览器中显示在您的网站标题旁边的小图像。它可以帮助您的用户识别您的网站，并且您网站的更频繁的访问者会立即识别该小图像。这会提高您的品牌知名度，并帮助您在受众中建立信任。在我们关于最常见的 WordPress 错误的文章中，未添加网站图标位列前 25 名。在本文中，我们将向您展示如何将网站图标添加到您的 WordPress 博客。为什么要向您的 WordPress 网站添加网站图标？正如我们之前提到的，它建立了您网站的身份。但是，它也可以提高您网站的可用性和用户体验。这张图片将帮助您更好地理解它：大多数用户通常在他们的浏览器窗口中打开许多选项卡。随着选项卡数量的增加，这会隐藏您网站的标题。网站图标可帮助用户识别您的网站并快速切换到他们想要的选项卡。您可以要求您的用户将您的网站添加到他们在移动设备上的主屏幕上。当用户将您的网站添加到移动设备的主屏幕时，也会使用您的网站图标或网站图标。如何创建网站图标您可以使用您品牌的徽标作为您的站点图标或网站图标。网站图标图像的推荐大小是宽度和高度至少为 512 像素。站点图标图像应该是正方形，您可以使用更大的矩形图像，WordPress 将允许您在添加图像时裁剪图像。我们建议使用 Adobe Photoshop 或 Gimp 等图像编辑程序来创建恰好 512×512 像素的站点图标。这样您就可以保持图像的精确比例。您可以使用透明图像或用您选择的背景颜色填充图像。此图像可以是 png、jpeg 或 gif 格式。视频教程订阅 WPBeginner如果您不喜欢该视频或需要更多说明，请继续阅读。在 WordPress 中添加您的站点图标或网站图标从WordPress 4.3开始，您可以从 WordPress管理区域添加网站图标或站点图标。只需转到外观 » 自定义并单击“站点标识”选项卡。WordPress 主题定制器中的站点标识部分允许您更改站点标题、描述，并控制是否要在标题中显示它们。它还允许您上传您的网站图标。只需单击选择文件按钮，然后上传要用作站点图标的图像。如果您上传的图片超过推荐大小，WordPress 将允许您裁剪它。如果它与推荐的大小完全匹配，那么您可以保存更改。这就是您现在可以预览您的网站并查看您的网站图标的全部内容。您还可以在移动设备上访问您的网站，然后从浏览器菜单中选择“添加到主屏幕”。您会注意到您的站点图标将出现在主屏幕上。专业提示：如果您要自定义显示在图标旁边的 SEO 标题，那么您将需要免费的 All in One SEO 插件。有关更多详细信息，请参阅我们关于如何安装和设置 AIOSEO的指南。将 Favicon 添加到较旧的 WordPress（4.2 或更低版本）如果您使用的是旧版 WordPress 或想了解如何手动上传您的网站图标，那么此步骤适合您。首先，您需要使用 FTP 或WordPress 托管文件管理器将网站图标文件添加到网站的根目录。之后，您只需将此代码粘贴到您的主题header.php文件中即可。确保用您网站的 URL 替换 http://wpbeginner.com，这样就可以了。如果您的主题没有 header.php 文件，或者您找不到它，请不要担心，我们为您准备了一个插件。只需安装并激活免费的插入页眉和页脚插件。激活插件后，转到设置»插入页眉和页脚并将上面提供的代码粘贴到页眉部分以保存您的设置。如果您根本不想处理 FTP，那么您也可以使用名为All in One Favicon的插件。发布于 2023-01-04 20:41・IP 属地四川WordPress博客网站赞同添加评论分享喜欢收藏申请转载文章被以下专栏收录WordPress实用技术实用的 WordPress 示例、技巧
为什么很多网站没有显式的添加favicon.ico，也会显示网站小图标呢？ - 知乎
为什么很多网站没有显式的添加favicon.ico，也会显示网站小图标呢？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册网页设计网站为什么很多网站没有显式的添加favicon.ico，也会显示网站小图标呢？很多大型的网站都没有加类似于这样一句：部分添加两个link组件来实现的。这样，任何一个适当大小的（16×16像素或更大）的图像都可以用作favicon。尽管如此，多数情况下仍然使用ICO格式。其他网页浏览器现在也支持PNG（便携式网络图片）格式，和GIF（图形交换格式）动画图像格式。市面上多数浏览器同时支持上述两种方法。正因此，网络服务器要接受很多对“favicon.ico”文件的请求，即使该文件根本不存在。网站管理员对此很不满，因为这样会增加大量的服务器日志项，并导致很多不必要的磁盘读取和CPU、网络资源的占用。另一个常见的问题是，当清除浏览器的缓存后，favicon可能会消失。当favicon.ico被置于文档根目录时，将会被一些不处理link组件的浏览器找到，即使没有您的站点上没有指向它的链接。https://zh.wikipedia.org/wiki/Favicon 编辑于 2017-09-06 10:49赞同 343 条评论分享收藏喜欢收起Yin Duke建筑设计 / WordPress / CG / 视频 / 动画 关注只要在网站的根目录有favicon.ico这个文件，好点的浏览器都会自觉去读这个文件，用作favicon，即便在页面没有加指定fevicon路径的代码。发布于 2015-01-01 00:50赞同3 条评论分享收藏喜欢
html 之设置页面ico图标 - 知乎
html 之设置页面ico图标 - 知乎切换模式写文章登录/注册html 之设置页面ico图标散修杂记rel ：表示将要引用的资源类型。href：表示指向资源的URL。,代码中rel="shortcut icon"是一种固定写法。如果缺省该属性会影响ico图标的正确显示。所以该属性千万要记得写。遇到的坑现象：favicon.ico不显示解决：把整个浏览器关闭在重新打开浏览器（不要只关所有页面），然后在清空缓存。发布于 2021-05-16 20:52URLFavicon网页浏览器赞同 23 条评论分享喜欢收藏申请
Icons 字体图标教程
Icons 字体图标教程
w3schools 教程
HTML
CSS
JAVASCRIPT
BOOTSTRAP
JQUERY
PHP
SQL
PYTHON
PYTHON2
JAVA
C
C++
C#
Linux
AI
教程库
参考手册
测验
练习
HOWTO
FAQ
Icons 字体图标教程
Icons 字体图标简介
Icons 字体图标大全
Font Awesome 5
Font Awesome 5 图标简介
Icons 辅助
Icons 警报
Icons 动物
Icons 箭头
Icons 音频和视频
Icons 汽车
Icons 秋季
Icons 饮料
Icons 品牌
Icons 建筑
Icons 商业
Icons 野营
Icons 慈善
Icons 聊天
Icons 国际象棋
Icons 儿童
Icons 服装
Icons 代码
Icons 通讯
Icons 电脑
Icons 建造工具
Icons 货币
Icons 日期和时间
Icons 设计
Icons 编辑器
Icons 教育
Icons 表情
Icons 能源
Icons 文件
Icons 金融
Icons 健身
Icons 食物
Icons 水果和蔬菜
Icons 游戏
Icons 性别
Icons 万圣节
Icons 手势
Icons 健康
Icons 节日
Icons 酒店
Icons 家居
Icons 图像
Icons 界面
Icons 物流
Icons 地图
Icons 航海
Icons 营销
Icons 数学
Icons 医学
Icons 视频
Icons 音乐
Icons 对象
Icons 支付和购物
Icons 药房
Icons 政治
Icons 宗教
Icons 科学
Icons 科幻
Icons 安全
Icons 形状
Icons 购物
Icons 社交
Icons 旋转
Icons 体育
Icons 春季
Icons 状态
Icons 夏季
Icons 桌面游戏
Icons 切换
Icons 旅行
Icons 用户和人物
Icons 车辆
Icons 天气
Icons 冬季
Icons 书写
Font Awesome 4
Font Awesome 图标简介
Icons 品牌
Icons 图表
Icons 货币
Icons 方向
Icons 文件类型
Icons 表单
Icons 性别
Icons 手势
Icons 医疗
Icons 支付
Icons 加载中
Icons 文本
Icons 交通工具
Icons 视频播放
Icons Web 程序
Bootstrap 图标
Icons BS 字体图标
Google 图标
Google 字体图标简介
Icons 动作
Icons 警报
Icons AV
Icons 通讯
Icons 内容
Icons 设备
Icons 编辑器
Icons 文件
Icons 硬件
Icons 图像
Icons 地图
Icons 导航
Icons 通知
Icons 放置
Icons 社交
Icons 切换
字体图标简介
❮ 首页
下一节 ❯
如何添加字体图标
要插入图标，请将图标类的名称添加到任何内联 HTML 元素中。
使用 和 元素被广泛用于添加图标。
下面图标库中的所有图标都是可缩放的矢量图标，可以使用CSS（大小、颜色、阴影等）进行自定义。
Font Awesome 5 图标
要使用免费 Font Awesome 5 图标，请访问 fontawesome.com 并注册登录以获取在网页中使用的代码。
关于如何开始使用Font Awesome 5 图标，请访问 Font Awesome 5 一章。
注释: Font Awesome 5 图标无需下载或安装！
实例
class="fas fa-cat">
亲自试一试 »
Font Awesome 4 图标
要使用 Font Awesome 4 图标，请在 HTML 页面的
部分添加以下行:注释: Font Awesome 4 图标无需下载或安装！
实例
亲自试一试 »
Bootstrap 3 图标
要使用 Bootstrap 3 图标，请在 HTML 页面的
部分添加以下行:注释: Bootstrap 3 图标无需下载或安装！
实例
亲自试一试 »
注释: Bootstrap 4 中不支持 Glyphicons。
有关 Bootstrap 3 和 Glyphicons 的更多信息，请访问我们的 Bootstrap 3 教程。
Google 图标
要使用 Google 谷歌图标，请在 HTML 页面的
部分添加以下行:注释: Google 谷歌图标无需下载或安装！
实例
cloudfavoriteattachmentcomputertraffic
亲自试一试 »
有关所有图标的完整列表 (font awesome, bootstrap 和 google)，请访问 图标参考手册。
❮ 上一节
下一节 ❯
颜色选择器
读后有收获微信请站长喝咖啡
报告错误
打印
关于
学习路线
×
错误报告
如果您发现内容有误或提出修改建议，请随时向我们发送 E-mail 邮件:
421660149@qq.com
您的建议:
您的 E-mail:
页面地址:
内容描述:
提交
×
感谢您的帮助！
您的建议已发送到 W3schools。
W3Schools 在线教程提供的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
Copyright 2020-2024 关于我们 | 隐私条款 | 学习路线 | 京ICP备14045893号-9
CSS icon 属性
CSS icon 属性
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 动画相关属性
CSS 网络安全字体
CSS 字体回退
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
CSS 听觉
CSS 属性
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
justify-items
justify-self
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
CSS icon 属性
定义和用法
icon 属性为创作者提供了将元素设置为图标等价物的能力。
注释：除非 "content" 属性的值被设置为 "icon"，否则元素的图标不会被使用。
实例
将图像元素设置为图标化的等价物：
img
{
content:icon;
icon:url(imgicon.png);
}
CSS 语法
icon: auto|URL|inherit;
属性值
值
描述
auto
使用由浏览器提供的默认通用图标。
URL
引用列表中的一个或多个图标，列表用逗号分隔。
inherit
规定应从元素继承 icon 属性的值。
技术细节
默认值：
auto
继承性：
no
版本：
CSS3
JavaScript 语法：
object.style.icon="url(image.png)"
浏览器支持
Chrome
IE / Edge
Firefox
Safari
Opera
不支持
不支持
不支持
不支持
不支持
CSS 参考手册
CSS 实例
CSS 测验
CSS 教程
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。
关于 W3School
帮助 W3School
使用条款
隐私条款
技术支持：赢科
蒙ICP备06004630号