shortcut icon地址栏显示个性图标

转自：http://www.micmiu.com/web/shortcut-icon/

作者: Michael日期: 2012 年 2 月 13 日发表评论 (0)查看评论

Shortcut Icon 就是在网站地址的前面出现的那个小图标。
想要让你的网站显示个性图标，首先需要制作个icon的图标（用PS自己做或者用在线的制作，具体网站见附录），
其次需要在页面的“<head></head>”间添加如下代码：

`1`	`<!--可以在收藏夹中显示出图标-->`

`2`	`<link` `rel="Bookmark"` `type="image/x-icon"` `href="favicon.ico"/>`

`3`	`<!--可以在地址栏中显示出图标-->`

`4`	`<link` `rel="icon"` `type="image/x-icon"` `href="favicon.ico"` `/>`

`5`	`<link` `rel="shortcut icon"` `type="image/x-icon"` `href="favicon.ico"` `/>`

注意点：

一般ICON的分辨率是16*16，大小1-2k，建议不宜过大
href也可以是绝对路径或URL 比如：href=”/favicon.ico” href=”http://www.xxx.com/favicon.ico”
当favicon.ico被置于文档根目录时，将会被一些不处理link元件的浏览器找到，即使站点上没有指向它的链接
把图标命名为favicon.ico 一般不用写link就可以应用于站点下的每一个页面文件
favicon.ico不是必须要放在根目录，名称也可以自己定义，只是在link中具体的href对应好即可

PS：如果你已经安装上面介绍的步骤更新到网站目录以后，用IE仍然不显示小图标，问题很可能出在缓存的历史记录上，
请选择选择Internet选项，删除浏览历史记录，重新刷新页面一般即可解决。

附录：提供在线制作icon的网站

http://www.ico.la/
http://www.makeico.com/
http://free.logomaker.cn/tools/icoMaker.aspx
http://ico.55.la/

原创文章，转载请注明： 转载自micmiu – 软件开发+生活点滴[ http://www.micmiu.com/ ]

本文链接地址: http://www.micmiu.com/web/shortcut-icon/

shortcut icon地址栏显示个性图标相关推荐

Shortcut Icon地址栏显示图标
转自:http://hnhuaxiatang.javaeye.com/blog/792982 Shortcut Icon 就是在网站地址的前面出现的那个小图标. 想要让你的网站显示个性图标,首先需要制 ...
在网站的地址栏中的显示个性图标
1弄一个ico的图表文件,把名字命名为 favicon.ico. 将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下.注意:您不需要对您的网页文件作任何的修改,IE5 会自 ...
微信小程序例子——使用icon组件显示常用图标
1.效果展示 2.关键代码 3.源代码获取方式百度云链接:http://pan.baidu.com/s/1hsNoIK8 密码:sdi0 4.在使用icon组件显示常用图片的过程中有遇到任何问题或者 ...
地址栏图标更换即shortcut icon问题
为了是地址栏可以显示自己的网站图标,可以在网页添加如下代码: <link rel="SHORTCUT ICON" href="images/favicon.ico& ...
如何解决IE地址栏前小图标不显示问题
步骤: 一.可用PS软件制作一个图标文件,大小为16*16像素. 二.将制作好的图片提交给可在线生成16*16像素的ico图标的网站,如 http://www.graphicsguru.com/fav ...
在地址栏显示网站的图标
在地址栏显示网站的图标做法: 制作一个图标文件,大小为16*16像素.文件名为favicon.ico,然后上传网站根目录中. 在HTML源文件"<head></head& ...
在浏览器地址栏http前面添加个性图标
第一步:要准备一个个性的图片,但是一定要是ICo格式的哦,你可以把图片上传到空间里,然后方便调用 ico图标在线生成地址 http://www.bitbug.net/ 方法一.在页面的源文件的< ...
在地址栏中显示网站图标的方法(增加网站ico图标)
第一种方式:可以直接把制作的图标命名为favicon.ico,上传到网站根目录即可: 第二种方式:如果希望不同的栏目(或页面)显示不同的图标,则需要在该网页文件的 HEAD 部分加入以下内容: & ...
shortcut icon 修改浏览器标签网站图标
为什么80%的码农都做不了架构师?>>> <link rel="shortcut icon" href="favicon.ico" ...

shortcut icon地址栏显示个性图标

shortcut icon地址栏显示个性图标相关推荐

最新文章

热门文章