Что такое apple touch icon precomposed

УДАЛЁНКА.РУ

Компьютерная помощь на расстоянии!

Что за apple-touch-icon-precomposed.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 нужно разместить в корневой папке сайта
• Если вы хотите указать значок для одной веб-страницы или заменить значок веб-сайта с веб-страницы конкретной иконкой, добавьте элемент ссылки на веб-страницу:
• В приведенном выше примере, замените custom_icon.png файлом иконки.
• Чтобы указать несколько значков для устройств с разным разрешением, например, для поддержки устройств iPhone и iPad, нужно добавить атрибут sizes к каждому элементу link следующим образом:
• Наиболее подходящим для устройства, если не указан sizes, является размер элемента до 60 х 60.

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

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

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

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

Источник

Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Apple Touch Icon

Иконка сайта в iOS на экране закладок и домашнем экране.

Иконки разных размеров указываются атрибутом sizes :

Apple Touch Icon Precomposed

Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

Mask Icon

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .

Apple-Mobile-Web-App-Title

При добавлении сайта на домашний экран в iOS задает имя иконки.

Apple-Mobile-Web-App-Capable

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

Apple-Mobile-Web-App-Status-Bar-Style

Задает стиль панели состояния при полноэкранном режиме.

Может иметь следующее значение:

default	Белый фон
black	Черный фон
black-translucent	Прозрачный фон и белый цвет иконок и шрифтов

default

black

black-translucent

Apple-Itunes-App

В iOS Safari выводит баннер с приложением в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

Format-Detection

В iOS запрещает распознавать номера телефонов и адреса.

Источник

apple-touch-icon.png и apple-touch-icon-precomposed.png: иконки и 404-я ошибка

Заметил что на хостинге, в логах сервера часто встречается 404-я ошибка при попытке получить файлы apple-touch-icon.png или apple-touch-icon-precomposed.png из корня сайта.

Виноватыми оказались apple-устройства, при посещении какого-либо сайта они обращаются к этим файлам. Возникает закономерный вопрос «Что это за файлы и зачем они нужны?»

Что такое apple-touch-icon или Web Clips

Пользователи IOS и android могут на свой рабочий стол добавлять ярлыки-иконки для сайтов, они называются Web Clips. Файлы apple-touch-icon.png и apple-touch-icon-precomposed.png как раз и предназначены для этих иконок. То есть если вы у себя на телефоне захотите добавить на главный ярлык для моего сайта, то иконка этого ярлыка будет браться из этих файлов. Если же файла нет, то android возьмет иконку из файла favicon.ico, а IOS просто сделает иконку в виде скриншота видимой на данный момент части сайта.

На android устройствах такие ярлыки добавляются так: в браузере открываете нужный сайт — кнопка меню — Добавить закладку — в поле «Добавить в» выбираем «Главный экран» и жмем ОК. Попробуйте добавить мой сайт =)

У меня apple-touch-icon выглядит вот так:

А на телефоне вот так:

Android обращается к файлу apple-touch-icon только в тот, момент, когда Вы пытаетесь добавить сайт в закладки на главный экран. А вот apple-устройства пытаются обратиться при каждом посещении страницы. При отсутствии файлов apple-touch-icon.png это влечет генерацию 404-й ошибки. Если ваш сайт более-менее посещаем, то такая ошибка будет генерироваться достаточно часто, чтобы увидеть это в отчетах о нагрузке сервера. Ведь генерация 404-й страницы создает большую нагрузку для сервера хостинга, чем просто процесс отдачи изображения.

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

Как сгенерировать apple-touch-icon

Мобильные устройства могут иметь разные размеры экранов, а значит и сами иконки могут быть разных размеров. Вот например тут в ряду «Web clip icon (recommended for web apps and websites)» можно посмотреть какие иконки нужны для ios-устройств:

