iPhone 的“添加到收藏夹”需要多大的图标大小？

编程问答 2022-05-13

问题描述

我正在关注 Apple 的 Safari Web Content Guide - Configuring Web Applications，它在大部分时间都按预期工作。但是当我想在 iPhone 上添加到收藏夹时，图标没有出现。是尺寸问题吗？或者我还应该怎么做才能显示收藏夹图标？谢谢

enter image description here

我的代码：

<head>
  <Meta charset="utf-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/x-icon/" href="{{ "/favicon.ico" | relative_url }}">
  <link rel="apple-touch-icon" href="{{ "/apple-touch-icon.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="76x76" href="{{ "/apple-touch-icon-76x76.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="120x120" href="{{ "/apple-touch-icon-120x120.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="152x152" href="{{ "/touch-icon-ipad.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="180x180" href="{{ "/touch-icon-iphone-retina.png" | relative_url }}">
  <link rel="apple-touch-icon" sizes="167x167" href="{{ "/touch-icon-ipad-retina.png" | relative_url }}">
  {%- SEO -%}
  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
  {%- Feed_Meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
    {%- include google-analytics.html -%}
  {%- endif -%}
  <!-- site css -->
  <link rel="stylesheet" href="{{'/assets/main.css' | prepend: site.baseurl}}">
  {% SEO %}
</head>

解决方法

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

根据 Apple 当前的指南，默认的触摸图标大小如下： enter image description here

,

我已经弄清楚了，它现在可以正确显示网站图标了。非常感谢@Charlie，提供图标检查器网站：https://realfavicongenerator.net/favicon_checker#.YIHdji1h0Ts

好像我搞砸了一些网站图标分辨率，所以它们导致了问题。

faviconfaviconhtmljekylljekylljekyllmobile-website