如何在 rails 中添加多个网站图标

Question

我用 http://www.favicomatic.com/ 文件的一些其他版本代替了单个 favicon.ico，所以我可以获得 .ico、.png 和移动版的图标以及 windows 版本也是如此。

Rails' 有一个非常简单的方法来添加图标使用

favicon_link_tag 'myicon.ico'

但是另一个 headers 呢？

Answer 1

Favicomatic 提供了一个 HTML 链接外观模板

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />

所以我们必须以类似的方式结束，所以 favicon_link_tag 必须重载。以下 favicon_link_tag documentation:

favicon_link_tag 'apple-touch-icon-57x57.png', rel: 'apple-touch-icon', type: 'image/png'

将两者混合我们得到这样的结果：

<%= favicon_link_tag 'favicon/favicon.ico' %>

<% [57,72,60,76].each do |size| %>
  <%= favicon_link_tag "favicon/apple-touch-icon-#{size}x#{size}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}" %>
  <%= favicon_link_tag "favicon/apple-touch-icon-#{size * 2}x#{size * 2}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size * 2}x#{size * 2}" %>
<% end %>

<% [16,32,96,196].each do |size| %>
  <%= favicon_link_tag "favicon/favicon-#{size}x#{size}.png", type: 'image/png', sizes: "#{size}x#{size}" %>
<% end %>

<%= favicon_link_tag "favicon/favicon-128.png", type: 'image/png', sizes: "128x128" %>

<meta name="application-name" content="My App"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />

<% [70,150,310].each do |size| %>
  <meta name="<%= "msapplication-square#{size}x#{size}logo"%>" content="<%= asset_path("favicon/mstile-#{size}x#{size}.png")%>" />
<% end %>
<meta name="msapplication-wide310x150logo" content="<%= asset_path("favicon/mstile-310x150.png")%>" />
<meta name="msapplication-TileImage" content="<%= asset_path("favicon/mstile-144x144.png")%>" />

这认为您的网站图标资产位于 rails 应用程序 assets/images 内的目录中。

您的网站图标之外还有 Windows 磁贴元数据，以防有人将您的网站添加为 Windows 应用程序。所以记得把你的应用名称和原色也写上。

Answer 2

我建议你使用RealFaviconGenerator and its companion RoR plugin:

您将获得在 RoR 项目中安装网站图标的分步说明（而不是获得通用说明，您需要适应 RoR）。
您不必处理实际的标记，它们会随着时间的推移而演变（当出现新平台或优化标记时）。
您利用所有资源的资产管道，包括支持文件，例如 Web 应用程序清单（由 Android Chrome 使用）或 browserconfig.xml（用于 IE） .
您将获得对所有平台的支持，包括 Mac OS X El Capitan 上（相当）最近的 Safari 掩码图标。

完全披露：我是该网站的作者。

如何在 rails 中添加多个网站图标

How to add multiple favicons in rails

html

ruby-on-rails

favicon