Favicon (иконка сайта)

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

Иконка сайта Favicon

Зачем нужна иконка Favicon для сайта?

Иконка сайта Favicon (от англ. Favorite Iconиконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

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

Отображение Favicon в интерфейсе браузеров
Браузер Адресная строка Выпадающий список Панель ссылок Закладки Вкладки
FirefoxFirefox - + + + +
OperaOpera - - + + +
ChromeChrome - - + + +
SafariSafari + - - + +
EdgeEdge - + + + +
IEIE + - + + +

Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

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

Фавиконки при большом количестве вкладок
Фавиконки при большом количестве вкладок

Иконка сайта в закладках браузера

Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в ссылках на «избранные» страницы), а также в панелях со ссылками:

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

Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной - с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что фавиконка:

  • отображается в интерфейсе браузеров: вкладках, закладках и перед адресной строкой (Internet Explorer, Safari),
  • способствует узнаваемости сайта,
  • облегчает работу пользователей в браузере,
  • является визитной карточкой сайта в браузере,
  • отображается в сниппетах поисковой выдачи,
  • может влиять на кликабельность сниппета,
  • может косвенно влиять на ранжирование страниц сайта.

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Favicon в сниппетах выдачи Яндекса
Favicon в сниппетах выдачи Яндекса

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

У Яндекса существует отдельный поисковой робот, индексирующий файлы favicon в формате ICO и в других форматах. Обновление фавиконок в выдаче Яндекса – явление достаточно редкое, занимающее около месяца.

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер:

Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер
Указание на отсутствие фавиконки в сервисе Яндекс.Вебмастер

Проверка наличия Favicon в индексе

Фавиконки добавляются в индексную базу и отображаются в поисковой выдаче в виде изображений в формате PNG. Проверить наличие иконки сайта в индексе Яндекса можно по ссылке:

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

Если иконка сайта не проиндексирована, и (или) в Яндекс.Вебмастере присутствует указанное выше предупреждение об её отсутствии на сайте, то проверьте файл на соответствие требованиям.

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.

Яндекс.Помощь

Требования к иконке сайта

Чтобы избежать проблем с отображением иконки сайта Favicon в интерфейсе браузеров и сниппетах поисковой выдачи Яндекса, необходимо, чтобы файл иконки соответствовал определённым требованиям.

Для фавиконок существуют требования:

  • к названию файла,
  • к геометрическому размеру,
  • к формату файла,
  • к размещению,
  • к HTML-разметке.

Теперь детально рассмотрим перечисленные требования к файлу фавиконки.

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico».

Геометрический размер

В Справке Google сказано, что геометрический размер фавиконки должен быть кратным 48 и составлять не меньше 48×48 px. Во вкладках, закладках и перед адресной строкой браузеров, а также в сниппетах поисковой выдачи значок Favicon отображается в размере 16×16 пикселей, поэтому делать картинку более 48×48 px не имеет смысла.

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.

Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

Поддерживаемые форматы Favicon в браузерах
Браузер ICO PNG GIF JPG APNG SVG
FirefoxMozilla Firefox + + + + + +
OperaOpera + + + + + -
Google ChromeGoogle Chrome + + + + - -
SafariSafari + + + + - -
Microsoft EdgeMicrosoft Edge + + + - - -
IEInternet Explorer + + + - - -

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

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта.

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

  • имя файла: favicon,
  • формат файла: ICO,
  • размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
  • размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса.

Привлекательность

Иконка сайта должна быть уникальной, привлекательной и запоминающейся, поэтому к её созданию необходимо подойти серьезно, с учётом всех возможностей:

Используйте уникальную фавиконку
Пользователи не любят плагиат и копирование: заимствование иконки сайта другого популярного ресурса в большинстве случаем негативно отразится на поведенческих факторах.
Фавиконка должна быть контрастной
Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.
Подумайте об использовании анимации
Браузеры Firefox и Opera отображают анимацию в иконках сайта форматов ICO и GIF. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.
Учитывайте возможность применения прозрачности
Все форматы для файлов Favicon, кроме JPG, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.

Уникальность

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

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

Универсальные фавиконки в виде стрелки

Контрастность

