Если раньше стандартным размером favicon.ico были 16x16px, то на сегодняшний день картина изменилась - добавились другие стандарты, браузеры, дисплеи и девайсы. Об этом и пойдет речь - о том, как сделать несколько размеров favicon.

Используемые размеры:

16px - стандартный размер иконки, используется в адресной строке, на вкладках и в закладках браузеров.
24px - размер для "pinned sites" в IE9
32px - используется на табах в новых версиях IE, на кнопке в таскбаре в Windows 7 и выше, в списке для дальнейшего чтения в Safari
57px - стандартный размер иконок iOS на хоум-скрине (iPod touch, iPhone первого поколения до 3G)
72px - то же, что и 57px (для iOS), но только на iPad
114px - iPhone 4 и новее, так же для хоум-скрина (с дисплеями Retina)
144px - iPad нового поколения с дисплеем Retina
256px - максимальное значение ширины картинки для Opera Speed Dial (ниже пойдет речь об этом)

Когда браузер получает favicon большего размера, то пытается его "ужать" до 16x16px для отображения и часто в итоге получается полная ерунда. Например, браузеры на основе движка WebKit (Safari и Chrome) именно так и делают. Для того, чтобы браузеры не пытались менять размеры favicon сейчас имеет место практика создания многослойных файлов иконок (multi layer favicon ).

Генераторы favicon

Нужны они для облегчения рутиной работы по сборке файлов иконок. В итоге файл favicon будет состоять из 4-х слоев - 16x16, 24x24, 32x32 и 64x64 px. Каждый браузер или другая программа "возьмут" именно тот размер, который нужен им.

Я расскажу про два самых популярных генератора. Принцип у обоих прост - если у вас есть готовое изображение, допустим, размера 500x500px, из него автоматически будут созданы все необходимые файлы.


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


Это совершенно замечательный инструмент из вашей единственной картинки создаст сразу и многослойный favicon, и все иконки для Apple-девайсов всех поколений и подготовит еще код для вставки на сайт. Как видно на изображении - все иконки можно скачать как по отдельности, так и целым архивом. Кроме того, в файле favicon.ico кроме остальных будет еще слой с размером 48x48px.

Код, который в итоге сгенерируется, будет следующим:

Если вы не хотите, чтобы iOS сама добавила "отблеск" на вашей иконке, то необходимо использовать атрибут rel="apple-touch-icon-precomposed" .

Чтобы было понятней про многослойную иконку, то я покажу как это выглядит в готовом виде после использования iconifier.net


Я посмотрел это с помощью F3 в Total Commander, но есть вероятность, что у меня какой-то специальный плагин для просмотра установлен.

Фактически, iconifier.net дает возможность закрыть все необходимые вопросы, связанные с иконками для сайта.


Этот генератор крайне прост в применении, но имеет ряд преимуществ:
- сразу генерирует изображение для Opera Speed Dial размером 160x160
- делает иконки для Apple-устройств с эффектами закругления и тени
- генерирует полностью код для каждого типа иконки и имеет пояснения к коду

Минус сервиса один, на мой взгляд - файл favicon.ico генерируется не многослойным, а одного размера - 16x16px.

Opera Speed Dial

Когда вы в Opera открываете новую вкладку, то видите этот самый экран быстрого выбора "Speed Dial", он же - Экспресс-панель.


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

Для использования изображения должны быть соблюдены следующие условия:
1. Минимальный размер изображения: 114x114px
2. Формат изображения: jpg, png, gif и svg (только первый кадр при анимированном svg)

Максимальный размер изображения 256x160px.
Код для использования (в секции ):
Теперь это изображение будет использовано для отображения вашего сайта на экране Opera Speed Dial (Экспресс-панель). Очень важный момент - чтобы изображение для speed dial не использовалось как favicon, вам надо тег для экспресс-панели вставить первым в списке! После него уже должен идти стандартный favicon.ico:
...
Больше об использовании собственных изображений и не только для Экспресс-панели можно прочитать в официальной документации - Make your site shine in Speed Dial .

Изображения для Facebook

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

На сегодняшний день Facebook использует мета-теги Open Graph.

Необходимые условия:

1. Изображение должно быть квадратным, размером 90x90px

2. Форматы изображения: jpg, gif, png.

Разместите на сайте (в секции ) следующий код:


Конечно же, лучше для каждой статьи/страницы сайта подготавливать отдельное уникальное изображение. Полная документация об этом мета-теге и не только на

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

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

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

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

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

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

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

Первым делом , нам необходимо создать нужную иконку в формате.png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства.

Второе , необходимо сделать иконки разных размеров для разных устройств:

для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:

  • 60х60 - IPhone
  • 76x76 -iPad
  • 120x120 - iphone-retina
  • 152x152 - ipad-retina

Третье , вставить в код указав пути к картинкам:


Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок, чтобы эффект не применялся - нужно к именам файлам добавить -precomposed.png

А что Android!?:

Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова "apple" :)

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на "рабочий стол".

В заключении - если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием "apple-touch-icon.png". Это самый простейший способ .

Для быстрого автоматического создания иконок для сайта

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

  • Разработка веб-сайтов ,
  • Разработка мобильных приложений
    • Перевод

    От переводчика.
    Это перевод статьи Филипа Бернарда с сайта 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.