首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在网站上创建收藏夹图标的最佳实践是什么?

在网站上创建收藏夹图标的最佳实践是什么?
EN

Stack Overflow用户
提问于 2014-09-21 04:15:19
回答 4查看 167.7K关注 0票数 115

问题

  • 在网站上创建收藏图标的最佳实践是什么?
  • 是一个包含16x16和32x32图像的.ico文件,比仅包含16x16图像的.png文件E211要好?
  • 当前首选的正确方法不能在相当旧的浏览器中使用吗?

方法1

在主目录中放置一个名为favicon.ico的文件是一种方法。浏览器总是请求该文件。您可以在apache日志文件中看到这一点。

方法2

<head>部分的HTML标记:

代码语言:javascript
复制
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-09-22 00:34:29

有几种方法可以创建收藏夹图标。对你来说最好的方式取决于各种因素:

  • 您可以在此任务上花费的时间。对许多人来说,这是“越快越好”。
  • 你愿意付出的努力。例如,手动绘制16x16图标以获得更好的results.
  • Specific约束,例如支持具有奇怪规格的特定浏览器。

第一种方法:使用favicon生成器

如果你想又好又快地完成这项工作,你可以使用favicon generator。它为所有主要的桌面和手机浏览器创建图片和HTML代码。完全公开:我是这个网站的作者。

这种解决方案的优点:它速度快,并且已经为您解决了所有兼容性问题。

第二种方法:创建favicon.ico (仅限桌面浏览器)

按照您的建议,您可以创建一个包含16x16和32x32图片的favicon.ico文件(请注意Microsoft recommends 16x16, 32x32 and 48x48

然后,在HTML代码中声明它:

代码语言:javascript
复制
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

此方法适用于所有桌面浏览器,无论是旧的还是新的。但是大多数移动浏览器都会忽略这个图标。

关于将favicon.ico文件放在根目录而不是声明它的建议:请注意,尽管此技术适用于大多数浏览器,但它并不是100%可靠的。例如,Windows Safari找不到它(当然:这个浏览器在Windows上以某种方式被弃用,但您明白这一点)。此技术在与PNG图标结合使用时非常有用(对于现代浏览器)。

第三种方法:创建favicon.ico、PNG图标和Apple Touch图标(所有浏览器)

在你的问题中,你没有提到移动浏览器。他们中的大多数都会忽略favicon.ico文件。尽管您的站点可能专用于桌面浏览器,但您可能不想完全忽略移动浏览器。

您可以与以下各项实现良好的兼容性:

  • A 192x192 PNG图标适用于安卓Chrome

  • A 180x180苹果触控图标(适用于iPhone 6Plus;其他设备将根据需要缩小)。

用来声明它们

代码语言:javascript
复制
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

这不是完整的故事,但在大多数情况下已经足够好了。

票数 171
EN

Stack Overflow用户

发布于 2014-09-21 04:28:28

  1. 你可以使用这个网站生成favin.ico
  2. I,建议使用.ico格式,因为png不能使用方法1,可以有更多细节!
    1. 这两种方法都适用于所有浏览器,但是当它自动工作时,你想为它键入代码吗?所以我认为方法1更好。
票数 2
EN

Stack Overflow用户

发布于 2018-05-15 08:13:25

我使用https://iconifier.net上传我的图片,下载图片压缩文件,添加图片到我的服务器,按照网站上的指示操作,包括添加链接到我的index.html,它工作了。我的收藏图标现在显示在我的iPhone在Safari当‘添加到主屏幕’

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25952907

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档