网页图标favicon.ico介绍及使用
目录
一、网页图标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
网页图标favicon.ico介绍及使用相关推荐
- vue中网页图标favicon.ico不显示
1.通过服务器获取 在index.html里,添加link,若href是引用服务器上的图片,在不跨域的情况下ok的 <link rel="shortcut icon" typ ...
- 前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico 步骤1: 将小图标favicon.ico文件(或者普通的icon小图片)放在项目的public或者static目录下 步骤2: index ...
- html:link-icon标签引入网站小图标favicon.ico
示例 <link rel="shortcut icon " type="images/x-icon" href="favicon.ico&quo ...
- typecho图标_Typecho浏览器图标favicon.ico添加方法 - 新手站长网
摘要 Typecho设置浏览器图标favicon.ico的方法,先制作ico图片然后上传到主题所在目录,然后编辑外观在header.php文件中插入shortcut icon代码 Typecho如何添 ...
- favicon.ico介绍,网页图标的制作动态网页图标
1.直接上成功的代码,关键代码: <!DOCTYPE html> <html><head><title>网页图标</title><li ...
- 网站图标favicon.ico
一.图标介绍 favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏.浏览器标签上或者在收藏夹上,是展示网站个性的缩略 logo 标志,也可以说是网站头像,目前主要的浏览器都支持 ...
- 网站的图标 favicon.ico
网站图标是什么 浏览器收藏夹和地址栏网站网址前面的个性化图标,常被成为网页小图标.网站缩略图标或者收藏夹图标,是网站的重要识别方式. 如上图中CSDN的C favicon.ico 默认情况网页未指定i ...
- favicon.ico 介绍与使用 - 实践
1.应用场景 主要用于了解favicon.ico的作用以及使用,帮助更好地理解web系统与开发. 2.学习/操作 1.文档阅读 https://www.cnblogs.com/nyw1983/p/11 ...
- html地址欄小圖標,网站地址栏前面的小图标favicon.ico制作方法
那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到 ...
最新文章
- 2022-2028年中国LCD光刻胶行业市场深度分析及发展规模预测报告
- GATB的使用小例子test.cpp
- windows下python依赖包_windows下安装python拓展包
- volatile关键字有什么用
- 前端学习(1877)vue之电商管理系统电商系统之头部布局
- c语言二叉树的头文件叫什么,西安交大朱站立数据结构——使用C语言》头文件系列——二叉树.doc...
- 【Day05】Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5?
- Php global echo,php中global和$GLOBALS[]的分析之一
- 暑假集训 || 网络流
- 型管件的作用_W型柔性铸铁排水管适用范围
- JDK常见问题 环境变量配置
- 测试开发如何设计测试用例
- 深入学习软件测试:混合正交表工具
- 苹果电脑可以装windows系统吗_给苹果电脑安装Windows系统
- python如何编写爬虫程序_python编写网络爬虫程序
- 报Keystore was tampered with, or password was incorret的原因
- 数字图像处理王慧琴课后答案_清华大学出版社-图书详情-《数字图像处理(第3版)》...
- [折腾日记]win10 ,ubuntu双系统安装避坑指南
- I/Q数据频谱分析仪简介
- PostGreSQL主从库环境下的从节点故障恢复