And*_*ndy 10 favicon ruby-on-rails-4
我的问题只是在使用favicon_link_tag和多个尺寸选项时不显示的图标.
<%= favicon_link_tag 'favicon.ico', sizes: '16x16 32x32' %>
该文件被标记favicon-16.ico,并favicon-32.ico分别.这些图像位于app/assets/images文件夹中.我把他们贴错了吗？这是一个限制吗？
phi*_*e_b 11
解决方案不在于Rails魔术,而在于你管理favicon.ico文件的方式.单个ICO文件可以包含多个图片.这是Web浏览器所期望的.特别是,favicon.ico应该包含相同图标的三个版本:16x16,32x32和48x48.关于sizes属性,它是在HTML5中引入的,专用于PNG图标.没有favicon.ico.
代码
基本定义就足够了:
favicon_link_tag '/path/to/favicon.ico'
确保路径一致app/assets/images,我必须承认我不知道它的映射位置.
图片
你可以先准备三张PNG图片(我们姑且称之为16x16.png,32x32.png和48x48.png),并用工具,如将它们合并icotool(在Ubuntu: sudo apt-get install icoutils):
icotool -c -o favicon.ico 16x16.png 32x32.png 48x48.png
如果您不想打扰icotool并且手头没有任何其他解决方案,您也可以使用此favicon生成器.favicon.ico如果您不感兴趣,请保留生成并离开其余部分.完全披露:我是这个网站的作者.
一个想法是使用发布的链接 philippe_b来生成各种图像.将它们放在app/assets/images /
然后,在application.html.erb中,在应用程序的<head> </head>标记之间放置以下代码:
<% %w(57 60 72 76 114 120 144 152 180).each do |s| %>
<%= favicon_link_tag "apple-touch-icon-#{s}x#{s}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{s}x#{s}" %>
<% end %>
<% %w(16 32).each do |s| %>
<%= favicon_link_tag "favicon-#{s}x#{s}.png", rel: 'icon', type: 'image/png', sizes: "#{s}x#{s}" %>
<% end %>
这将允许您使用预编译的资产,app/assets/images/而无需将其放入app/public/
请注意,我这里没有处理Android或Windows图像,只有基本的图标和苹果触摸图像.有关建议的苹果触摸图标大小的更多信息,请访问此网站.