不可忽视的ICO网站图标_用户体验_日志_DTOP

不可忽视的ICO网站图标

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

一、为什么要谈不它

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

二、为什么要有它

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

三、设置它有哪些方法

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

注意：

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

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

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

方法二：在网页的<head>...</head> 区加入代码。

格式如下：

<html>

<head>

</head>

<body>

</body>

</html>

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

四、图标大小选择

制作ICO图标一般电脑端大小一般是16x16 32x32等，根据自身网站logo来设计。移动端相对来说会稍微复杂一些，特别是苹果移动设备端，一定要针对不同的尺寸进行预先设计。在苹果移动端上，一个网站被添加到主屏幕时，默认显示的桌面图标是网站截图，因为苹果移动设备对移动网站添加到桌面的时候增加了图标属性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属性图标多出一个高光。也就是说使用apple-touch-icon属性在桌面上显示的图标是“增加高光光亮的图标”，使用apple-touch-icon-precomposed属性在桌面上显示的是“设计的原图图标”。

用户体验

不可忽视的ICO网站图标

用户登录

还没有账号？