favicon.ico介绍,网页图标的制作&动态网页图标
2017-03-12 18:18
597 查看
1、直接上成功的代码,关键代码:
<!DOCTYPE html>
<html>
<head>
<title>网页图标</title>
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
<link href="animated_favicon.gif" rel="icon" type="image/gif" >
</head>
<body>
Hello Boy!
</body>
</html>
2、文件目录参考:
![](https://img-blog.csdn.net/20170312180950561)
3、效果如下:
谷歌浏览器:
![](https://img-blog.csdn.net/20170312175935704)
火狐浏览器:
![](https://img-blog.csdn.net/20170312180003423)
注:火狐浏览器这个是个gif动图,由于动态图标目前仅火狐可用,所以为了区分两者我这里设置的网页图标分别用了两者不同的图。实际当中要显示一致的话可以直接去掉
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
这句。谷歌浏览器默认将gif显示为静态图。
4、关于代码:
网上找了一堆关于设置favicon.ico的结果好几个是无效的,参考如下:
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/> -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
最终测试OK的是这三句:
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
其中关键部分是:
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
解释一下:
href: 这是你网页图标的位置,建议放在服务器根目录下,图标必须是ico文件,我试过直接修改png格式是无效的,文件转换可以网上搜一下工具(比如我用的是这个:http://www.atool.org/ico.php),gif的话就不必转格式了!
rel: 用于解释 href 链接的对象和该网页有毛线关系用的,毕竟全称就是 relationship ,这个很重要!
剩下的 mce_href 、 type 这些就不解释了,百度去吧。 mce_href 有的说是为了搜索引擎(SEO)用的
<!DOCTYPE html>
<html>
<head>
<title>网页图标</title>
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
<link href="animated_favicon.gif" rel="icon" type="image/gif" >
</head>
<body>
Hello Boy!
</body>
</html>
2、文件目录参考:
3、效果如下:
谷歌浏览器:
火狐浏览器:
注:火狐浏览器这个是个gif动图,由于动态图标目前仅火狐可用,所以为了区分两者我这里设置的网页图标分别用了两者不同的图。实际当中要显示一致的话可以直接去掉
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
这句。谷歌浏览器默认将gif显示为静态图。
4、关于代码:
网上找了一堆关于设置favicon.ico的结果好几个是无效的,参考如下:
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/> -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
最终测试OK的是这三句:
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
其中关键部分是:
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
解释一下:
href: 这是你网页图标的位置,建议放在服务器根目录下,图标必须是ico文件,我试过直接修改png格式是无效的,文件转换可以网上搜一下工具(比如我用的是这个:http://www.atool.org/ico.php),gif的话就不必转格式了!
rel: 用于解释 href 链接的对象和该网页有毛线关系用的,毕竟全称就是 relationship ,这个很重要!
剩下的 mce_href 、 type 这些就不解释了,百度去吧。 mce_href 有的说是为了搜索引擎(SEO)用的
相关文章推荐
- 网页图标/images/favicon.ico" type="image/x-icon" />
- 网页ICO图标制作
- Photoshop制作Favicon.ico图标
- 如何让网页在浏览器标题栏显示自己制作的图标ico
- 网页左上角图标 favicon.ico
- Photoshop制作Favicon.ico图标(转载)
- favicon.ico图标在线制作+ico下载
- 让网页在浏览器标题栏显示自己制作的图标ico
- [第3天]favicon.ico 图标如何制作和设置?
- 网页添加图标(favicon.ico)
- 制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特...
- 制作favicon.ico图标
- 设置和修改网页地址栏图标favicon.ico
- 给网页添加标题图标favicon.ico
- 设置和修改网页地址栏图标favicon.ico
- SnippetShare 项目总结连载(十 一)-- 网页小图标favicon.ico
- 如何设置和修改网页地址栏图标favicon.ico?
- 【Web】网站主如何更改网页标签的图标(favicon.ico)
- 网页favicon.ico图标设置(转)
- 网页favicon.ico图标设置