Создание apple-touch-icon с помощью Rails

Я пытаюсь добавить ссылку apple-touch-icon в мою голову приложения, чтобы она отображалась на закладках рабочего стола. Направляющие рельсов заявляют следующее:

Mobile Safari ищет другой тег ссылки, указывающий на изображение, которое будет использоваться, если вы добавите страницу на главный экран устройства iOS. Следующий вызов создаст такой тег:

favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
<link href="/assets/mb-icon.png" rel="apple-touch-icon" type="image/png" />

однако, когда я использую следующее (временные метки удалено):

<%= favicon_link_tag 'favicon.ico' %>
<%= favicon_link_tag 'apple-icon.jpeg', rel: 'apple-touch-icon', type:'image/jpeg' %>

он неправильно генерирует значок Apple touch (favicon работает так, как ожидалось). Он вставляет "изображения", а не" активы " в href. Сгенерированный код:

<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<link href="/images/apple-icon.jpeg" rel="apple-touch-icon" type="image/jpeg">

Я также попытался просто поместить ссылку прямо в файл приложения без использования TagHelper, но он не добавляет метку времени в файл, поэтому файл не является правильным.

9
favicon ios mobile-safari ruby-on-rails

2 ответов

во-первых, apple touch иконки должны быть в формате PNG, а не JPEG. Они также должны быть названы "apple-touch-icon".

Что касается проблемы, первым, но не идеальным решением является размещение значка apple в общедоступном каталоге и жесткий код ссылки.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

альтернативно на той же ноте вы можете добавить его / public / images, Чтобы сгенерированная ссылка была правильной.

Я подозреваю, однако, что плагин, такой как bootstrap, добавляет ссылку, как она видит поместиться. В случае, если вы используете bootstrap или что-то подобное, я бы искал HAML для "apple-touch-icon" и видел, что вы можете найти. Скорее всего, что-то вроде:

 %link{:href => "images/apple-touch-icon.png", :rel => "apple-touch-icon"}

Если вы найдете его, удалить его.

это в стороне от его потенциально rails, слишком умных и понимающих, что имя файла/тип файла неверны и добавляют ссылку.

1

Вы можете создать _favicon.формат html.Эрб со следующим содержимым:

<% %w(76 120 152 180).each do |size| %>
  <%= favicon_link_tag "apple-touch-icon-#{size}x#{size}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}" %>
<% end %>

<% %w(16 32).each do |size| %>
  <%= favicon_link_tag "favicon-#{size}x#{size}.png", rel: 'icon', type: 'image/png', sizes: "#{size}x#{size}" %>
<% end %>

включить его в свой приложение.формат html.Эрб:

<%= render 'favicon' %>

это создаст значки apple touch и фавиконы разных размеров (оптимизированные для разных устройств). Затем вы можете генерировать эти значки через один из многих веб-сайтов, таких как iconifier и поместите их в приложение / активы/изображения / каталог.

Это что я сделал и она работает очень хорошо для меня.

32