如何在rails中添加多个favicon

时间:2016-06-24 00:51:28

标签: html ruby-on-rails favicon

我使用http://www.favicomatic.com/文件的其他一些版本,而不是单个favicon.ico,所以我可以将favicon作为.ico,.png以及移动和Windows版本。

Rails'使用

添加 favicon是一种非常简单的方法
favicon_link_tag 'myicon.ico'

但其他标题呢?

2 个答案:

答案 0 :(得分:3)

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")%>" />

这认为您的favicon资产位于rails应用程序中资产/图像内的目录中。

除了有人将您的网站添加为Windows应用程序之外,您的favicon还有Windows Tile元数据。所以请记住把你的App名称和原色。

答案 1 :(得分:1)

我建议您使用RealFaviconGenerator and its companion RoR plugin

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

完全披露:我是本网站的作者。