如何为 iOS、Android、Windows 和 Mac 浏览器创建图标 (favicon)

最能代表一个公司或品牌的东西之一就是它的徽标,这就是为什么它应该出现在网站图标或图标中,以便当访问者浏览我们的页面时,它会被保存在收藏夹中或链接会保存在移动设备上,出现我们公司的标志。

目前,大多数网站已经使用浏览器的图标,但尚未针对其他设备或系统优化其余图标。接下来,我们将了解为所有设备和操作系统指定图标的正确方法。

 

如何为浏览器创建图标

我们假设我们的公司徽标采用 512px x 512px 的 .png 图像,因此我们必 手机号码数据 须生成.ico 格式的 16px x 16px 图像,这是我们最终用作网站图标的图像。

要为浏览器或网站图标生成此图标,我们可以使用免费的在线工具,例如DynamicDrive提供的工具,该工具还为桌面版本的 Windows 生成相应的图标,这样,如果有人将浏览器图标拖到桌面上,他们就会使用较大的版本,以便可以正确看到。

为了标准化,生成的图像必须称为 favicon.ico,并且必须放置在我们网站的根目录下。例如,在我们的网站上,它位于https: //www.  con.ico。现在我们只需在页面 HTML 的 <head> 部分中指示图标所在的路径,为此,我们将使用以下代码:

手机号码数据

 

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

默认情况下,大多数浏览器会检查根目录中是否存在 favicon.ico 文件,而不指定上述代码,但最好指定它,以防浏览器不这样做。

目前,浏览器已经支持 .png 或 .gif 格式的图标,但建议继续使用 .ico 格式以与旧版浏览器兼容。

如何为 iPhone、iPad 和 Android 创建图标或网页剪辑
Apple 发明了一个规范来声明iPhone 的图标,后来他们在所有设备上 改进的 SiteGround 电子邮件营销工具 采用了该图标,并且 Android 从 2.1 版开始支持该图标。

 

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />

该图像必须是 57px x 57px .p​​ng。 iOS 设备会自动应用效果,使其 by 列表 看起来像按钮、圆角、应用阴影等。最后一种格式与 Android 设备不兼容,因此我不建议使用它。如果您不希望应用这些效果并支持Android,则必须将代码更改为以下内容:

在 <head> 部分中指定的代码如下:

<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon-precomposed.png” />

随着Apple设备分辨率的扩大,图标需要越来越大,以便它们能够在视网膜显示屏上正确显示并且看起来不像素化。为此,Apple 引入了先前代码的变体,其中指定了图标的大小,以便不同的设备可以选择最适合其屏幕分辨率的图标。Apple 的图标大小规范是通过“sizes”属性完成的。

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注