Формат 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, наверное, лучше будет использовать абсолютный путь.
На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. - пишите. Спасибо за внимание. Удачи!
Количество устройств работающий на операционной системе iOS с каждым годом растет. Это статья для web-мастеров, которые оптимизируют свои сайты для просмотров с iPhone и iPad. Для того, чтобы при добавлении в закладки браузера Safari или при добавлении на рабочий стол iPhone показывалась нужная иконка сайта, необходимо специально создать изображений. Иконка favicon в данном случае не работает.
Для сайтов, где нет такой иконки, в показывается серая заглушка, а на рабочем столе создается иконка на основе скриншота первой страницы. Это не очень красиво. Но достаточно потратить всего несколько минут, чтобы сделать свою иконку сайта для iPhone...
Как создать иконку сайта для iPhone
- Нужно создать изображение в формате PNG размером 152x152px в любом графическом редакторе. Если вы работаете в Photoshop, то это формат PNG 24. Можно даже задать прозрачность.
- Сохранить файл под названием "apple-touch-icon.png ".
- Загрузить получившийся файл по 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 . Это самый правильный формат иконки:).
- Перевод
От переводчика.
Это перевод статьи Филипа Бернарда с сайта 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 TVB: 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.
| Устройство | Экран | Версия 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. Например:
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ. 
Плитки сайтов в Windows 8.
Вопрос: Каков размер плитки square150x150logo?
A: 150х150. Вы не умеете читать?B: Иной.
Ответ: B, 270х270.
