网页小图标Favicon
Favicon是favorites icon的缩写,亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标,而目前也有很多网页浏览器支持此功能。浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。
过去,为保证favicon出现,网站设计者和开发者采用了多种方法。很难明确地保证favicon可以在所有电脑上显示,即使是用同一版本的一种浏览器。
下列代码另一个局限就是它把favicon关联到了某个特定的HTML或XHTML文档上。为避免这一点,favicon.ico文件应置于根目录下。多数浏览器将自动检测并使用它。
建议包含以下两行HTML代码:
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)时,才有必要添加第二行。
在HTML中,link组件必须在head组件里(在<head>和</head>之间)。
对于XHTML,link必须使用“ />”结束(或“></link>”),而不可以使用“>”结束。
href可以,但不必指向/favicon.ico的位置。它可以指向任何URL。
图像通常可以使用任何被浏览器支持的图像格式。
.ico文件格式通常可以被所有可以显示favicon的浏览器读取。
设置服务器,以发送正确的MIME标识:
ICO 文件 image/vnd.microsoft.icon(或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型,因为多数主流浏览器现在支持它)
GIF 文件 image/gif
PNG 文件 image/png
使用适当的分辨率和色深。
ICO:包括多种分辨率(最常使用的是16×16和32×32,Mac OS X有时使用64×64和128×128)以及位深(比特每像素)(多数使用4、8、24 bpp,即16、256和1600万色)。
GIF:使用16×16,256色。
PNG:使用16×16,256色或24位。
注意:当favicon.ico被置于文档根目录时,将会被一些不处理link组件的浏览器找到,即使没有您的站点上没有指向它的链接。
网页小图标Favicon相关推荐
- SpringBoot更换网页小图标favicon.ioc
SpringBoot更换网页图标favicon.ioc 更换网页图标 1.用IOC转换工具制作出自己喜欢的ioc图标,命名为favicon.ioc 2.将favicon.ioc放在静态资源目录下 &q ...
- 前端如何设置浏览器网页标签页前的小图标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 ...
- 『精品素材』20套免费的网页小图标素材下载
在网页设计工作中,图标设计是最耗时的任务之一,但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用.下面这个列表收集了20套免费的网页小图标,记得分享和推荐啊. Free 16p ...
- 设计透明背景的ICON(网页小图标)
Designo总会有不同成图的洁癖,只是需要纯粹的图案. 而在网页设计和App设计的时候,会用到透明背景的logo或者是icon之类的.上述的icon出现在网页设计中就是"网页小图标 ...
- 75个像素网页小图标素材
内容提要:75个像素网页小图标素材,75个像素网页小图标素材,包括:心,箭头,用户,手,搜索,电话图标,声音图标,对号,箭头... 75个像素网页小图标素材,包括:心,箭头,用户,手,搜索,电话图标, ...
- html之设置页面ico图标ie浏览器,如何修改网页小图标,浏览器页面上的图标(favicon.ico)...
我们在查看网页的时候很多 那么如何更改这个图标呢?两种方式. 第一种方式: 1.找到已经安装的tomcat目录,进入D: omcatapache-tomcat-7.0.50-1webappsROOT目 ...
- springboot网页小图标
如图所示,每个网页上都有着自己独特的小图标,在SpringBoot中我们只需将小图标命名为favicon.ico,并放在静态资源目录下即可 制作小图标的网址:https://tool.lu/favic ...
- Dreamweaver 无法显示网页小图标
HBuilderX .Dreamweaver 2018.2019 升级以后 运行网页 都是基于服务器 . 可以实现更新并保存代码后无需刷新,自动显示最终效果,多屏操作时,方便许多. 而最近都是使用HB ...
最新文章
- java map在前端遍历_遍历循环输出map的几种方式
- [转] [翻译]C# Object Initialization[完整版]
- 人工智能:一种现代方法汇总
- 【CyberSecurityLearning 附】域的复习+小综合实验(重要!)
- PHP实现10亿个商品编码ing
- 数据库 10 大常见安全问题盘点~
- 前端学习(2472):发布文章功能介绍
- 美人秀色空绝世,我用PS-GAN试伊妆
- 前展(规划)后延(架设):编码开发程序员的出路之一
- SQL服务器引擎组件概览
- ST算法 Sliding Window algorithm template
- unity天空盒渐变,Unity 3D从一个天空盒淡入另一个天空盒
- 千呼万唤始出来:JUC灵魂AQS终于来了
- win10更换自己喜欢的鼠标样式,马里奥、wow、lol都可以哦
- Git 换行符自动转换
- 无人机倾斜摄影—三维建模和DSM,DEM,DOM(正射影像)的生成「CC(Smart3D)),Pix4d,Photoscan,Inpho」
- LATEX 幻灯片入门
- 2022-2028年全球与中国汽车超声波传感器行业深度分析
- linux 的gz命令详解,linux tar.gz压缩解压命令详解
- 什么是示波器?示波器的使用方法图解
热门文章
- 搭建及训练py-R-FCN遇到的问题
- fatal error: alsa/asoundlib.h: 没有那个文件或目录错误解决办法
- 关于初学Go的一些总结
- react学习笔记(8)生命周期回顾与再认识
- 《C语言编程魔法书:基于C11标准》——第一篇 预备知识篇 第1章 C魔法概览1.1 例说编程语言...
- 《程序员的修炼——从优秀到卓越》一一1.6 勿以专家自居
- <读书笔记> Thinking in python (Python 设计模式) 1. Singlton的c++与python的实现
- 基于LSTM的研报分类系统
- 长短时记忆网络(LSTM)部分组件(六)
- python进程实例