网页favicon.ico图标设置及制作
favicon图标介绍
图标生成网址:http://bitbug.net/
如何安装Favicon
将压缩文件中的favicon.ico图像放在根目录下(也可以是其他目录)
在页面源文件的<head></head>标签之间插入
<link rel="shortcut icon" href=" /favicon.ico" type="image/x-icon" />
最后形成(在<head>标签中引入需修改我们图标的href):
<head>
...
<link rel="shortcut icon" href="/favicon.ico" />
</head>
Images文件夹下用于放置图标/图片
home.html 代码如下:<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>home page</title><link rel="icon" href="Images/wangyi.ico" type="image/x-icon" /><link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
</head>
<body>home page
</body>
</html>
下面两行代码就可以告诉浏览器使用wangyi.ico 作为home.html的图标了(注意路径href):
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
基本上所有的现代浏览器都支持这种写法,例如firefox,ie9.
firefox:
ie9:
可惜的是普通用户用的基本上是360浏览器,搜狗浏览器,qq浏览器等。
搜狗浏览器:
可以知道,我们在网站根目录下面的favicon.ico 起作用了,所以显示的是网站根目录下面的favicon.ico 图标。
打开360浏览器:
奇怪了,google的图标哪里来的。。。。???
我们的faviconTestWeb 只有3个图标,一个是wangyi.ico.baidu.ico.favicon.ico(cnblogs的图标)。
为什么使用360显示的是google的图标?
其实360浏览器在浏览网页的时候,它会忽略端口,也就是说http://localhost:3529/home.html,
firefox请求的是:link 的href所对应的图标。
搜狗浏览器等:请求的是http://localhost:3529/favicon.ico.
360浏览器等:请求的是http://localhost/favicon.ico,
也就是不管你请求的是http://host/home.html,还是http://host:333/home.html,还是http://host/test/home.html.
它请求的都是http://host/favicon.ico.
证据就是打开360se的安装目录:
所以如果你的网站favicon.ico 不起作用,或者是想要让favicon.ico 的兼容性更好,要使用下面几个步骤:
1:检查网站根目录下面的favicon.ico,也就是:http://host/favicon.ico.,而不是http://host/some/favicon.ico.
2:确保<link rel="icon" href="http://host/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://host/favicon.ico" type="image/x-icon" />
使用的是http://host/favicon.ico
3:如果你的网站带端口,或者是测试版本的话,那么尤其要注意360等浏览器,它们在请求favicon.ico 的时候会忽略端口号的。
如有不足请多多指教!希望给您带来帮助!
网页favicon.ico图标设置及制作相关推荐
- 苹果cms网页favicon.ico图标设置与制作
1,favicon图标介绍 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏.浏览器标签上或者在收藏夹上,是展示网站个性的缩略logo标志,也可以说是网站头像,目前主要的浏览器 ...
- 网页地址栏ico图标设置
关于设置网页地址栏前面的ico小图标方法 <link rel="icon" href="../favicon.ico" type="image/ ...
- 第一次博客(比特虫):网站favicon.ico图标介绍,制作
介绍(来自百度): 一般用于作为缩略的网站标志,它一般在浏览器,地址栏标签上或者在收藏夹上,是展示网站个性的缩略logo标志,如图黄色logo区域,就是favicon图标: 制作(主要制作工具是比特虫 ...
- html网页logo属性link,html元素link标签rel=icon添加网站favicon.ico图标
html元素中的link标签除了可以引用插入CSS样式表文件之外,还可以通过link标签设置网站的favicon.icon图标. 什么是favicon.icon图标? 网站favicon.ico图标, ...
- 如何给网站设置favicon.ico图标
favicon.ico是什么? 所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站. favicon.ic ...
- 如何给网站制作一个favicon.ico图标
如何给网站制作一个favicon.ico图标,附代码(图) ico图标是网站的头像,在打开网站的时候出现在IE的地址栏里,目前大多数浏览器都支持,最常用的IE6.0则显示加入本地收藏夹网站的ICO图像 ...
- 在线透明favicon ico图标文件制作 - aTool在线工具
原址:http://www.atool.org/ico.php 在线透明favicon ico图标文件制作 - aTool在线工具 支持格式 png.jpg.gif 在线转换成透明.ico图标. [图 ...
- 在线favicon ico图标文件制作工具
推荐一个:在线工具 所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全 ...
- 制作 Favicon.ico 图标教程
摘要:有一些站长认为 favicon.ico 图标对于一个网站没有什么作用.甚至有一些站长认为,少加载一个图片,页面设计展现的速度更快些.的确,理论上是对的,但乐猪认为这种想法是肤浅的!有这种想法的站 ...
最新文章
- JavaScript学习知识点归纳
- java buffer 记事本_Java实现记事本|IO流/GUI
- 微软面试题:有100万个数字(1到9),其中只有1个数字重复2次,如何快速找出该数字
- 得到进程id_搞懂进程组、会话、控制终端关系,才能明白守护进程干嘛的?
- Dubbo普普通通9问
- 【Python实例第5讲】Pipeline与GridSearchCV降维法
- Qt QPainter绘图
- 程序员转项目管理之考证PMP
- 什么目录存放Linux源代码,Linux根目录下有哪些目录,存放的内容是什么?
- teamviewer 11 linux,安装Teamviewer的问题
- python中英文切换_python国际化(i18n)和中英文切换
- 阿里面试题 ——输入一个字符串,输出所有的排列
- [计算机视觉] AprilTag 2: Efficient and robust fiducial detection(2016)论文理解
- 119全国消防日,我们要注意用火安全
- JavaScript--------冒泡排序(含题目和答案)
- python用户输入错误重新输入_Python输错4次用户名密码需要输入验证码
- MOV PC, LR解析
- 光纤收发器具体是怎么使用的?光纤收发器使用方法详解!
- 模式,动态,数据化及其他
- 半导体 ,p型和n型半导体的区别