Создание favicon для сайта 2020

Что такое favicon и для чего он нужен?


Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

image

Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.

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

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


Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?


  • Classic desktop browsers
  • Android Chrome
  • iOS Safari Web Clip
  • Mac OS
  • Windows


Classic desktop browsers


Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. ICO формат может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Android Chrome


Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">

Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.

Сам файл манифеста формата json и объявляется следующей строкой:

<link rel="manifest" href="…/manifest.json">

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

Стоит отменить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192x192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192x192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

iOS Safari Web Clip


iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут умешать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

Mac OS


В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы с html кодом.

Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color="#e52037".

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.

Windows


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

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

  • Small — 70x70 (Рекомендуемый размер: 128x128)
  • Medium — 150x150 (Рекомендуемый размер: 270x270)
  • Wide — 310x150 (Рекомендуемый размер: 558x270)
  • Large — 310x310 (Рекомендуемый размер: 558x558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70x70. То же самое нужно проделать с остальными размерами.

Подготовка favicons


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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение


Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">

<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Комментарии 26

    +3

    Если не ошибаюсь, то в Firefox была возможность отображать favicon в формате .gif, то есть с движением.


    P.S. о, даже статью нашел про генерируемый favicon — https://habr.com/ru/company/ruvds/blog/464127/

      +4
      Есть даже игра в favicon DEFENDER OF THE FAVICON.
      –8

      "Некоторые браузеры не могут выбрать правильный значок в файле ICO"…
      Из-за криворукости разработчиков теапрь налюдо все менять?
      Что следующее на очереди?

        +10
        Вместо всей этой горы иконок можно использовать один svg плюс три картинки самых больших размеров. Хорошая статья по ссылке.
          –2

          Увы, но нет, ios не поддерживает svg.

            +2
            Если бы вы прошли по предложенной комментатором ссылке, или, хотя бы, внимательно прочитали сам комментарий, то не написали бы свой. Ясно же написано: «один svg плюс три картинки».
              0
              С чего вы решили что их 3? Там их целая плеяда ios
              Остается рядом положить 16 и 32 и весь диапазон покрыт без всяких svg.
            +2
            Иногда есть смысл не просто в масштабировании иконки, а в подготовке разных иконок для разных размеров. Например, самая маленькая иконка во вкладке браузера может быть схематичной, а большая, для экрана запуска на смарте, может быть более детализированной, с градиентами и с большим количеством цветов.
            –1
            Я забил на это легаси и везде леплю один png 256x256. Проблем ноль. Благо, что не нужно поддерживать всякое легаси вроде ie11 и прочих динозавров не самых актуальных браузеров.
            Современные браузеры прекрасно ресайзят единственную иконку так, как им нужно без всяких проблем.
              +5
              Ну-ка покажите мне иконку, которая «без всяких проблем» ресайзится из 256 на 16…
              Обычно (дизайнеры иконок) каждый размер отрисовывают отдельно с разной детализацией.
                +1
                Например
                Взял рандомную картинку с интернета. Такого качества ресайза точно хватит для большинства сайтов. Или я не прав? =)

                UPD: С учетом, что большиство фавиконок в 256х256 имеют не так много деталей, как эта картинка, все выглядит еще лучше.
                  0
                  А что на этой фавиконке изображено то? Ресайзится оно может и да, но потом понять картинку без шансов.
                    0
                    Это уже проблема самой иконки как таковой, разве нет? Естественно, Мону Лизу не разглядишь. А вот если компания не хочет тратить много времени на логотип, то можно его прям целиком как фавикон использвовать и даже сэкономить 1 запрос при загрузке.
                      +1
                      А что изображено на иконке Хабра, вы можете понять? Фавиконки не нужно «понимать» сами по себе (и на размере 16х16 это, как правило, невозможно), но они хорошо распознаются, если раньше видел большое изображение, и по используемым цветам.
                      В примере выше иконка теоретически вполне узнаваемая.
                        0

                        Конечно могу. Вы что-то на ней не видите? У всех сайтов, которыми часто пользуюсь, фавиконка читаемая и часто это буква+цвет или простой символ

                    0

                    Иконка в 256 с высокой детализацией — это плохая иконка (если мы говорим про лого, что в подавляющем большинстве используется для иконок).
                    Обычно (дизайнеры иконок) могут добавлять пару эффектов для большого размера, не более того, типа теней, бликов, прочего.
                    Если всё это убрать и она выглядит достаточно хорошо (узнаваемо), то её прекрасно можно будет даунскейлить на меньшие размеры. Конечно, не так идеально, как это можно сделать сгенерировав размеры из SVG исходника, но часто вполне достаточно.

                  +2

                  Я не знаю, откуда вы скопировали категории, но так не говорят по-русски:


                  • Classic desktop browsers — Десктопные браузеры
                  • Android Chrome — Chrome на Android
                  • iOS Safari Web Clip — Иконка закладки в iOS (PWA)
                  • Mac OS — macOS
                  • Windows — Windows

                  Поправьте, пожалуйста. А то очень машинно звучит и путает.

                    +1
                    512x512 для маленькой иконки в закладках браузера, серьёзно?
                    А что не 4K сразу?
                    Вдруг пользователь на своей ретине сделает ярлык на пол рабочего стола?
                      +2
                      Кстати, файлы ICO могут внутри себя содержать и иконки в формате PNG. Например, такие оптимизированные иконки можно делать в Color Quantizer (для этого в нём нужно открыть заранее созданную иконку в обычном ICO без PNG) или даже собрать из кучки PNG-файлов при помощи FASM.

                      Бросил один favicon.ico в корень сайта — и оно работает. И не нужно ничего в мета-теги прописывать. Удобно =)
                        +1

                        А почему кстати ICO устаревший формат? Что в нём не так?

                          +1

                          Видимо та же история, что и с айфонами.
                          Формату минимум 20 лет, в мусорку!

                          0

                          Достаточно нарисовать одну большую картинку и сунуть в RealFaviconGenerator. При некотором везении он даже нормальный SVG создаст сам, а всё и остальное, все форматы, теги и манифест — отлично делает.

                            0

                            В 2020 уже можно было бы написать про раздельные иконки для тёмных и светлых тем: https://caniuse.com/?search=prefers-color-scheme
                            https://flaviocopes.com/dark-mode-favicon/


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

                              0
                              Очень похоже на статью 2017 года. В последнем абзаце, как и в указанной статье, представлена ссылка на тот же сайт. Это наводит на мысль, что обе статьи заказные.
                                +2
                                Давайте сэкономим на фавиконках, позволив указывать их в PNG!

                                2кб meta заголовков, 20 файлов и 2 отдельных файла с meta информацией

                                Сэкономили блин.
                                  0
                                  Давно пользуюсь favicon-generator.org, делает автоматом 95% из того что вы указали.

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

                                  Самое читаемое