问题
方法1
在主目录中放置一个名为favicon.ico
的文件是一种方法。浏览器总是请求该文件。您可以在apache日志文件中看到这一点。
方法2
<head>
部分的HTML标记:
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
发布于 2014-09-22 00:34:29
有几种方法可以创建收藏夹图标。对你来说最好的方式取决于各种因素:
第一种方法:使用favicon生成器
如果你想又好又快地完成这项工作,你可以使用favicon generator。它为所有主要的桌面和手机浏览器创建图片和HTML代码。完全公开:我是这个网站的作者。
这种解决方案的优点:它速度快,并且已经为您解决了所有兼容性问题。
第二种方法:创建favicon.ico (仅限桌面浏览器)
按照您的建议,您可以创建一个包含16x16和32x32图片的favicon.ico
文件(请注意Microsoft recommends 16x16, 32x32 and 48x48。
然后,在HTML代码中声明它:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
此方法适用于所有桌面浏览器,无论是旧的还是新的。但是大多数移动浏览器都会忽略这个图标。
关于将favicon.ico
文件放在根目录而不是声明它的建议:请注意,尽管此技术适用于大多数浏览器,但它并不是100%可靠的。例如,Windows Safari找不到它(当然:这个浏览器在Windows上以某种方式被弃用,但您明白这一点)。此技术在与PNG图标结合使用时非常有用(对于现代浏览器)。
第三种方法:创建favicon.ico、PNG图标和Apple Touch图标(所有浏览器)
在你的问题中,你没有提到移动浏览器。他们中的大多数都会忽略favicon.ico
文件。尽管您的站点可能专用于桌面浏览器,但您可能不想完全忽略移动浏览器。
您可以与以下各项实现良好的兼容性:
用来声明它们
<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">
这不是完整的故事,但在大多数情况下已经足够好了。
发布于 2014-09-21 04:28:28
发布于 2018-05-15 08:13:25
我使用https://iconifier.net上传我的图片,下载图片压缩文件,添加图片到我的服务器,按照网站上的指示操作,包括添加链接到我的index.html,它工作了。我的收藏图标现在显示在我的iPhone在Safari当‘添加到主屏幕’
https://stackoverflow.com/questions/25952907
复制相似问题