详解ico图标制作方法
favicon图标介绍
前言
favicon.ico一般用于作为缩略的网站标志
,它显示位于浏览器的地址栏或者在标签
上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标.
图标生成网址: http://bitbug.net/
如何安装Favicon
当成功生成 favicon.ico 图像文件后,浏览器会自动弹出一个zip的压缩文件
将压缩文件中的 favicon.ico 图像放在根目录下(也可以是其他目录)
在页面源文件(一般是项目中index.html)的标签之间插入
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
案例如下: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><div>home page</div>
</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 的时候会忽略端口号的。
详解ico图标制作方法相关推荐
- 透明ico图标制作方法
icon可以用多个软件制作,也可以通过一些网站把普通图片转换为.ico文件,但通常存在的问题是图片本该透明的地方经转换后变为了黑色或者白色,十分影响效果.难道一定要制作正方形的.ico文件方能掩盖此缺 ...
- indesign图片规定在左下角_详解InDesign基本使用方法
详解InDesign基本使用方法 为了使朋友们尽快掌握InDesign的使用方法,下面,我们通过一个例子来说明它的操作过程.做之前,先要说两句.乍一接触Indesign,许多朋友会觉得很不熟悉,很不适 ...
- python导入模块介绍_详解Python模块导入方法
python常被昵称为胶水语言,它能很轻松的把用其他语言制作的各种模块(尤其是C/C++)轻松联结在一起.python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的 ...
- 详解InDesign基本使用方法
详解InDesign基本使用方法 为了使朋友们尽快掌握InDesign的使用方法,下面,我们通过一个例子来说明它的操作过程.做之前,先要说两句.乍一接触Indesign,许多朋友会觉得很不熟悉,很不适 ...
- python获取屏幕文字_详解:四种方法教你对Python获取屏幕截图(PyQt , pyautogui)...
前言: 今天为大家带来的内容是详解:四种方法教你对Python获取屏幕截图(PyQt , pyautogui)本文具有不错的参考意义,希望能够帮助到大家! Python获取电脑截图有多种方式,具体如下 ...
- 处理对象(toString()方法详解和==与equals方法的区别)
处理对象(toString()方法详解和==与equals方法的区别) toString()是一个非常特殊的方法,它是一个自我描述的方法.当程序员直接打印该对象的时候,系统会输出该对象的"自 ...
- Android动态图标包制作教程,安卓手机ico图标制作美化图文教程
如何让手机更加与众不同?今天我们就来学习如何利用出色的ico图标制作软件--Axialis IconWorkshop制作出美化手机屏幕的个性图标! 如今,每个人都有属于自己的手机,每天使用手机聊QQ. ...
- iTextSharp 使用详解用C#制作PDF文件全攻略
iTextSharp 使用详解&用C#制作PDF文件全攻略 http://blog.csdn.net/gatr/article/details/278173 转载于:https://www.c ...
- ubuntu 文件权限命令详解使用格式和方法
为什么80%的码农都做不了架构师?>>> 在 Ubuntu Linux 中用源码文件安装软件时经常都会用到chmod命令来更改文件的权限使其在安装时有执行的权限.由于 Ubun ...
- 5 获取窗口位置_详解:四种方法教你对Python获取屏幕截图(PyQt , pyautogui)
前言: 今天为大家带来的内容是详解:四种方法教你对Python获取屏幕截图(PyQt , pyautogui)本文具有不错的参考意义,希望能够帮助到大家! Python获取电脑截图有多种方式,具体如下 ...
最新文章
- matlab怎么跑.cpp程序,MATLAB编译cpp文件
- 2018程序员不能错过的编程挑战网站 Top10
- 神清气爽,小妹妹,先给她示范了一遍红色警戒
- Codeblocks 开发板调试简单教程
- vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
- 初学 快速幂 的理解
- iwlist/iwconfig/iw命令
- Xcode 证书生成、设置、应用
- matlab离散信号幅频相频特性,信号幅频相频特性画法(频率响应法).pdf
- 提供可用的BT5更新源,亲测可用
- 39岁阿里P9提前退休,资产1.5亿,北京4套房!职场人的离职悲喜各不相同
- 2021年又一深圳程序员猝死,7大信号助你提前预警《打工人的那些事》
- 虎牙直播怎么换html5,虎牙直播怎么换徽章-虎牙直播更换粉丝徽章的方法 - 河东软件园...
- web sql indexedDB
- 使用GnuRadio + OpenLTE + SDR 搭建4G LTE 基站(上)
- 有些计算机病毒没有传染性,电脑病毒有没传染性介绍
- 流量计算机标准,1g流量等于多少mb 1G有多大?(电脑与手机)
- TeamTalk源码分析(二) —— 服务器端的程序的编译与部署
- 记录项目中rocketmq的错误处理
- python进行机器学习(四)之模型验证与参数选择
热门文章
- Python 读取加密后的xlsl
- pr如何跳到关键帧_【技能培训营】Pr基本操作(五)
- 中国将在未来几十年主导电动汽车市场
- poj1265 皮克公式 求多边形面积(凹凸)
- 数学分析笔记4:一元函数微分学
- pci和pcie的区别
- 哈佛大学公开课-幸福课-个人笔记
- 常见的 Android 性能指标获取方式:CPU、FPS、Memory、GPU 、I/O、Network
- 如何用ESP8266 向手机App 发送信息
- hbuilder版本更新失败_Hbuilder X升级后报错误:plus.device.getInfo is not a function