3

我正在构建一个新的 Web 应用程序。

我已经准备好我的网站图标和苹果图标了。我想知道是否需要将它们包含在我的 HTML 文件的“头部”中 - 或者从.htaccess文件中路由它们是否可以接受？

HTML 代码：

<head>
  <link rel="shortcut icon" href="assets/ico/favicon.ico">
  <!-- Standard iPhone --> 
  <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
  <!-- Retina iPhone --> 
  <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
  <!-- Standard iPad --> 
  <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
  <!-- Retina iPad --> 
  <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
</head>

或者只是把它们放在htaccess中？

    # Rewrite for Favicons
RewriteRule ^favicon\.ico$ assets/ico/favicon.ico [L]
RewriteRule ^apple-touch-icon\.png$ assets/ico/apple-touch-icon.png [L]
RewriteRule ^apple-touch-icon-57x57\.png$ assets/ico/apple-touch-114-icon.png [L]
RewriteRule ^apple-touch-icon-114x114\.png$ assets/ico/apple-touch-icon-114.png [L]
RewriteRule ^apple-touch-icon-72x72\.png$ assets/ico/apple-touch-icon-144.png [L]
RewriteRule ^apple-touch-icon-144x144\.png$ assets/ico/apple-touch-icon-144.png [L]

问题：.htaccess将它们放在我的文件中并从我的 HTML 中删除它们有什么负面影响吗？

4

2 回答 2

7

如果您遵循 Apple 的命名约定，则不必指定它们。

来自苹果的文档：

如果没有使用链接元素指定图标，则会在网站根目录中搜索带有 apple-touch-icon... 或 apple-touch-icon-precomposed... 前缀的图标。例如，如果设备的适当图标大小为 57 x 57，则系统按以下顺序搜索文件名：

  • 苹果触摸图标 57x57-precomposed.png
  • 苹果触摸图标 57x57.png
  • 苹果触摸图标precomposed.png
  • 苹果触摸icon.png
于 2012-05-25T14:43:59.563 回答
4

由于您在任何地方都使用相同的文件，因此您可以使用：

RewriteRule ^apple-touch-icon\.png$ assets/ico/apple-touch-icon.png [L]
RewriteRule ^apple-touch-icon-[0-9].* assets/ico/apple-touch-114-icon.png [L]

此外，为什么不将 114x114 图标也发送到所有 iPhone？我经常做的只是创建一个 114x114 的图标并将其命名为 apple-touch-icon.png，并将其放在域的根目录中。这样视网膜得到 114px 和更老的只会将其调整为一半。唯一的缺点是你在 apache 错误日志中得到了一些 404，但谁在乎呢。

于 2012-05-25T19:21:25.887 回答