Что за apple-touch-icon-precomposed.png и зачем apple-touch-icon.png ?

Зачем  apple-touch-icon.png ?

Зачем apple-touch-icon.png

Как и все – нашел кучу сообщений в логах сайта о том что нет такого файла:  apple-touch-icon-precomposed.png и  apple-touch-icon.png   Оказалось это iOS хочет показать иконку для сайта и пытается ее найти в корневом директории на хостинге в разных вариантах имени файла:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-57×57.png
  •  apple-touch-icon-precomposed . png 
  • apple-touch-icon.png

Что же, сделаем ее самостоятельно.

У вас должен получиться целый архив со всевозможными форматами иконок. Итак создаем значок. Чтобы указать значок для всего веб-сайта, нужно поместить созданный файл значка в формате png в корень сайта под названием apple-touch-icon.png. Я подстраховался и положил копии значка в корень сайта с названиями apple-touch-icon-precomposed.png  и apple-touch-icon.png

  • Значок в формате PNG с именем apple-touch-icon.png нужно разместить в корневой папке сайта
  • Если вы хотите указать значок для одной веб-страницы или заменить значок веб-сайта с веб-страницы конкретной иконкой, добавьте элемент ссылки на веб-страницу:
    <link rel=”apple-touch-icon” href=”/custom_icon.png”>
    В приведенном выше примере, замените custom_icon.png файлом иконки.
  • Чтобы указать несколько значков для устройств с разным разрешением, например, для поддержки устройств iPhone и iPad, нужно добавить атрибут sizes к каждому элементу link следующим образом:
    <link rel=”apple-touch-icon” href=”/touch-icon-iphone.png”>
    <link rel=”apple-touch-icon” sizes=”76×76″ href=”/touch-icon-ipad.png”>
    <link rel=”apple-touch-icon” sizes=”120×120″ href=”/touch-icon-iphone-retina.png”>
    <link rel=”apple-touch-icon” sizes=”152×152″ href=”/touch-icon-ipad-retina.png”>
  • Наиболее подходящим для устройства, если не указан sizes, является размер элемента до 60 х 60.

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

В случае если иконка должна лежать в другом месте (например в специальной папке) то необходимо добавить тег следующего вида, например:

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

 

Желающим подробнее вникнуть в тему, могу предложить статью на английском языке: https://mathiasbynens.be/notes/touch-icons

Пример тегов в странице сайта )какой то сайт попался под руку 🙂 ):

<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
		<meta name="MobileOptimized" content="240"/>
		<meta name="HandheldFriendly" content="true"/>

		<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
		<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
		<link rel="icon" type="image/png" href="/favicon/favicon-194x194.png" sizes="194x194">
		<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
		<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
		<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#ef5a24">
		<link rel="manifest" href="/favicon/manifest.json">
		<link rel="shortcut icon" href="/favicon/favicon.ico">
		<meta name="apple-mobile-web-app-title" content="VideoClub">
		<meta name="application-name" content="VideoClub">
		<meta name="msapplication-TileColor" content="#da532c">
		<meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
		<meta name="msapplication-config" content="/favicon/browserconfig.xml">
		<meta name="theme-color" content="#022441">

		<style id="page-height">body, #page, #background-color, #background-dots{min-height: 100vh;}</style>

 

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)

Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *