给网站设置ICO图标

我们浏览网站的时候经常可以看到每个站都有自己的logo标志，在浏览器标签栏里面也会在网站titile前面显示一个小图标，既个性有漂亮，具体见下图：

如何制作？
步骤一：准备一个图标制作软件
Icon是一种特殊的图形文件格式，它是以.ico 作为扩展名。
高级浏览器也能支持.png格式，但是为了更好的兼容IE8所以选择.ico格式。
普通的图像设计软件无法使用这种格式，在线的制作工具很多，也可以下载本地的制作工具。

步骤二：确定“收藏夹”图标的规格
图标要256色或16色的16*16尺寸ico文件，ico图标的尺寸有多重格式可选：16*16、24*24、32*32，为了更好的兼容IE8我们选择16*16的尺寸

步骤三：设计一个属于您自己的图标
你可以将你网站的logo做成一个符合尺寸的jpg或者png等格式的图片，然后将这个图片通过制作ico的工具制作ico图标，命名为：favicon.ico

步骤四：显示ICO图标
将ico图标文件（favicon.ico）上传到网站所在的服务器的根目录下
在head之间放置如下代码：

<link href="/favicon.ico" rel="Shortcut Icon">
<link href="/favicon.ico" rel="Bookmark">
<link rel="icon" href="/favicon.ico"/>

实测：支持 IE、Chrome、Sfaria、Firefox、Opera、世界之窗、360安全、360急速、遨游、猎豹 ...

but，你可能会遇到ico不显示，这是为何？

1、检查ico路径是否正确
2、检查图标是否符合要求
3、清除浏览器缓存、找到浏览器缓存目录把ico缓存删除（不同浏览器设置方式不一样）

友情提醒
①IE7高级选项“使用个性化收藏夹”要启用。
②图标要256色或16色的16*16尺寸ico文件。
③link href=”favicon.ico” rel=”shortcut icon” 这个后面要斜杠关闭，无论你是否使用了不严格的DOCTYPE。
④IE要删缓存。
⑤刷新。加收藏。
⑥经过以上５步，运气好就成了，多数情况这个时候还是不显示图标，那就再来一步，重启IE。
⑦如果你很倒霉，以上６步都还不成，那就重启电脑吧。

下面给大家讲讲移动端的ICO

<!-- Android 主屏图标 -->
<link rel="icon" sizes="196x196" href="/images/apple-touch-icon-152x152.jpg">
<!-- IOS 主屏图标 -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-76x76.jpg">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/images/apple-touch-icon-76x76.jpg">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/images/apple-touch-icon-120x120.jpg">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/apple-touch-icon-152x152.jpg">

给网站设置ICO图标相关推荐

html网页logo属性link,html元素link标签rel=icon添加网站favicon.ico图标
html元素中的link标签除了可以引用插入CSS样式表文件之外,还可以通过link标签设置网站的favicon.icon图标. 什么是favicon.icon图标? 网站favicon.ico图标, ...
如何下载某个网站的ico图标?
如何下载某个网站的ico图标? 当前网址url后面添加 /favicon.ico,比如: https://blog.csdn.net/favicon.ico https://zbloghost.cn/ ...
java ico图标_javaweb中如何给自己的网站更改ico图标
我们在查看网页的时候很多网站都有自己的小图标,系统读取这个标志的时候先从你的项目的根目录下读看有没有favicon.ico文件,如果有直接显示这个图标,如果没有,则会去webapps/root/下找这 ...
favicon自动获取_php获取网站favicon.ico图标 api源码自动获取并添加Favicon图标
通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目.现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊." ...
如何获取网站的ico图标呢？
如果你用的是360浏览器,可以到C:\Users\Administrator\AppData\Roaming\360se6\apps\data\users\default\data\,这个目录里去找找 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
如何获取网站的ico图标
1.什么是ico图标,如下: 2.如何获取: 在你需要的ico图标的网站的网址后面输入favicon.ico 3.对着图标,点击保存即可
第一次博客（比特虫）：网站favicon.ico图标介绍，制作
介绍(来自百度): 一般用于作为缩略的网站标志,它一般在浏览器,地址栏标签上或者在收藏夹上,是展示网站个性的缩略logo标志,如图黄色logo区域,就是favicon图标: 制作(主要制作工具是比特虫 ...
网站favion.ico图标
Favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上. 目前主要的浏览器都支持favicon.ico图标一制作favicon图标 1 把品优购图标切成png图片 2 ...
解决获取网站的ico图标问题
获取ico图标第一种方法通过在域名后面加后缀获取,假设这里要获取 B站的网站小图标,直接在网站域名后加 /favicon.ico. https://www.bilibili.com/favico ...

给网站设置ICO图标

给网站设置ICO图标相关推荐

最新文章

热门文章