Значок Apple Touch для веб-сайтов

86

До сих пор я вставлял в голове строку для значка Apple Touch следующим образом:

<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">

Однако в разделе вопросов и ответов «Каковы правильные размеры в пикселях для сенсорного значка яблока?» в принятом ответе указано, что в соответствии с рекомендациями Apple теперь необходимы три изображения.

Так как же вставить их в заголовок кода?

html  mobile  apple-touch-icon 
— J82
источник

Ответы:

91

Минималистское решение - рекомендуется

Распространенной практикой является создание одного значка 180x180, что является самым высоким ожидаемым разрешением, и разрешение устройствам iOS масштабировать его по мере необходимости. Он заявлен с помощью:

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

Исчерпывающее решение - не рекомендуется

В спецификациях Apple указаны новые размеры для iOS7:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

А также для iOS8 :

  • 180x180

Кроме того, предварительно составленные значки устарели.

Как следствие, для поддержки как новых устройств (под управлением iOS7), так и более старых (iOS6 и более ранних версий) общий код:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

Кроме того, вы должны создать изображение размером 180x180 с именем apple-touch-icon.png. .

Обратите внимание, что iOS ищет URL как /apple-touch-icon-76x76.png, если не находит интересных вещей в HTML-коде (что-то вроде того, что делает IE /favicon.ico). Поэтому важно сохранить имена файлов, указанные выше. Также важно учитывать, что Android / Chrome также использует эти изображения .

Возможно, вы захотите узнать, что этот генератор значков может создавать все эти изображения одновременно. Полное раскрытие: я являюсь автором этого сайта.

— philippe_b
источник
2
Все ли файлы в каждом <link>теге загружаются, если их нет в кеше клиента? Независимо от того, где запрашивается страница (телефон, планшет, компьютер, windows, android ...)? Меня немного беспокоят последствия для производительности ...
— RayOnAir
1
В iOS8 также есть новое разрешение 180x180. Вам также не обязательно ссылаться на значки из HTML - если вам не нужны конкретные значки только для одной конкретной страницы. У Apple есть недавний список того, какие размеры им нравятся: developer.apple.com/library/ios/documentation/UserExperience/… . Найдите в таблице запись «Значок веб-клипа».
— qingu
1
Мне кажется ненужным добавление такого количества данных в заголовок каждой страницы - если значок не большой в версии 180x180 (у меня обычно от 2 до 5 КБ), то достаточно просто иметь <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />. И даже если вы создаете изображения разного размера, насколько я могу судить, вы можете просто удалить все ссылки на значок яблока, и iOS сама будет искать файлы, начиная с предпочтительного размера (например, apple-touch-icon-180x180. png) и использовать apple-touch-icon.png, если другие файлы не найдены.
— iquito
1
@iquito Правильно, вы можете использовать только одно объявление. Как основатель RealFaviconGenerator, я работаю над универсальным решением, подходящим для всех. Есть возможная загвоздка, хотя iOS делает хорошую работу: iOS использует алгоритм, похожий на алгоритм Митчелла, для уменьшения масштаба значков. В зависимости от вашего конкретного дизайна это может быть не то, что вам нужно. Я обновлю свой ответ, когда у меня будет больше отзывов по этому поводу.
— philippe_b
2
Между прочим, RealFaviconGenerator действительно хорош, единственное, что я подумал, может быть лучше, - это множество ссылок в заголовках, которые не являются строго необходимыми - как при создании новых значков, так и при проверке работы веб-сайта. Возможно, в качестве дальнейшего улучшения веб-сайт мог бы показать разные возможности - какие части строго полезны (и что они делают / дополнительные объяснения), а какие части могут быть опущены и обычно автоматически обнаруживаются браузером (насколько я знаю iOS также ищет определенные размеры в корневом каталоге, если на странице нет информации apple-touch-icon).
— iquito
70

Вот и все, надеюсь, это поможет.

Если вы хотите, чтобы Apple сделала за вас эстетику (добавила блеск), вы должны добавить их в <head>теги:

<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />

Если вы хотите предварительно скомпоновать изображение, чтобы Apple отображала его без глянца, сделайте следующее:

<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />

Если вы добавите более одного изображения, устройство iOS будет искать нужный размер и автоматически использовать это изображение. Как видно из названий изображений в примере, iPad с дисплеем Retina требуется значок размером 144x144 пикселей, iPhone 4 / 4S / 5 нуждается в значке размером 114x114 пикселей, оригинальному iPad (и iPad 2, как разрешение экрана не отличается) требуется значок 72x72 пикселей, а исходный iPhone не требует указания размера, но для справки это 57x57 пикселей.

