Какого размера фавикон

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 файлы:
<link rel=»icon» type=»image/png» href=»/favicon-16×16.png» sizes=»16×16″> <link rel=»icon» type=»image/png» href=»/favicon-32×32.png» sizes=»32×32″> <link rel=»icon» type=»image/png» href=»/favicon-96×96.png» sizes=»96×96″>
Так что мы должны объявлять?
Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают 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, лучше их объявить.
<link rel=»apple-touch-icon» sizes=»57×57″ href=»/apple-touch-icon-57×57.png»> <link rel=»apple-touch-icon» sizes=»114×114″ href=»/apple-touch-icon-114×114.png»> <link rel=»apple-touch-icon» sizes=»72×72″ href=»/apple-touch-icon-72×72.png»> <link rel=»apple-touch-icon» sizes=»144×144″ href=»/apple-touch-icon-144×144.png»> <link rel=»apple-touch-icon» sizes=»60×60″ href=»/apple-touch-icon-60×60.png»> <link rel=»apple-touch-icon» sizes=»120×120″ href=»/apple-touch-icon-120×120.png»> <link rel=»apple-touch-icon» sizes=»76×76″ href=»/apple-touch-icon-76×76.png»> <link rel=»apple-touch-icon» sizes=»152×152″ href=»/apple-touch-icon-152×152.png»>

Как бы странно это не звучало, устройства под 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 выглядит как-то так:
<meta name=»msapplication-TileColor» content=»#2b5797″> <meta name=»msapplication-TileImage» content=»/mstile-144×144.png»>
Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:
<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/mstile-70×70.png»/> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <wide310x150logo src=»/mstile-310×150.png»/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
Плитки сайтов в Windows 8.

A: 150х150. Вы не умеете читать?
B: Иной.
Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.
Поздравляем, вы закончили викторину! Как вы это сделали?
Суть этих вопросов — показать какой сложной может быть действительность, несмотря на кажущуюся простоту. Времена, когда фавикон был единственным favicon.ico давно ушли. Но старые привычки сохраняются и могут привести к абсурдным ситуациям. Мы тратим дни на аккуратный отзывчивый дизайн и добавляем только 57х57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.

Какой размер для фавиконок использовать?

Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок, которые подходят всем браузерам и всем экранам:

<link rel=»apple-touch-icon» sizes=»180×180″ href=»apple-touch-icon-180×180.png»> <link rel=»icon» type=»image/png» sizes=»32×32″ href=»favicon-32×32.png»> <link rel=»shortcut icon» href=»favicon.ico»>

Для сайта на CMS WordPress это может выглядеть так:

<link rel=»apple-touch-icon» sizes=»180×180″ href=»<?php bloginfo(‘template_directory’); ?>/images/favicon/apple-touch-icon-180×180.png»> <link rel=»icon» type=»image/png» sizes=»32×32″ href=»<?php bloginfo(‘template_directory’); ?>/images/favicon/favicon-32×32.png»> <link rel=»shortcut icon» href=»<?php bloginfo(‘template_directory’); ?>/images/favicon/favicon.ico»>

  1. apple-touch-icon-180×180.png — сразу для всех современных гаджетов и больших экранов, эту иконку будет использовать и iOs, и Android
  2. Для обычных браузеров, favicon-32×32.png — средних размеров, можно и больше, но устройства, которые могут использовать большего размера фавикон, возьмут первый вариант apple-touch-icon-180×180.png
  3. Все же еще где-то используют IE9 и младше, поэтому приходится использовать такой устаревший формат как favicon.ico, по идее, можно сделать размер и 32х32, но оставим 100% поддерживаемый 16х16.

До этого я использовал такие фавиконки:

<link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»> <link rel=»apple-touch-icon» href=»apple-touch-icon-57×57.png»> <link rel=»apple-touch-icon» sizes=»72×72″ href=»apple-touch-icon-72×72.png»> <link rel=»apple-touch-icon» sizes=»114×114″ href=»apple-touch-icon-114×114.png»>

Но все эти иконки успешно должна заменить одна apple-touch-icon-180×180.png.

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

На iPhone старых версий размер 180х180 просто сожмется до нужных пропорций.

Если же следовать требованиям всех браузеров и гаджетов, тогда придется делать под каждый формат свою иконку:

