您的位置: 首页 >>日志>>用户体验>详细内容

用户体验

不可忽视的ICO网站图标

来源:本站原创 发布时间:2021-04-12 14:10:56 浏览次数: 【字体:

一、为什么要谈不它

  ICO图标对工程师来说,并不陌生,大多数人的印象就是在PC端浏览网站时网址前面的小图标,但也有很多网站是没有的,包括政府在内的官方网站,比如澳门中联办。

二、为什么要有它

ICO图标作为网站在浏览器显示图标,在用户浏览网站中起到很大的作用,它能够让人感觉很正规、大气等特征还可以在收藏夹内收藏内容的前段显示小图标,更重要的是它是移动端添加到桌面要显示的图标。特别是移动端浏览网站并且把网站添加桌面时,更能显示专业与否,苹果手机直接把网站缩略图作为图标了,截图的图标放置到手机桌面视觉效果可想而知。

三、设置它有哪些方法

方法一网站根目录下直接放置名为favicon.ico 的图标文件。

注意:

1、图标名称必须是favicon或网站域名

2、格式必须是ICO文件,JPG等其他格式的图片文件是不行的。

3、此方法在浏览器全站统一图标,如果你想要不同的栏目显示不同的图标,此方法不适合。

方法二:在网页的... 区加入代码。

格式如下

</span><span style="font-family: 宋体; color: #454545; font-size: 14px">图标显示</span><span style="font-family: 宋体; color: #454545; font-size: 14px">

Bookmark" type="image/x-icon">


这种方法也可以用动态的图标gif以及png等图标

四、图标大小选择

制作ICO图标一般电脑端大小一般是16x16  32x32等,根据自身网站logo来设计。移动端相对来说会稍微复杂一些,特别是苹果移动设备端,一定要针对不同的尺寸进行预先设计。在苹果移动端上,一个网站被添加到主屏幕时,默认显示的桌面图标是网站截图,因为苹果移动设备对移动网站添加到桌面的时候增加了图标属性apple-touch-icon 或 apple-touch-icon-precomposed,它可以根据不同的移动端去自定义图标大小,从而使桌面图标显示更加完美。

9.png" />

 rel="apple-touch-icon-precomposed" sizes="144x144" ref="ipad3.png"  />

五、apple-touch-icon 和 apple-touch-icon-precomposed两种属性区别

字面意思apple-touch-icon是“苹果移动设备图标”,apple-touch-icon-precomposed“苹果移动设备初始图标样式”,通过测试,使用apple-touch-icon属性后,在桌面上显示的图标明显比使用apple-touch-icon-precomposed属性图标多出一个高光也就是说使用apple-touch-icon属性在桌面上显示的图标是“增加高光光亮的图标”使用apple-touch-icon-precomposed属性在桌面上显示的是“设计原图图标”。