Иконка сайта должна быть четкой и контрастной, но не слишком резкой. Не используйте Favicon с размытым нечетким изображением или со слишком резким выделением пикселей:


Исходное изображение

Размытая иконка

Резкая иконка

Оптимальная контрастность

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

Статический favicon.gif
Статичная иконка
Анимированный favicon.gif
Анимированная иконка

Создать анимированный Favicon можно с помощью графических редакторов или специализированных онлайн-сервисов.

Поддержка анимированных фавиконок браузерами
Браузер Отображение анимации
Mozilla FirefoxMozilla Firefox +
OperaOpera -
Google ChromeGoogle Chrome -
SafariSafari -
Microsoft EdgeMicrosoft Edge -
Internet ExplorerInternet Explorer -

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

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

Эффект прозрачности

Прозрачный и полупрозрачный фон фавиконок становится заметен в неактивных вкладках браузера, а в остальных случаях (в активных вкладках, закладках и даже в сниппетах Яндекса) фавиконка отображается на белом или светло-сером фоне:

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

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

Существует несколько способов создания фавиконок в формате ICO и в других форматах: с помощью онлайн-генераторов, узконаправленных программ или графических редакторов. Мы рассмотрим процесс создания в онлайн-генераторе и в программе Photoshop.

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Возможности сервиса

Favicon.cc позволяет:

  • сохранять фавиконки в формате ICO,
  • рисовать фавиконки онлайн,
  • конвертировать изображения в фавиконки,
  • изменять пропорции исходных изображений при конвертации,
  • создавать анимированные фавиконки,
  • наблюдать за изменениями фавиконки при редактировании,
  • бесплатно скачивать готовые фавиконки.

К условным недостаткам генератора можно отнести:

  • отсутствие русской версии,
  • экспорт файлов только в формате ICO.

Создание новой фавиконки онлайн

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

  1. кликните Create New Favicon,
  2. в области «Color Picker» в правой части окна размещены инструменты для рисования:
    • палитра цветов — для определения цвета карандаша,
    • Transparency — ползунок определения степени прозрачности,
    • Last Used Colors — панель быстрого выбора из последних применяемых цветов,
    • transparent — устанавливает прозрачный цвет («стирка»),
    • move — позволяет переместить все пиксели в редакторе.
  3. разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
  4. все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
  5. скачать готовую фавиконку можно по клику на Download Favicon.
Создание Favicon в онлайн-генераторе
Создание Favicon в онлайн-генераторе

Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

  1. кликните Use Animation под окном редактора,
  2. раскроются дополнительные инструменты для работы с кадрами:
    • номер кадра указан прямо под редактором Favicon,
    • в выпадающем списке напротив номера можно выбрать частоту смены кадра,
    • Clear Frame — очистка окна редактора (текущего кадра),
    • Append New Frame — добавление нового чистого кадра (откроется в редакторе),
    • Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
    • Delete Frame — удаление текущего кадра,
    • animate preview — активация демонстрации анимации в области «Preview»,
    • в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

  1. кликните Import Image,
  2. выберите файл для преобразования размером не более 5 Мб,
  3. определите способ преобразования размера изображения до квадратных пропорций:
    • Keep Dimensions — с сохранением пропорций исходного изображения,
    • Shrink to square icon — сжимая или растягивая изображение.
  4. кликните Upload для конвертации.
Онлайн-конвертер favicon.cc
Онлайн-конвертер favicon.cc

Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

  1. чтобы перейти к списку готовых фавиконок кликните:
    • Latest Favicons — последние созданные иконки,
    • Top Rated Favicons — самые популярные иконки,
  2. кликните по названию понравившейся фавиконки,
  3. кликните:
    • Download Favicon чтобы скачать копию фавиконки,
    • Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

Если вы хорошо знакомы с функционалом Adobe Photoshop, то ни что не мешает вам сделать качественную иконку для сайта с помощью этой программы.

Особенности программы

Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop.

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

  • Сложный многофункциональный интерфейс

    Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.

  • Нет возможности сохранять файлы в формате ICO

    Но можно сохранять иконку в формате BMP и заменять расширение на ICO.

  • Нет возможности создавать анимационные Favicon в формате ICO

    Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

  1. открываем программу,
  2. кликаем ФайлСоздать,
  3. в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
  4. для удобства рисования:
    • масштабируем изображение (клавиши CTRL + + и CTRL + -),
    • включаем сетку: (клавиши CTRL + '),
    • настраиваем сетку: (РедактированиеНастройкиНаправляющие, сетка и фрагменты...),
    • используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).
