x
 
Максим Софронов
16 января 2012

Какой делать фавыконку сайта: просто 16 на 16 пикселей или содержащую в себе разные размеры?



Максим!

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

Необходимый и достаточный пакет

16 и 48favicon.ico
114apple-touch-icon.png, apple-touch-icon-precomposed.png (для Андроида)

Такой набор иконок обеспечит хорошее качество на всех платформах, представляющих для нас интерес: Виндоус, Мак, АйОС и Андроид. Три файла с указанными названиями достаточно положить в корень сервера — они подключатся автоматически.

Некоторые размеры и их применение

ИКО
16Настольные браузеры, мобильные, если нет специального размера
32«Список для чтения» в настольном Сафари и в мобильном на Айпаде и Айфоне без «ретины», панель задач Виндоуса 7
48Ярлык на рабочем столе Виндоуса
64«Список для чтения» на Айфоне с «ретиной»
ПНГ
32 и 64«Список для чтения», как выше — ПНГ приоритетнее ИКО
36, 48, 72Рабочий стол Андроида для разных разрешений (в точках/дюйм)
Иконка домашнего экрана
57Айфон без «ретины»
72Айпад
114Айфон с «ретиной»
Спотлайт
29Айфон без «ретины»
50Айпад
58Айфон с «ретиной»

Создание иконки

И в ИКО, и в ПНГ можно использовать альфа-канал.

Лучший способ упаковать несколько размеров для настольных браузеров — мультифайл favicon.ico. Браузер сам определит, какой размер когда использовать. Не нужно химичить с определением браузера на сервере или клиенте.

Без альфа-канала:


С альфа-каналом:


Программа для создания правильных .ico — «Аксиалис Айкон-воркшоп». Работает только под Виндоусом. Родная маковская «Айкон Компоузер» гораздо приятнее в работе, но делает иконки, которые не отображаются в ИЕ.

Иконки для мобильных устройств не могут быть объединены в один файл ПНГ, но они легко таргетируются при помощи атрибутов в ХТМЛ или по названию файла.

  • См. о мобильных иконках (на английском):
  • Спецификация Эпла
  • Матье Бино. Всё что вы хотели знать о тач-иконках
  • Примеры

    Иллюстрации ниже поясняют, как получен необходимый и достаточный пакет.

    Яндекс не использует мульти-фавыконку, а для ИЕ специально выводит иконку 48×48, в остальных браузерах — 16×16. Поэтому в «Списке для чтения» в Сафари, на ярлыке Хрома и на панели задач «Я» выглядит плохо:


    Могла бы лучше: если подставить 48-й размер, в списке он ужимается до 32, в адресной строке до 16 — не отличить от оригинальных 16×16:


    Аналогично и на панели задач:


    Набор сайта Эпла:

    favicon.ico — 32×32, 16×16 вообще нет (о своём «списке для чтения» подумали, а об ИЕ и Виндовых ярлыках забыли)

    apple-touch-icon.png — загадочные 129×129

    Если проявить педантизм, выдрючить и специально подключить каждый размер, то стоимость такой иконки непомерно вырастет. Но устройства и сами неплохо масштабируют картинки. Вот как выглядят эпловские 129, уменьшенные до 64 в «списке для чтения»:


    Если иконка маленькая, Виндоус не растягивает её на рабочем столе, но растягивает на панели задач:



Поделиться
Отправить

Комментарии

Ростислав Чебыкин
16 января 2012

Наконец, если вовсе не использовать «фавиконки», можно выгодно отличиться от остальных и обратить на себя внимание.

Сергей Беляков
16 января 2012

А с количеством цветов что? Нужно ли создавать версию без альфа-канала? 256-цветную?


18 января 2012

Кстати, мы считаем предпочтительным написание слова «фавыконка» через «ы».

Дело в том, что в русском языке нет словосочетания, от которого слово «фавыконка» могло бы считаться сокращением («фаворитная иконка»?) Мы заимствуем слово favicon целиком из английского языка. А значит, правило, предписывающее писать «политиздат», но произносить «политыздат», здесь не действует.

Поэтому мы уверены, что здесь подходит обычная фонетическая транскрипция.


18 января 2012

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

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

Иван Титов
18 января 2012

Яндекс склеивает 10 фавыконок в спрайт. Примерно пару лет назад мы сделали фавыконку с альфа-каналом, и в выдаче Яндекса у неё образовалась чёрная кайма. Видимо, в их алгоритме была какая-то ошибка, но сейчас всё работает корректно. Пример спрайта:

http://favicon.yandex.net/….ru/www.avtodeti.ru/www.avtokreslakarapuz.ru/avtokresel.net (http://favicon.yandex.net/favicon/www.avtokresla.ru/avtokresel.net/www.avtokreslo-shop.ru/www.detsky-mir.ru/www.babyzone.ru/www.mir-avtokresel.ru/kids.wikimart.ru/www.avtodeti.ru/www.avtokreslakarapuz.ru/avtokresel.net)

Третья снизу иконка — с альфа-каналом.

Стас Аскеров
28 февраля 2012

Нашёл инструменты для Мака — Hobiconer и его платный родственник Icon Slate. Пишут, что иконки совместимы в том числе и с ИЕ. Одна замеченная странность — фавыконка с двумя встроенными размерами общим весом в 1,5 КБ почему-то весит 13.

Александр Отважный
25 октября 2012

«114 apple-touch-icon.png, apple-touch-icon-precomposed.png (для Андроида)» — здесь немного непонятно.

То есть в случае с Андроидом я правильно понимаю, что по всем правилам фавыконка для этой системы должна называться по-другому, но андроид с удовольствием кушает и файл с названием apple-touch-icon-precomposed.png, поэтому специальную иконку по гайдам можно не готовить?

Константин Соколов
29 марта 2013

Почему-то ни слова нет про формат 144×144.

В гайдах Эпла он используется для Айпада с ретиной:
http://developer.apple.com/…/ConfiguringWebApplications.html (http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)

Вадим Юмадилов
20 июня 2014

С выходом АйОС 7 иконка для Айфона подросла до 120×120, а для Айпада до 152×152.

Иван Титов
12 сентября 2015

Загадочные 129х129 (или 152х152), предполагаю, делают, чтобы избежать бессмысленной полировки иконки для того, чтобы она вписалась в сетку 16х16 (или любую другую). Если мы сделаем версию 128х128 с любовью к пикселям, то при уменьшении в N раз она всё равно немного размажется. При произвольном уменьшении (не кратном 2, 3, 4), иконка уже более заметно размажется. И вот оно решение для перфекционистов: сделать иконку нестандартного размера, чтобы она приблизительно одинаково размазывалась при ресайзе до любого размера.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

12 4 Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 10




Недавно всплыло

Правдивость 4 Почему дизайнер должен уметь писать текст? 8 Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7 Какой движок выбрать для сайта рекламного агентства? 2