我用 http://www.favicomatic.com/ 制作的不是单个 favicon.ico该文件的一些其他版本,因此我可以获得 .ico、.png 以及移动和 Windows 版本的图标。
Rails 有一种非常简单的方法来添加 图标,使用
favicon_link_tag 'myicon.ico'
但是其他标题呢?
最佳答案
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=" "/>
<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")%>" />
这认为您的图标 Assets 位于 rails 应用程序的 Assets /图像内的目录中。
您的网站图标之外还有 Windows Tile 元数据,以防有人将您的网站添加为 Windows 应用程序。因此,请记住同时输入您的 App 名称和原色。
关于html - 如何在 rails 中添加多个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38004087/