Рисование Favicon в Photoshop
Рисование Favicon в Photoshop

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

  1. кликаем ФайлСохранить как,
  2. в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
  3. открываем Total Commander и меняем расширение файла на ICO.
Смена формата Favicon с BMP на ICO
Смена формата Favicon с BMP на ICO

Создание Favicon из изображения

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

Создание иконки для сайта из изображения в Photoshop
Создание иконки для сайта из изображения в Photoshop
  1. откройте исходное изображение в Photoshop,
  2. измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
    • кадрирования (клавиша C),
    • изменения размера изображения (клавиши ALT + CTRL + I),
    • изменения размера холста (клавиши ALT + CTRL + C),
  3. перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
    • уменьшите изображение до 16×16 px,
    • в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
    • вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
  4. сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).
Изменение размера и настройка четкости фавиконки
Изменение размера и настройка четкости фавиконки

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

  1. открываем статичную фавиконку в программе,
  2. кликаем ОкноШкала времени,
  3. кликаем Создать анимацию кадра,
  4. выбираем кадры и:
    • дублируем слои для новых кадров,
    • редактируем слои для новых кадров,
    • настраиваем отображение слоёв в кадрах,
    • устанавливаем частоту смены кадров.
  5. переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
    • выбираем тип файла GIF,
    • в разеле «Анимация» выбираем число повторов «Постоянно»,
    • сохраняем картинку.

Как установить Favicon на сайт?

Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию favicon.ico в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.

HTML-код для Favicon

Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами rel, type и href, размещаемый в разделе head:

<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
Возможные значения атрибутов тега <link> для Favicon
Атрибут Значение Пояснение
rel icon Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны.
shortcut icon
type image/x-icon Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата ICO.
image/vnd.microsoft.icon
image/gif Для фавиконок в формате GIF.
image/jpeg Для фавиконок в формате JPEG.
image/png Для фавиконок в формате PNG.
image/bmp Для фавиконок в формате BMP.
image/svg Для фавиконок в формате SVG.
image/apng Для Favicon формата APNG.
href [относительный URL] Например: /favicon.ico
[абсолютный URL] Например: http://site.net/favicon.ico
[Код base64] Например: data:image/x-icon;base64,AAABAA...

Примеры подключения

Рассмотрим примеры указания на иконку сайта в HTML-коде.

HTML-тег для favicon.ico

Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу:

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

По возможности применяйте иконки в формате ICO, чтобы избежать возможных проблем с их отображением.

HTML-тег для Favicon вне корневого каталога

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

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам.

HTML-тег для фавиконок с нестандартным названием

Для подключения иконки сайта, имеющей название, отличное от favicon, не забудьте указать это в атрибуте href. Например:

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

Во избежание возможных проблем с отображением используйте фавиконки с именем favicon.

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.

Ссылки

Автор:
Оцените материал:
5.0/5

Комментарии  

Онотолей +3
Фавиконки уже вовсю используются в выдаче Google, так что пора обновлять ;-)
22.01.2020 22:17 Ответить
Антон Майоров +6
Спасибо, дополнили и исправили!
23.01.2020 09:57 Ответить
Онотолей +2
Хорошо, только почему то Google их показ уже успел отменить :D
26.01.2020 11:39 Ответить
Антон Майоров +4
Ох уж этот Google :-)
Не будем спешить с выводами, думаю в скором времени вернут.
26.01.2020 12:40 Ответить
Miss +2
Стоит ли использовать динамичные иконки? Существует мнение, что они привлекают внимание. Если да, то какой формат надо использовать?
28.01.2020 18:41 Ответить
Антон Майоров +6
А для фавиконок без вариантов — только ICO. Однако на мой субъективный взгляд заморачиваться с анимацией не стоит:
  • анимацию Favicon из популярных браузеров отображает только Firefox,
  • циклическая анимация не столько привлекает внимание, сколько отвлекает.
05.02.2020 20:17 Ответить

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