Какие нужны фавиконки


    Расскажите о тонкостях подключения фавиконок, какие способы сейчас актуальны?

    Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!


    Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.


    Но ICO признали все браузеры и научились подключать его не только из корня сайта, но и из произвольного места. Если указать в голове документа <link rel="icon">, то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.


    <link rel="icon" src="images/my.ico">

    При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.


    Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.


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

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


    В HTML5 появилось расширенное описание <link rel="icon">: добавился атрибут sizes, чтобы указывать размеры, и атрибут type, чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes. Если иконка векторная — да, так тоже можно — укажите размер any. Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.


    <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
    <link rel="icon" href="favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon">
    <link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">

    Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.


    Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью <link rel="manifest"> на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.


    {
      "name": "My App",
      "icons": [{
        "src": "64.png",
        "sizes": "64x64"
      }, {
        "src": "128.png",
        "sizes": "128x128"
      }],
      "display": "fullscreen",
      "orientation": "landscape",
      "theme_color": "tomato",
      "background_color": "cornflowerblue"
    }

    А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью <link rel="mask-icon"> для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.


    <link rel="mask-icon" href="mask.svg" color="red">

    Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.


    Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.


    Этого вам должно хватить, чтобы было красиво в основных современных браузерах. Но если нужно упороться по мелочам и сделать вот прямо идеально на каждой платформе — мои соболезнования и читайте документацию в описании к видео. Есть ещё сносный онлайновый генератор иконок, но я бы не доверил ему генерировать графику — будет мыльно. А вот код позаимствовать можно.


    Ну что, чуда не произошло и всё по-старому: мусор в шапке, мусор в корне? Знаете, нет, я верю, что со временем веб-манифест наведёт порядок, поэтому подключайте его уже сегодня. Вот выбросим мусор и заживём!


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy
    48,00
    Интерактивные онлайн-курсы
    Поделиться публикацией

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

      +1
      веб-манифест придет — порядок наведет!

      вообще оно ж уже не руками генерируется все давно, так что не так страшно, что там куча строк
        0
        в смысле, что не надо в каждом файле руками добавлять, закинул в template или partial и все
        0
        Этот сервис делает не обязательно мыльно. Я туда обычно закидываю SVG и он из этого SVG делает хорошие иконки.
          +2
          А когда-то html использовали, чтобы оформить полезную информацию, а не цвет иконки для тач-бара маководов.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Не всем приятно смотреть на голые таблицы. К тому же, например в хроме, можно на панель закладок поместить очень много таких иконок без текста и сразу понимать что за сайт по иконке, не пытаясь вчитаться
                0
                Браузер уже несколько лет успешно определяет какие данные ему нужно загружать, а какие нет)
                +2
                > Для начала, забудьте про ICO, если только вам не нужен IE10
                И если вам не нужна фавиконка в выдаче Яндекса…
                yandex.ru/support/webmaster/search-results/favicon.xml
                По крайней мере с год-два назад при попытке подсунуть Яндексу что-то, отличное от формата ico, иконка из выдачи пропадала.
                  +1
                  Если сейчас прописать favicon.png и подключить его в head секции, Яндекс будет отображать. Проверенно на многих сайтах.
                  Пример линка подключения:
                    0
                    Почему-то не удалось добавить пример, хотя я выбрал code. Напишу без тегов:
                    link rel=«shortcut icon» href=«favicon1.png» type=«image/x-icon»
                      0
                      Эмм, image/x-icon для PNG? Вы серьёзно?
                        0
                        Да. Серьёзнее некуда. Данный type прописан стандартно в движке Maxsite CMS к favicon. И поскольку Favicon отображается в выдаче Яндекса, значит он воспринимает это изображение как надо.
                        Вполне возможно, что это неправильно, но ведь работает.
                        Кстати, Сама иконка имеет размер 45 на 45 PX.
                          +2
                          Вполне возможно, что это неправильно, но ведь работает.

                          Но сколько можно ехать на костылях? Тем более это костыль к одному поисковому сервису. Кстати, тут же есть представители Яндекса, кто знает, как их призвать? Может опишутся.
                            0
                            И не факт, что этот костыль вообще кому-то нужен. Вполне возможно, что один раз кто-то по ошибке указал «image/x-icon» всесто «image/png» — и пошло-поехало. Культ карго.

                            tenorok? (я тегнул последнего из блога Яндекс, кто писал статью с тегом HTML).
                    +2

                    Я уже переводил эту статью https://habrahabr.ru/post/260777/

                      0
                      И там же в комментариях pepelsbey заметил, что статья чуть устаревшая. Вы попросили уточнить что устарело, вот вам и ответ)
                      +1
                      Потом на плохом канале страницы по три часа открываются.
                        0

                        В итоге, если иконка монохромная то svg, size any и точно расходимся?

                          0

                          SVG-иконки пока плохо поддерживаются. Без парочки PNG и тач-иконки не обойтись.

                          +2
                          Вполне сносные генераторы иконок:
                          realfavicongenerator.net – с кучей опций и крутилочек.
                          favicon-generator.org – меньше опций, но на выходе почти тоже самое.
                          Мыло выходит на сложных изображениях, но как говорится в статье, можете сгенерировать код, а косячные иконки делать вручную.

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

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

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