— Чарльз Кук
источник
Почему precomposed означает без блеска? Я не могу дать определение заранее составленной шутки «без блеска». И нет, я не саркастичен, я действительно хочу знать.
— boatcoder
@ Mark0978 Я прочитал это так: «он уже составлен, то есть« в стиле iOS »(вами), поэтому iOS не будет с ним связываться (кроме скругления углов)»
— Майкл Харен
5
Это устарело в iOS 7.
— bjb568
Возможно ли иметь только одно изображение и позволить Apple автоматически изменять его размер на своей стороне?
— Аарон Франке
12

Поскольку некоторые из этих ответов уже устарели, я рекомендую использовать http://realfavicongenerator.net/ для создания всех изображений и разметки - я жертвую пару евро каждый раз, когда использую его, в надежде, что это позволит им сохранить в курсе того, что в настоящее время действует для iOS, Android и Windows, поэтому мне не нужно.

— Тим Айлс
источник
3
(Я только что заметил, что один из других ответов здесь от автора realfavicongenerator.net - пожалуйста, проголосуйте за его ответ, а не за мой!)
— Тим Айлс
3
Поддержите этого разработчика, потому что этот сайт идеален
— whiteshooz
Тим + @whiteshooz: Спасибо за вашу поддержку! (да, я только что заметил ваши комментарии)
— philippe_b
7

По состоянию на 2018 год веб-сайт разработчиков Apple рекомендует для устройств iOS следующее:

  <link rel="apple-touch-icon" href="touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
  <link rel="apple-touch-startup-image" href="/launch.png">
  <meta name="apple-mobile-web-app-title" content="AppTitle">

Название приложения заменит название вашего сайта. Обычно вы этого хотите. Изображение при запуске - это то, что будет отображаться при запуске приложения.

— Педро Феррари
источник
6

Указание значка веб-страницы для веб-клипа

Вы можете захотеть, чтобы пользователи могли добавлять ваше веб-приложение или ссылку на веб-страницу на главный экран. Эти ссылки, обозначенные значком, называются веб-подборками. Выполните следующие простые шаги, чтобы указать значок для представления вашего веб-приложения или веб-страницы на iOS.

Чтобы указать значок для всего веб-сайта (каждой страницы на веб-сайте), поместите файл значка в формате PNG в корневую папку документа с именем apple-touch-icon.png.

Чтобы указать значок для отдельной веб-страницы или заменить значок веб-сайта на значок для конкретной веб-страницы, добавьте элемент ссылки на веб-страницу, как в:

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

В приведенном выше примере замените custom_icon.png своим именем файла значка. Чтобы указать несколько значков для разных разрешений устройства - например, для поддержки устройств iPhone и iPad - добавьте атрибут размеров к каждому элементу ссылки следующим образом:

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

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Используется значок, наиболее подходящий для устройства. Если атрибут sizes не установлен, размер элемента по умолчанию равен 60 x 60. Если нет значка, соответствующего рекомендуемому размеру для устройства, используется наименьший значок, превышающий рекомендуемый размер. Если нет значков большего размера, чем рекомендованный, используется самый большой значок.

Если с помощью элемента ссылки не указаны значки, в корневом каталоге веб-сайта выполняется поиск значков с префиксом apple-touch-icon .... Например, если соответствующий размер значка для устройства составляет 60 x 60, система ищет имена файлов в следующем порядке:

apple-touch-icon-76x76.png

apple-touch-icon.png

См. Раздел «Размеры значков и изображений» для получения информации о показателях значков веб-страниц.

Примечание . Safari в iOS 7 не добавляет эффекты к значкам. Более старые версии Safari не будут добавлять эффекты для файлов значков с суффиксом -precomposed.png. Подробности см. В разделе «Первые шаги: идентификация приложения в iTunes Connect».

Источник: характеристики значков Apple Touch

привет, вы знаете, где я могу скачать эти изображения значков png?
— BKSpurgeon
2

Должен признать, я никогда не читал никаких спецификаций Apple, но, согласно журналам на моем сайте, эти изображения требуются в корневом каталоге:

apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png

apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
— Томаш Зато - Восстановить Монику
источник
2

Из моего запроса на перенос на https://github.com/h5bp/mobile-boilerplate (со значками iPhone 6):

<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

<!--
    Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
    If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
— Пиналь
источник
0

Вы можете использовать omg-img для генерации всех размеров и цветов для популярных иконок. Например:

<link rel="apple-touch-icon" sizes="152x152" 
      href="https://img.icons8.com/color/152x152/anonymous-mask.png">

Этот тег возвращает следующее изображение для устройств iOS:

введите описание изображения здесь

— Хорев Иван
источник
— Хорев Иван
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.