Просматривая лог ошибок сервера, вы можете обнаружить записи примерно следующего содержания:
File does not exist: .../public_html/apple-touch-icon-precomposed.png
File does not exist: .../public_html/apple-touch-icon.png
Это значит, что при входе пользователя на ваш сайт были затребованы, но не найдены две картинки в формате png (код ошибки 404). Обратите внимание на то, что сначала запрашивается картинка apple-touch-icon-precomposed.png, а затем – apple-touch-icon.png. Почему я на этом факте акцентирую внимание, объясню позже, а сначала давайте разберемся, что это за картинки.
Что такое apple-touch-icon.png
Apple-touch-icon.png – это миниатюрная иконка, которая должна представлять ваш сайта или веб-страницу. Предназначена она для пользователей, заходящих на сайт с устройств с мобильной операционной системой (iOS). Для чего нужна эта иконка?
Подобно тому, как пользователи настольных компьютеров могут создавать в браузере закладки на любые веб-страницы, пользователи iPhone или IPad с помощью функции Web Clip могут сохранять на своих устройствах ссылки на избранные сайты в виде значков. Эти ссылки, представленные иконками, называются веб-клипами.
Ярлык на ваш сайт на экране девайса – это мощный инструмент, для того, чтобы о вас помнили. Поэтому думаю, стоит приложить немного усилий и потратить немного времени на создание значка. А что будет, если вы этого не сделаете?
Вот что происходит, когда пользователь кликает по кнопке, для добавления иконки вашего сайта на экран своего устройства. Девайс начинает искать в корне сайта иконку с именем apple-touch-icon-precomposed.png. Если не находит, ищет apple-touch-icon.png. Чем отличаются две эти картинки?
Дело в названии картинок. Если вы назовете иконку сайта apple-touch-icon.png, девайс применит к ней стандартные эффекты свойственные иконкам Apple – добавит блики, тени, скруглит углы. Если вы не хотите, чтобы к иконке вашего сайта применялись эффекты, назовите ее apple-touch-icon-precomposed.png.
Если девайс не найдет ни apple-touch-icon-precomposed.png, ни apple-touch-icon.png, то сенсорный Ipod, iPhone или IPad сохранит скриншот в качестве значка. А это значит, что ярлык на ваш сайт будет безликим, лог будет пополняться новыми предупреждениями об ошибках, лишние запросы будут нагружать сервер.
Как создать apple-touch-icon.png
На сайте разработчиков IOS 7 Apple довольно подробно описаны требования к иконкам и рекомендации по их размещению на сайте (в вольном переводе автора статьи).
- Значок в формате PNG с именем apple-touch-icon.png нужно разместить в корневой папке сайта
- Если вы хотите указать значок для одной веб-страницы или заменить значок веб-сайта с веб-страницы конкретной иконкой, добавьте элемент ссылки на веб-страницу:
В приведенном выше примере, замените custom_icon.png файлом иконки. - Чтобы указать несколько значков для устройств с разным разрешением, например, для поддержки устройств iPhone и iPad, нужно добавить атрибут sizes к каждому элементу link следующим образом:
- Наиболее подходящим для устройства, если не указан sizes, является размер элемента до 60 х 60.
Если на сайте нет значка, размер которого бы соответствовал рекомендуемому для устройства, будет использован самый маленький значок из тех, что больше рекомендуемого размера. Если размер значков не превышает рекомендуемый, будет использоваться самый большой значок.
Если ваш веб-контент отличается особым образом, например, узнаваемой цветовой гаммой, есть смысл включить его в иконку. Для того, чтобы ваша иконка отображалась на устройстве должным образом, следуйте рекомендациям, приведенным в этой таблице.
Многие веб-мастера высказывают недовольства по поводу того, что Apple усложняет работу веб-мастера. Может быть и так, но большой проблемы здесь не вижу. Мониторинг некоторых известных веб-ресурсов на наличие в корне сайта apple-touch-icon показал следующее: у Apple - размер иконки 152х152 px, у Яндекса - 57х57 px, у Одноклассников - 129х129 px, у Facebook - 57х57 px, вКонтакте и у Гугла apple-touch-icon не обнаружены.
Ну и в заключение, вы можете создать иконку для своего сайта любого размера с эффектом и без, с помощью онлайн генератора пройдя по этой ссылке .
Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.
Наверное, вы уже что-то слышали о формате ICO и иконке для сайта favicon , но ничто не стоит на месте и постоянно появляется что-то новое. Эту статью я решил написать, чтобы не только обобщить известные всем вещи, но и дополнить их новинками.
Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных) , стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.
- Формат ICO
- Файл favicon.ico
- BugFix для Internet Explorer
- Фавикон в HTML5
- Фавикон для Apple
- Фавикон для Android
- Адрес файла favicon.ico
Формат ICO
А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP . Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.
Файл favicon.ico
Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav - сокращённо от favorite - избранное, а icon - значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:
Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык ) и icon (с англ. иконка ). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon .
image/vnd.microsoft.icon vs image/x-icon?
Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon . Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon .
BugFix для Internet Explorer
Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:
Другие графические форматы фавикон
Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF , их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5) , а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.
Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:
Обращаю внимание на то, что для APNG использует MIME-тип video/png , а для GIF (даже анимированного) - image/gif . Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml .
Фавикон в HTML5
Теперь, что касается формата favicon в HTML5 , подробней читайте . Интересным здесь является атрибут sizes , который задаёт размер иконок для визуально отображения в формате:
{ширина1} x{высота1} [{ширинаN} x{высотаN} ] | any
Другими словами, можно перечислить соответствующие размеры через пробел или указать значение any (для всех) . В документации HTML5 приводится такой пример:
Favicon.ico для мобильных браузеров
Проблема в том, что на данный момент атрибут sizes не поддерживается ни одним из популярных браузеров. Несколько иначе обстоит дело с мобильными браузерами.
Фавикон для Apple
Если атрибут sizes не указан, используется значение по умолчанию 57x57 .
Примечательно и то, что как favicon.ico служит автоматически распознаваемой иконкой для сайта, без указания связи, так и следующие имена будут распознаны автоматически:
- apple-touch-icon-57×57.png
- apple-touch-icon-72×72.png
- apple-touch-icon-114×114.png
- apple-touch-icon-144×144.png
Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов , используйте ключевое слово precomposed , например:
Здесь тоже имеется набор автоматически распознаваемых имён:
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-72×72-precomposed.png
- apple-touch-icon-114×114-precomposed.png
- apple-touch-icon-144×144-precomposed.png
Фавикон для Android
Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:
Адрес файла favicon.ico
Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:
или использовать относительный путь.
Как установить фавикон иконку на сайт?
Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт , у меня он получился таким:
Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57x57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed - отключит эффекты браузера) . Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь , начиная от корня сайта (/ - в начале адреса) , но для IE, наверное, лучше будет использовать абсолютный путь.
На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. - пишите. Спасибо за внимание. Удачи!
Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.
Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.
iOS Размеры иконки
Различные устройства Apple имеют различные разрешения, что означает необходимость создавать разные размеры иконок. Идеально для каждого разрешения адаптировать иконку.
Как Вы возможно заметили, что retina иконки в 2 раза больше предыдущих разрешений. Это из-за того, что retina экраны имеют двойную плотность пикселей. То есть для заполнения того же пространства 57х57рх нужно отрисовать 114х114рх.
Совет: помните, что чем меньше иконка, тем меньше деталей необходимо отрисовать, т.к. их будет видно хуже.
Установка иконок
Если уже устанавливали иконки для сайта, то знаете что это элементарно. просто добавить одну строчку кода в заголовок HTML с ссылками на.ico или.png картинки.
Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.
Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.
Специальные эффекты
Надеюсь, Вы в курсе, что все iOS иконки имеют закруглённые края, небольшую тень и блики. Это делается Apple автоматически, не стоит беспокоится и добавлять это самостоятельно. Делайте иконки квадратными
Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:
Android и остальные устройства
Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android и Blackberry, а так же всех остальных.
Design tips
Несколько моментов, которые следует держать в голове, когда придумываете favicons. Во-первых, Apple всегда самостоятельно добавляет определённые эффекты самостоятельно: тени, скруглённые края и глянец. Советую при разработке учитывать это и анализировать как иконка будет выглядеть с такими эффектами.
Так как прийдётся делать иконки в разных размерах, то отрисовывайте их в векторе — будет значительно проще экспортировать в разные размеры. Начинайте работу с большего размера — проще уменьшать размер, чем увеличивать.
Иконки для вдохновления
Вот пример различных крутых иконок, которые я нашёл на Dribbble. Надеюсь они вдохновят на крутой креатив.
Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.
Это не типичная flat иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.
Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.
Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.
Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!
Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:
Первым делом , нам необходимо создать нужную иконку в формате.png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.
Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства.
Второе , необходимо сделать иконки разных размеров для разных устройств:
для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:
- 60х60 - IPhone
- 76x76 -iPad
- 120x120 - iphone-retina
- 152x152 - ipad-retina
Третье , вставить в код указав пути к картинкам:
Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок, чтобы эффект не применялся - нужно к именам файлам добавить -precomposed.png
А что Android!?:
Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова "apple" :)
Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на "рабочий стол".
В заключении - если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием "apple-touch-icon.png". Это самый простейший способ .
Для быстрого автоматического создания иконок для сайта
Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:
Файлы можно скачать архивом.
Сервис так же генерирует html код для вставки в шаблон сайта:
