[Перевод] Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?
От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.
Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.
Фавикон был представлен в 1999 году, в Internet Explorer 5(источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.
С тех пор, большинство настольных браузеров следуют тенденции и используют фавикон, тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку, и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?
Устроим викторину!
Каков основной файл фавикона?
Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.
Вопрос: Какого размера должен быть favicon.ico?
A: 16×16. Стандартный.
B: 32×32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
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 и ниже | 57×57 |
| 7 | 60×60 | ||
| Retina | 6 и ниже | 114×114 | |
| 7 | 120×120 | ||
| 6 Plus | 8 и выше | 180×180 | |
| iPad | Classic | 6 и ниже | 72×72 |
| 7 | 76×76 | ||
| Retina | 6 и ниже | 144×144 | |
| 7 | 152×152 |
Старая 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.
Вопрос: Каков размер плитки square150×150logo?
A: 150×150. Вы не умеете читать?
B: Иной.
Ответ: B, 270×270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.
Поздравляем, вы закончили викторину! Как вы это сделали?
Суть этих вопросов показать какой сложной может быть действительность, несмотря на кажущуюся простоту. Времена когда фавикон был единственным favicon.ico давно ушли. Но старые привычки сохраняются, и могут привести к абсурдным ситуациям. Мы тратим дни на аккуратный отзывчивый дизайн, и добавляем только 57×57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.
