如何在Rails中添加多个图标

Question

我使用http://www.favicomatic.com/制作了该文件的其他一些版本，而不是使用单个favicon.ico，因此可以将其作为.ico，.png以及移动版本和Windows版本获得。

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

favicon_link_tag 'myicon.ico'

但是其他标头呢？

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文档 ：

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应用程序中资产/图像内的目录中。

如果有人将您的网站添加为Windows应用程序，则除了Windows图标外还有Windows Tile元数据。 因此，请记住也输入您的应用名称和原色。

Answer 2

我建议您使用RealFaviconGenerator及其配套的RoR插件 ：

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

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