<link rel=»apple-touch-icon» sizes=»57×57″ href=»apple-touch-icon-57×57.png»> <link rel=»apple-touch-icon» sizes=»60×60″ href=»apple-touch-icon-60×60.png»> <link rel=»apple-touch-icon» sizes=»72×72″ href=»apple-touch-icon-72×72.png»> <link rel=»apple-touch-icon» sizes=»76×76″ href=»apple-touch-icon-76×76.png»> <link rel=»apple-touch-icon» sizes=»114×114″ href=»apple-touch-icon-114×114.png»> <link rel=»apple-touch-icon» sizes=»120×120″ href=»apple-touch-icon-120×120.png»> <link rel=»apple-touch-icon» sizes=»144×144″ href=»apple-touch-icon-144×144.png»> <link rel=»apple-touch-icon» sizes=»152×152″ href=»apple-touch-icon-152×152.png»> <link rel=»apple-touch-icon» sizes=»180×180″ href=»apple-touch-icon-180×180.png»> <link rel=»icon» type=»image/png» href=»favicon-32×32.png» sizes=»32×32″> <link rel=»icon» type=»image/png» href=»favicon-194×194.png» sizes=»194×194″> <link rel=»icon» type=»image/png» href=»favicon-96×96.png» sizes=»96×96″> <link rel=»icon» type=»image/png» href=»android-chrome-192×192.png» sizes=»192×192″> <link rel=»icon» type=»image/png» href=»favicon-16×16.png» sizes=»16×16″> <link rel=»manifest» href=»manifest.json»> <meta name=»apple-mobile-web-app-title» content=»JoJo Productions»> <meta name=»application-name» content=»JoJo Productions»> <meta name=»msapplication-TileColor» content=»#00aba9″> <meta name=»msapplication-TileImage» content=»mstile-144×144.png»> <meta name=»msapplication-config» content=»browserconfig.xml»> <meta name=»theme-color» content=»#555555″> <link rel=»shortcut icon» href=»favicon.ico»>

Но самый первый вариант с тремя фавиконами успешно заменяет кучу этих иконок.

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

Особенности форматов

Как уже было сказано раньше, в качестве фавиконов использовалось только изображение с расширением .ico. И это намного упрощало задачу, можно было взять понравившееся изображения подогнать под размер фавикона и попросту поменять расширение. Сейчас этим занимаются специальные сервисы, но из-за того, что увеличилось количество форматов нужно иметь хотя бы базовые знания об их особенностях.

Самые распространенные форматы на сегодня это .png и .ico:

  • .ico- этот формат превосходно подходит для Windows. Картинки с таким расширением имеют разное разрешение и глубину цвета. То есть, битовую глубину, что характеризирует информацию о цвете для каждого пикселя и делает изображение более точным. Для браузера Internet Explorer это отличное решение, так как здесь могут использоваться фавиконы разных размеров.
  • .png — файлы этого расширения более удобны в использовании. Это объясняется тем, что для создания иконки сайта не нужно никаких дополнительных инструментов. Более того, форматом поддерживается маска-канал, с помощью которой можно создать картинку самого маленького размера без потери качества изображения. Единственное, чем этот формат уступает предыдущему – невозможность отображения фавикона в Internet Explorer.

Чтобы имидж не испортить

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

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

Основная задача фавикона: изображать ключевую тематику ресурса. Но никто не запрещает применять для этого всю свою креативность. К примеру, если сайт занимается продажей бытовой техники, то можно, конечно, в качестве фавикона использовать изображение стиральной машинки или холодильника. Но чем тогда ресурс будет отличаться от сотен подобных ему, и чем он тогда запомнится? Что если попробовать поэкспериментировать и с названием проекта? Например, «Яндекс» уже давно стал, узнаваем благодаря алой букве «Я». Это и есть главная особенность фавикона, как бренда – врезаться в память пользователя и характеризировать конкретный сайт, выделяя его из сотен других.

Программы для создания фавиконов

Сегодня каждый веб-мастер может воспользоваться специальными сервисами для создания фавиконов. К тому же, существуют объемные галереи, из которых можно выбрать готовую иконку сайта, сделанную на профессиональном уровне. Среди создателей сайтов особой популярностью пользуется галерея IconJ. Она является не только каталогом, но и генератором. Желающие могут выбрать иконку для своего ресурса из каталога, в котором находится более 18000 картинок или же создать свой авторский фавикон.

На пространстве Рунета популярной является база фавиконов от рекламного агентства «Веб Аудит». Что касается иностранных ресурсов, то лучшим вариантом для создания и выбора иконки сайта считают Favicon.cc. Здесь можно воспользоваться специальными функциями, чтобы настроить цветовую гамму, обрезать картинку или наложить дополнительные слои.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *