Как использовать несколько значений favicon.ico с помощником favicon_link_tag в рельсах 4

Моя проблема - это просто значок, который не отображается при использовании параметра favicon_link_tag и нескольких размеров.

Файлы были помечены как favicon-16.ico и favicon-32.ico соответственно. Эти изображения находятся в папке app/assets/images. Я помечен им неправильно? Это ограничение?

Ответы

Ответ 1

Решение не лежит в макете Rails, а в том, как вы управляете файлом favicon.ico. Один файл ICO может содержать несколько изображений. Это то, что ожидают веб-браузеры. В частности, 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 и оставите все остальное, если вас это не интересует. Полное раскрытие: я автор этого сайта.

Ответ 2

Одна идея заключалась бы в использовании link 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 здесь, только основные изображения иконки и apple touch. Для получения дополнительной информации о предлагаемых размерах значков Apple touch, проверьте этот сайт.