当前位置: article > 正文

设置网页title旁边的小图标详解_浏览器title前面图标

作者：Monodyee | 2024-05-01 19:33:45

踩

浏览器title前面图标

正式写一个网页时，title旁边一般会有一个独特的小图标，如何自己写这样一个图标呢？

其实很简单的，在html文件中的<head></head>标签中加上：

<link rel="icon" href="img/logo.ico" type="images/x-ico" />

这样一行代码就可以了！

注意：图片的后缀名必须要是 .ico 格式的。

推荐个免费自动生成.ico格式文件的网站：Favicon.ico图标生成器 | 一键免费制作ico图标 - LOGO神器 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUHJvdGlueA==,size_20,color_FFFFFF,t_70,g_se,x_16

如何使用Favicon图标生成器？

你可以通过字母或者图片两种方式制作Favicon图标

字母Favicon：直接输入字母（支持汉字）后点击生成按钮就能看到多个基于字母（或者汉字）的图标样式。选择直接下载或者继续编辑图标的字体，颜色，或者背景图形。

图片Favicon：如果您已有图片或者logo，可以点击图片→ICO的链接来在线生成你的Favicon图标。

如何安装Favicon图标？

点击下载并选择Favicon格式，你将获得Favicon图标的zip打包文件包含：

android-chrome-192×192.png
android-chrome-512×512.png
apple-touch-icon.png
favicon-16×16.png
favicon-32×32.png
favicon.ico
site.webmanifest

直接将Favicon文件上传到你的网站服务器根目录，在网页的 head 部分复制粘贴HTML代码即可。


<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

设置网页title旁边的小图标详解_浏览器title前面图标

如何使用Favicon图标生成器？

如何安装Favicon图标？

Favicon.ico图标常见问题

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/520416