据称,近年来超过70%的网络流量来自移动设备。在移动设备上,图标分辨率将是桌面版本的两倍以上。具体来说,您可能需要更大的图标图像,例如 256px x 256px。
首先,创建一个尺寸为 256px x 256px 的图标设计,将其导出为 .png 文件,然后使用调整大小工具更改大小。
一些尺寸转换工具不仅会优化尺寸,还会自动将文件转换为“.ico”格式。这样,您可以一次性创建各种尺寸的图标文件。
尺寸
应用
“16像素 x 16像素”
浏览器图标
“32像素 x 32像素”
书签和快捷方式图标
“96像素 × 96像素”
桌面快捷方式图标
“180像素 × 180像素”
适用于 Apple 设备(iPad)的图标
“192像素 x 192像素”
Chrome 推荐的图标大小
“256像素 × 256像素”
Android 主屏幕的 Favicon
网站图标尺寸标准:任何大于或等于 32px 的尺寸必须是 48 的倍数。
文件格式
网站图标的主要文件格式为“.svg”、“.png”、“.gif”和“.ico”。最初,推荐的图标格式是 ICO,但现在推荐使用矢量图、SVG、PNG 或 JPEG。
SVG 是一种流行的选择,因为它们可以调整大小并且看起来总是很棒。现在许多浏览器都支持 SVG。
您还可以创建一个图标大小的 GIF 图像,以将其显示为动画图标。确定尺寸时要小心,因为小尺寸会使您的 GIF 图标难以看清。
ICO:微软开发的一种图标文件格式。所有浏览器都支持它,并允许您在一个文件中包含多种尺寸的图像。这允许独立于浏览器调整图像的大小和缩放比例。很多时候,即使图标保存为ICO等文件类型,浏览器也会选择显示ICO版本。
PNG:一种流行的图标文件格式。这是一种易于创 韩国电报数据 建的格式,通常提供高质量的图像和图标。尽管 PNG 文件是图像,但它们很轻,可以快速加载。
SVG:这种文件格式非常轻量,非常适合用于网站图标。最好的部分是,它可以提供高质量的图像,而不会降低您的页面速度或网站性能。然而,过去一直存在浏览器兼容性不足的问题,但现在它已可在所有主流浏览器上使用,并且其使用范围正在扩大。
透明度:,请打开透明度设置并将文件保存为 PNG。
网站图标和 SEO
网站图标不会直接影响您网站的 SEO。然而,好的网站图标可以帮助您改善搜索结果,因为它可以改善整体用户体验。
现在您已经了解了安装 favicon 的好处,让我们来看看如何实际创建和安装 favicon。