什么是favicon.ico?
㈠定义
⑴所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。
⑵根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式;除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon等。
㈡应用
⑴中文名称是网站头像。在我们的网站建设中,为网站打造一个契合网站主题的个性化标志则是必需的。
⑵favicon.ico图标是网站的缩略标志,可以显示在浏览器标签、地址栏左边和收藏夹,是展示网站个性的缩略logo标志,也可以说是网站头像,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的。
⑶favicon也并不只是仅仅让网站给人更专业的观感,也可以在一定程度上减轻服务器的流量带宽占用,一般为了提高网站的可用性,都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。
㈢制作
常用的Favicon.ico图标有3种16×16、32×32、48×48。
第一种方法:
1)制作一个16×16像素的favicon.ico图片,上传到网站根目录下。
2)把这段代码放在网页head区域里就行了。
注:这种方式,ico
文件的名称一定要叫:favicon.
第二种方法:在线制作
1)首先准备处理logo图片,格式可以是jpg或者PNG格式的。
使用PS,新建图层 100px*100px,logo图片置入
注意:这里图片的尺寸没有特别要求,但是大小限制在500k以内。
2)考虑到ico图标为正方形,且实际显示的尺寸是极小的,所以logo如果太大,建议选取里边最有辨识度的一部分作为ico图标。
logo最好刚刚充盈整个图层。
3)保存为 .jpg .jpeg .gif .png等图像格式都可以,但是一般建议保存为 .jpg 、.png,比较好操作。
4)在网页搜索“ico”或“比特虫”,就能找到该网页工具。
上传文件,一般默认尺寸,填好验证码,生成即可!
将其下载到电脑里。
也可以在这个网站上制作:(1)http://www.faviconico.org/
(2)http://www.atool9.com/ico.php
5).ico图标完成!
在网站后台找到原来的favicon.ico文件,将新的bitbug_favicon.ico改为favicon.ico,替换即可。
注:favicon
的格式不一定是ico
格式,它可以是png
,jpg
甚至是gif
,不过ico
格式是所有浏览器都支持的。
㈣使用方式
1)怎么查看一个网站的favicon.ico呢?
在公司的网址后输入/favicon.ico;
2)在html中引入favicon.ico
将favicon.ico放入于html在同一个目录中,然后引入:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
放在title后面,head里面。
㈤网页上调用
浏览器调用favicon的原理是首先在网页所在目录寻找favicon.ico文件,如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为favicon.ico然后上传到网站的根目录下。
如果需要将Favicon.ico放到其他目录下,或者希望让不同的网页显示不同的Favicon,就需要在网页Html文件中做设定了,在Html中的<head>部分加入如下的代码:
<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel="icon" href="animated_favicon1.gif" type="image/gif" >
含义:在浏览器标签中显示favicon,在收藏夹中显示favicon。
㈥更新
favicon.ico如何更新?
⑴如何更新favicon.ico图标,因为本地浏览器存在的缓存可能无法及时更新favicon.ico图标。 关闭所有打开的浏览器,并清空浏览器缓存。
⑵打开网站并加入收藏夹。 关闭浏览器,重新打开网站,就更新了。 若此时还未更新favicon.ico图标,请稍等一会再打开浏览尝试。
⑶如果是用360浏览器,无法更新,清除缓存的地址是C:\Documents and Settings\Administrator\Application Data\360se\data\ico;
这个位置记录你所浏览的网站的ico,删除你想更新的ico文件就好了,关掉浏览器,重新打开网站就更新了。
⑷如果使用的火狐或者chrome浏览器,则更新更加简单,使用火狐和chrome的隐私模式进行浏览即可更新缓存。
参考:https://baike.baidu.com/item/favicon.ico/8944811?fr=aladdin
什么是favicon.ico?的更多相关文章
- [转载]网站地址栏小图标favicon.ico的制作方法
有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将 ...
- favicon.ico 404
favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favi ...
- favicon.ico 404的问题(title栏前面的图标)
1.页面中自定义图标 去 http://www.bitbug.net/ 定制图片,有32*32,16*16等样式可供选择 2.在页面中引入定义的图片 <link rel="sho ...
- PHP获取网站图标(favicon.ico)文件
有的网站源码中加入了这几行代码: <link rel="shortcut icon" href="/favicon.ico" type="ima ...
- Magento后台简单更换favicon.ico
刚才需要更换网站的favicon.ico,就是浏览器url前面的那个小图标. 网上稍微搜搜一下,然后就震惊了,号多方法是替换文件的方法,而且文件散步在网站的各个角落. 其实,后台是有直接上传更换的方法 ...
- 关于favicon.ico,shortcut icon,icon
引入一篇文章.关于favicon.ico二三事. http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html 一直对favicon ...
- favicon.ico应用与正则表达式验证邮箱(可自动删除前后的空格)
1.favicon.ico制作:favicon.ico可以ps制作;“shortcut icon”中间有一个空格 <head> <link rel="shortcut ic ...
- 站点图标favicon.ico
favicon.ico图标: 网站的favicon.ico需要一次额外的http请求,无论你是否有在html里面添加 link链接 <link rel="shortcut icon&q ...
- favicon.ico文件简介
本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...
- 移动端页头推荐配置 出现找不到favicon.ico错误原因和解决方法
favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico .为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一: ...
随机推荐
- Linux目录结构解释
Linux的常用命令 cp: 用于文件复制的命令. cp file_1 file_2 copy_position -v: 复制的详细过程. -r: 复制目录. mv: 文件移动或文件重命名. mv f ...
- CNN网络结点计算总结(1998)
图 来源:Gradient-Based Learning Applied to Document Recognition 参阅CSDN:https://blog.csdn.net/dcxhun3/ar ...
- 《深入实践C++模板编程》之四——特例
1. 所谓模板特例,是针对符合某种条件的模板参数值集合另外声明的模板实现变体. template<typename T> class my_vector; template<> ...
- Spingboot+Mybatis+Oracle项目配置
配置过程参考: 项目创建:http://how2j.cn/k/springboot/springboot-eclipse/1640.html 集成Mybatis使用Oracle:https://www ...
- 在Win10上运行ESXI-Comstomer
在Win10上运行ESXI-Comstomer 来源 https://www.v-front.de/p/esxi-community-packaging-tools.html ESXi-Customi ...
- JS基础_运算符的优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础_相等运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Sql Server 导出数据库表结构的SQL查询语句
--导出数据库所有表 SELECT 表名 Then D.name Else '' End, 表说明 Then isnull(F.value,'') Else '' End, 字段序号 = A.colo ...
- http://www.moext.com博客搬家到这里啦
1.原博客莫叉特用的是自己的域名http://www.moext.com,由于服务器在国外,访问不太稳定,SEO做得也很不好: 2.喜欢博客园的极简风格,目前来看广告量也在可接受范围: 3.一个偶然的 ...
- MySQL表内更新时,自动记录时间
1.创建表: create table test_time(id int primary key not null,status varchar(24),create_time datetime d ...