Я попытался выяснить какие именно размеры иконок стоит сгенерировать, но увидел что мнения различных блогеров слишком сильно разбегаются. Потому проанализировал логи и остановился на размерах 57×57, 76×76, 114х114, 120×120, 152×152. Если же в логах замечу что будут запрашиваться еще какие-то разрешения, то и для них создам иконку.

Для генерации иконок можно использовать один из множества сервисов «apple-touch-icon generator». Мне понравился вот этот: gieson.com/Library/projects/utilities/icon_slayer :

• Находим подходящую иконку в хорошем качестве
• Загружаем на сайт через кнопку Load Image
• Указываем эффекты (градиент, блики)
• Указываем (по желанию) дополнительные разрешения: ставим галочку возле custom и через пробел печатаем необходимые разрешения
• Жмем кнопку Export Icons

На моем примере у меня имена файлов должны быть следующие:

• apple-touch-icon-152×152-precomposed.png
• apple-touch-icon-152×152.png
• apple-touch-icon-120×120-precomposed.png
• apple-touch-icon-120×120.png
• apple-touch-icon-76×76-precomposed.png
• apple-touch-icon-76×76.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Чаще всего рекомендуют под именами apple-touch-icon-precomposed.png и apple-touch-icon.png хранить иконки с разрешением 57×57 пикселей.

Отличия apple-touch-icon и apple-touch-icon-precomposed

apple-touch-icon-precomposed — иконки с заранее наложенными эффектами в стиле iOS с закругленными углами и тд. и тп.

apple-touch-icon — иконки без эффектов, мобильное устройство само наложит на эту иконку свои эффекты.

При посещении страницы иконки запрашиваются в следующем порядке:

• apple-touch-icon-120×120-precomposed.png — иконка с наиболее подходящим разрешением и наложенными эффектами
• apple-touch-icon-120×120.png — если нет предыдущей, то иконка с наиболее подходящим разрешением, но без эффектов
• apple-touch-icon-precomposed.png — если нет предыдущей, то иконка с наложенными эффектами
• apple-touch-icon.png — если нет предыдущей, то иконка без эффектов

Как установить на сайт иконки apple-touch-icon

Тут ничего сложного нет: их нужно загрузить в корень сайта. Самый легкий вариант, если лень генерировать иконки различных размеров, это загрузить одну иконку с именем apple-touch-icon.png, тогда Web Clips будут красиво отображаться. Но это нас не избавит от лишних 404-х ошибок, ведь устройства сначала пытаются получить файлы с нужным им разрешением.

Часто советуют еще прописать в заголовке теги такого вида:

Но я считаю это лишним. Ведь все будет работать и без этого. Зачем принудительно к странице подключать лишние файлы, если на устройстве пользователя они могут не понадобится (например на ноутбуке)? Лучше дать устройству самому решать что ему загружать.

Источник

Какие нужны фавиконки

30 августа 2017

Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!

Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.

Но ICO признали все браузеры и научились подключать его не только из корня сайта, но и из произвольного места. Если указать в голове документа
, то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.

При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.

Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.

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

В HTML5 появилось расширенное описание
: добавился атрибут sizes , чтобы указывать размеры, и атрибут type , чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes . Если иконка векторная — да, так тоже можно — укажите размер any . Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.

Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.

Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью
на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.

А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью
для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.

Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.

Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.

Этого вам должно хватить, чтобы было красиво в основных современных браузерах. Но если нужно упороться по мелочам и сделать вот прямо идеально на каждой платформе — мои соболезнования и читайте документацию в описании к видео. Есть ещё сносный онлайновый генератор иконок, но я бы не доверил ему генерировать графику — будет мыльно. А вот код позаимствовать можно.

Ну что, чуда не произошло и всё по-старому: мусор в шапке, мусор в корне? Знаете, нет, я верю, что со временем веб-манифест наведёт порядок, поэтому подключайте его уже сегодня. Вот выбросим мусор и заживём!

Источник