代码编织梦想

目录

一、网页图标favicon.ico介绍

二、关于shortcut icon和icon代码的区别介绍

1. 常用形式

2. 讨论

3. 关于type属性

4. 相关历史

三、制作favicon.ico

1. favicon.ico在线制作网站:http://www.faviconico.org/

favicon转换工具介绍

2. 为什么推荐使用该网站?


一、网页图标favicon.ico介绍

favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上,是展示网站个性的缩略logo标志,也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的。

 

其实这么多还不如一张图片来得直接:csdn的网页图标如下(那个C图标就是):

二、关于shortcut icon和icon代码的区别介绍

1. 常用形式

语句一:

<link rel="shortcut icon" href="favicon.ico" /> 

语句二:

<link rel="icon" href="animated_favicon.gif" type="image/gif" /> 

2. 讨论

备注:语句一 Shortcut Icon 就是在网址列前面出现的Icon。
问题:语句二 icon的作用是怎么?和语句一有什么区别? 
指导 :
        过去,为保证favicon出现,网站设计者和开发者采用了多种方法。很难明确地保证favicon可以在所有电脑上显示,即使是用同一版本的一种浏览器。 
        下列代码另一个局限就是它把favicon关联到了某个特定的HTML或XHTML文档上。为避免这一点,favicon.ico文件应置于根目录下。多数浏览器将自动检测并使用它。 
建议包含以下两行HTML代码: 

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">

        然而,只有第一行是必须的,因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词(“shortcut”将被忽略,而仅适用“icon”);而Internet Explorer将会把它作为一个单独的名称(“shortcut icon”)。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像(例如动画GIF)时,才有必要添加第二行。

 

3. 关于type属性

图像通常可以使用任何被浏览器支持的图像格式。
.ico文件格式通常可以被所有可以显示favicon的浏览器读取。 
设置服务器,以发送正确的MIME标识: 
1,ICO 文件 image/vnd.microsoft.icon(或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型,因为多数主流浏览器现在支持它) 
2,GIF 文件 image/gif 
3,PNG 文件 image/png 
4,ICO:包括多种分辨率(最常使用的是16×16和32×32,Mac OS X有时使用64×64和128×128)以及位深(比特每像素)(多数使用4、8、24 bpp,即16、256和1600万色)。 
5,GIF: 使用16×16,256色。 
6,PNG: 使用16×16,256色或24位。 
注意:当favicon.ico被置于文档根目录时,将会被一些不处理link元件的浏览器找到,即使没有您的站点上没有指向它的链接。

 

4. 相关历史

        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,进而消除了此问题的第一部分。 
        在网站上使用保留地址与互联网的结构矛盾,同时被认为是link squatting(链接劫持)或URI squatting(URI劫持)。 
Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式的favicon。例如

<link rel="icon" type="image/png" href="/path/image.png">

后来鉴于此功能将被用于所有新内容,多数浏览器都对此功能增加了支持。

 

三、制作favicon.ico

1. favicon.ico在线制作网站:http://www.faviconico.org/

favicon.ico在线制作,在线Favicon.ico制作转换工具http://www.faviconico.org/

网站介绍:

favicon转换工具介绍

ico图标在线转换工具能将png、jpg、gif等图片的格式转换成ico格式,帮您快速生成精美的ico图标。建议先绘制好您的图标并保存为我们支持的格式,然后用faviconico.org的ico转换工具转换成ico格式。.

 

2. 为什么推荐使用该网站?

(1)智能转换:将png、jpg、gif等图片的格式转换成ico格式。代码直接用这种

<link rel="shortcut icon" href="favicon.ico" /> ,不用考虑第二种。

(2)能够选择多种尺寸(5种,推荐32*32)。

(3)预览,这个最牛逼,就是你点击预览后,它会将该网页的图标换成你的图标,方便查看效果。


第二部分内容参考:https://blog.csdn.net/weixin_40374953/article/details/82350940

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41287260/article/details/97621561

网站图标favicon.ico_caoning315629的博客-爱代码爱编程

一、图标介绍 favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上,是展示网站个性的缩略 logo 标志,也可以说是网站头像,目前主要的浏览器都支持 favicon.ico 图标,如果要让网站看起来更专业、更美、更有个性,favicon.ico 是必不可少的。 除此之外,标签式浏览器甚至还有不少扩展的功能

关于not found: /favicon.ico 报错的解决方法_志向高远学python的博客-爱代码爱编程_favicon.ico错误

目前做自己的博客,一直报Not Found: /favicon.ico这个错误,之前做博客的时候也有,但是没怎么关注(我一直再改进自己的博客网站,希望它看起来更专业一点),现在看着很烦人,作为处女座无法接受这个碍眼的报错,虽然我美看到任何bug,原来他就是一个浏览器上显示网站标识的一个东东,给你的网站弄一个标识,看起来有那么一点点意思吧! 首先找到一张任

如何给网站设置favicon.ico图标-爱代码爱编程

favicon.ico是什么? 所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。 favicon.ico是一个网站必要的吗

解决页面favicon.ico文件不存在提示404问题_pan_junbiao的博客-爱代码爱编程

所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。当然,这不是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,

favicon.ico介绍-爱代码爱编程

背景:今天在群里解决群友问题时,对favicon了解不够深入,错误了理解群友的意思。实在惭愧,误人子弟了。后来测试和整理,记录一下 favicon.ico网页图标 介绍状态 介绍 favicon是Favorites Icon的缩写,代指的是一个网页标题左侧的图标。抬头看一下当前文章标题,左侧的那个大C就是csdn的favicon.ico。 .

什么是favicon.ico,以及如何使用它-爱代码爱编程

Favicon是“收藏夹”图标中的快捷方式。 它是访问的URL前面的一个小徽标,可以在地址栏中看到,并用于宣传公司或商标。另一方面,它对用户很有用,以便可以在其加书签的站点中快速找到他要单击的URL。 如何在我的网站上添加收藏夹 一个Favicon必须具有以下特征。 名称-默认名称为favicon.ico尺寸-16×16、32×32、

关于Vue项目中favicon.ico的应用配置&取消favicon.ico请求-爱代码爱编程

目录 favicon.ico的应用配置 拓展(取消favicon.ico请求) favicon.ico的应用配置 首先,一般把favicon.ico(固定命名)放在static里,如下图: 在开发环境中,配置 webpack.dev.conf.js里的plugins new HtmlWebpackPlugin里加上 favicon: './

获取网站 favicon.ico 的三种方法-爱代码爱编程

获取网站 favicon.ico的三种方法 方法一: 直接在网站网址后面加favicon.ico 例如:https://www.baidu.com/favicon.ico (有一些网站可能会直接跳转到网站页面,并不会显示图标文件) 方法二: F12或者右键查看网页源代码,然后再网页头部找到 ,链接指向即为favicon.ico的地址 例如:有道翻译

网站常用的favicon.ico文件-爱代码爱编程

在项目中,经常看到favicon.ico报错,一直不明白是啥个东西,如下图。(如果你访问的页面上没有这个的话, 可以强制刷新下看看) 偶然间看到了一篇文章,才明白是怎么回事, 在此记录下:FAVICON.ICO 是网站图标文件,浏览网站时显示在地址栏前边的那个图标 参考:添加链接描述 关于Favicon,总是被命名为favicon.ico。默认存放在网