Link-添加网页图标

定制网站收藏夹图标的方法有两种，都相当容易：
　　第一种方法：
　　第一步，当然是准备一个能体现您的主页的风格和个性的图标。比较简便的办法除了下载，就是将您的网站的logo做成一个图标。
　　第二步，将这个图标文件命名为：favicon.ico。
　　第三步，将favicon.ico上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改，Internet Explorer 5会自动的不停的搜索您的网站的根目录，它一旦发现了favicon..ico这个文件，就会将该图标显示在访问者的地址栏和收藏夹列表中了。
　　使用这种方法来定制收藏夹图标，有一个明显的缺陷，就是收藏夹图标只能在网站的首页中显示。

　　第二种方法：
　　第一步，还是准备一个能体现您的主页的风格和个性的图标。
　　第二步，将这个图标文件命名为任意的文件名，如myicon.ico。
　　第三步，在网页文件的head部分加入下面的内容：
　　<link rel="shortcut icon" href="http://www.mysite.com/myicon.ico">。
　　注意：图标文件的路径一定要使用绝对路径。
　　这种方法就可以使所有的页面都能显示收藏夹图标了。
　　最后还有一点需要说明的是，有些Web站点的主机服务器（如：Geocities）不支持图标文件格式（.ico），这时您就需要与系统管理员联系，要求他开通对图标文件格式的支持。

通过link rel="icon"可以实现部分浏览器的动画图标效果

语句一:<link rel="shortcut icon" href="favicon.ico" />
语句二<link rel="icon" href="animated_favicon.gif" type="image/gif" />

Favicon功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium（W3C，万维网联盟）的HTML建议[1]，因为：

rel属性必须包含一个用空格作分隔符的link类型的列表，所以一个包含两词的link类型不能被遵守标准的浏览器理解。
“.ico”文件类型（一种用于Microsoft Windows上图标的光栅格式）没有一个注册的MIME类型，而且似乎在当时也不能被多数浏览器理解。然而2003年，这一格式在IANA获得注册，其MIME类型是image/vnd.microsoft.icon，进而消除了此问题的第一部分。
在网站上使用保留地址（reserved location）与Architecture of the World Wide Web（互联网的结构）矛盾，同时被认为是link squatting（链接劫持）或URI squatting（URI劫持）。

Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式的favicon。例如<link rel="icon" type="image/png" href="/path/image.png">。后来鉴于此功能将被用于所有新内容，多数浏览器都对此功能增加了支持。

利用图标工具（有很多）制作图标文件（favicon.ico）上传到网站所在的服务器的根目录下，这个文件必须是16*16大小的图标文件。当然，也可以在<head></head>之间加上
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
就可以了。但是，ico给出的是静态的图标文件。

如果想要动起来，就得做个gif动画了。gif动画也是16*16的，传到服务器。在<head></head>之间加上：
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
就可以了。

如果想要收藏夹中的图标也要改变的话，那么就加上这句：
<link rel="Bookmark" href="favicon.ico" />
这个图标还可以使用png格式，png格式现在的势头很猛。

Link-添加网页图标相关推荐

WordPress 添加网页图标
wp_site_icon(); 参考:https://www.wpdaxue.com/wordpress-4-3-site-icon.html
给网页图标字体 Font Awesome 添加动画效果
在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...
给网页的标签头部添加小图标方法
1 概述几乎所有的网页标签头部都需要添加小图标,如下图所示. 2 方法如下 <link href="https://csdnimg.cn/public/favicon.ico&quo ...
HTML+CSS项目实践四：给html网页标题栏添加logo图标（ico格式图片）
实现效果: 制作思路: 1.准备一张ico格式图片 2.在<head>标签里使用<link />标签,引用icon图片实现代码: <!DOCTYPE HTML> ...
HTML如何给网页添加icon图标？
一般的网站都有自己的图标(标签页左上角的小图标),如图: 如何添加ico图标? 非常简单,只需要在中添加如下代码: <link rel="Shortcut Icon" hre ...
HTML如何给网页添加ico图标？
一般的网站都有自己的图标(标签页左上角的小图标),如图: 如何添加ico图标? 非常简单,只需要在中添加如下代码: <link rel="Shortcut Icon" hre ...
如何在 Linux 系统中添加桌面图标
在做嵌入式 Linux 产品的时候,我们通常会让机器自启动应用程序来处理相关业务,或者提供一个桌面系统让用户更加方便操作.那么这时候,我们就需要将编译好的应用程序添加到桌面,以便使用,就像 Windo ...
HTML技能点--设置网页图标标志
点此查看全部文字教程.视频教程.源代码本文目录 1. 网页图标标志 2. 实现 1. 网页图标标志网页标签页的图标大家想必都不陌生,就是在网页标题文本左侧的图标. 大多数情况下,我们都会去设置网页 ...
【网页图标】favicon.ico文件的设置
如何在Vue Cli目录下面设置我们想要的网页图标? 文件目录结构如下: 第一步:打开你的项目文件地址打开找到public文件夹,粘贴.ico文件进去public文件夹结果图: 第二步:在index ...
为你的博客添加标题栏图标
对于自己掌握源代码的网站,为网页添加标题栏图标的方法一般是在根目录下放一个名为"favicon.ico"的文件. 想cnblog这种站点其实也可以自己添加标题栏图标,只需要在 &q ...

Link-添加网页图标

Link-添加网页图标相关推荐

最新文章

热门文章