Генераторы многослойных favicon, Apple-иконки, Opera Speed Dial и картинки для facebook. Вопрос: Какой формат необходим для поддержки мобильных платформ

Просматривая лог ошибок сервера, вы можете обнаружить записи примерно следующего содержания:
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 не обнаружены.

Ну и в заключение, вы можете создать иконку для своего сайта любого размера с эффектом и без, с помощью онлайн генератора пройдя по этой ссылке .

Многие сайты имеют 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 иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.

Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

• Перевод

От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.

Фавикон был представлен в 1999 году, в Internet Explorer 5 () и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.

С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?

Устроим викторину!

Каков основной файл фавикона?

Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.

Вопрос: Какого размера должен быть favicon.ico?

A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64x64.
D: Ни один из перечисленных.

Ответ: D.

Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.

Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:

16х16 на вкладке Chrome. Пока всё хорошо.

Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.

16х16 в панели задач.

16х16 на рабочем столе. Не хорошо.

Когда иконка содержит несколько изображений, результат гораздо лучше.

16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.

16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.

Вопрос: Каково назначение favicon.png?

На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом.
Что это на самом деле?

A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?
B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.

Ответ: D.
Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes , позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Так что мы должны объявлять?

Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.

Favicon.ico - для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.

Вопрос: Какой формат необходим для поддержки мобильных платформ?

Согласно SmartInsights , больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?

A: favicon.ico. Это работало 15 лет назад, работает и сегодня.
B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.

Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.

Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.
Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.

Вопрос: Какого размера должны быть PNG иконки?

A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Все перечисленные

Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.

Вопрос: Каков размер Apple Touch icon?

Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.

Ответ: Вплоть до 180х180.

После появления первого iPhone, было 3 важных релиза:

• iPad. С экраном гораздо большего размера.
• Retina-экраны. С удвоеной плотностью пикселов.
• iOS7. Плоский дизайн отличается на iPhone/iPad.

Всего есть 9 комбинаций.

Устройство	Экран	Версия iOS	Размер иконки
iPhone	Classic	6 и ниже	57x57
		7	60x60
	Retina	6 и ниже	114x114
		7	120x120
	6 Plus	8 и выше	180x180
iPad	Classic	6 и ниже	72x72
		7	76x76
	Retina	6 и ниже	144x144
		7	152x152

Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.

Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.

Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно .

Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.

Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?

A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации , так что любое iOS устройство всё равно их надет.
D: Нет, но...

Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.

Вопрос: Как объявить плитку для планшетов на Windows 8?

A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage .
D: browserconfig.xml.

Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:
#2b5797
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.


Плитки сайтов в Windows 8.

Вопрос: Каков размер плитки square150x150logo?

A: 150х150. Вы не умеете читать?
B: Иной.

Ответ: B, 270х270.

Количество устройств работающий на операционной системе iOS с каждым годом растет. Это статья для web-мастеров, которые оптимизируют свои сайты для просмотров с iPhone и iPad. Для того, чтобы при добавлении в закладки браузера Safari или при добавлении на рабочий стол iPhone показывалась нужная иконка сайта, необходимо специально создать изображений. Иконка favicon в данном случае не работает.

Для сайтов, где нет такой иконки, в показывается серая заглушка, а на рабочем столе создается иконка на основе скриншота первой страницы. Это не очень красиво. Но достаточно потратить всего несколько минут, чтобы сделать свою иконку сайта для iPhone...

Как создать иконку сайта для iPhone

1. Нужно создать изображение в формате PNG размером 152x152px в любом графическом редакторе. Если вы работаете в Photoshop, то это формат PNG 24. Можно даже задать прозрачность.
2. Сохранить файл под названием "apple-touch-icon.png ".
3. Загрузить получившийся файл по FTP на сервер, в корневую папку сайта. Например /assets/pictures/9842/content_apple-touch-icon.png .

Теперь при добавлении закладки на ваш сайт, в Safari появится созданная вами иконка. А если вы выберите "Добавить в Домой", то и на рабочем столе.

Сразу отвечу на возможные вопросы.

Нужно ли что-то прописывать в самом HTML документе?

Нет, ничего специально прописывать в mete не нужно. Браузеры мобильный устройств сами ищут этот файл на вашем сайте. Более того, если такого файла там нет, то сервер выдает в ответ 404 ошибку. Посмотрите в логи на сервере, там много таких запросов. Кроме того - эти файлы "ищутся" не только в момент добавления сайта на домашний экран, а при каждом посещении!

И, вы наверно удивитесь, но Android устройства тоже используют значки apple-touch-icon.png при добавлении закладки сайта на рабочий стол:).

А как же Retina, нужно делать несколько изображений под разное разрешение?

Раньше нужно было делать несколько картинок, сейчас достаточно одной большой (152x152px). В принципе, в Apple регулярно меняют разрешения экранов и стандарты для разработчиков. Вполне вероятно, что когда вы будете читать эту статью, что-то уже поменяется. Но, самый актуальный размер всегда можно узнать по ссылке /assets/pictures/9844/content_apple-touch-icon.png . Это самый правильный формат иконки:).