Что такое фавикон и как сделать его из логотипа (2026)

Фавикон — это крошечный значок, который представляет ваш сайт во вкладке браузера, закладке или на главном экране телефона. Сделайте его из символа логотипа, упростите так, чтобы он читался в 16–32 пикселях, и подготовьте минимальный набор файлов 2026 года: SVG, резервный ICO и 180×180 apple-touch-icon.

Автор LogoSagaОпубликовано
На этой странице
  1. Что такое фавикон?
  2. Почему фавикон важен?
  3. Размеры и форматы фавикона, которые вам нужны
  4. Как сделать фавикон из логотипа
  5. Подключение фавикона в HTML
  6. Бонус: фавикон, который подстраивается под тёмную тему
  7. Тестирование фавикона
Один и тот же знак в размерах фавикона, включая версию размером с вкладку браузера.
Фавикон — это символ логотипа, упрощённый так, чтобы оставаться чётким в крошечных размерах.

Что такое фавикон?

Фавикон (сокращение от «favorite icon», «избранный значок») — это небольшое квадратное изображение, которое представляет сайт во вкладке браузера, закладке, записи истории и на главном экране телефона. Это почти всегда упрощённая версия логотипа бренда — конкретно знака, поскольку для полного названия в таком размере места нет.

Почему фавикон важен?

Фавикон — небольшая, но постоянная часть брендинга. При десятке открытых вкладок это часто единственный способ мгновенно найти нужный сайт, а значок, сохранённый на главный экран, оказывается рядом с отполированными иконками приложений. Чёткий, соответствующий бренду фавикон выглядит продуманно; отсутствующий или размытый — незавершённо.

Размеры и форматы фавикона, которые вам нужны

Дюжина значков из старых руководств не нужна. В 2026 году минимальный надёжный набор невелик:

ФайлРазмерНазначение
favicon.svgлюбойсовременные браузеры; может подстраиваться под тёмную тему
favicon.ico16 + 32резервный вариант (старые браузеры)
apple-touch-icon.png180×180главный экран iOS
Иконки PWA (опционально)192, 512устанавливаемые веб-приложения

Размеры вроде 64×64, 96×96 и 128×128, которые рекомендуют старые руководства, устарели — их можно пропустить. .ico — это резервный вариант, а не основной файл: браузеры, поддерживающие SVG, будут предпочитать его.

Как сделать фавикон из логотипа

  1. Начните со знака, а не с полного логотипа — название не прочитается в размере вкладки.
  2. Упростите для крошечных размеров. Уберите мелкие детали, тонкие линии и едва заметные градиенты, которые исчезают в 16–32 пикселях. Отдавайте предпочтение смелым формам и высокому контрасту.
  3. Сохраните квадратную форму с небольшими отступами, чтобы значок не был зажат по краям вкладки.
  4. Экспортируйте набор — SVG, ICO и 180×180 PNG — из векторного исходника логотипа.
Шаг экспорта в редакторе LogoSaga, показывающий favicon.svg среди файлов логотипа.
Экспорт из векторного исходника даёт фавикон, который в точности соответствует логотипу.

Поскольку SVG — идеальный формат исходника, стоит разобраться в SVG или PNG для логотипа перед экспортом.

Подключение фавикона в HTML

Укажите путь к файлам в <head> страниц. Современный минимальный набор выглядит так:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Браузеры, поддерживающие SVG, используют его; остальные откатываются к ICO.

Бонус: фавикон, который подстраивается под тёмную тему

SVG-фавикон может нести собственные стили для тёмной темы. Встройте медиазапрос внутрь SVG, чтобы знак менял цвет вместе с темой браузера:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox и Edge это поддерживают; Safari пока нет, поэтому в качестве запасного варианта выбирайте цвета, которые остаются читаемыми в обеих темах.

Тестирование фавикона

Проверьте его в реальной вкладке браузера, в светлой и тёмной теме, а также на главном экране телефона. Поскольку браузеры жёстко кешируют фавиконы, сделайте жёсткое обновление после любого изменения — или сбросьте кеш, переименовав файл или добавив ?v=2. Если в размере вкладки он выглядит смазанно, упростите знак ещё сильнее: фавикон — честный тест того, насколько хорошо логотип уменьшается.

Если вы создаёте логотип в LogoSaga, экспорт уже включает favicon.svg вместе с SVG и PNG логотипа, поэтому фавикон всегда в точности соответствует знаку.

Создайте логотип с подходящим фавиконом

Часто задаваемые вопросы

Какого размера должен быть фавикон?

Подготовьте масштабируемый SVG плюс растровые PNG-размеры: 32×32 — современный стандарт для вкладки, 16×16 — классический мелкий размер, а 180×180 — иконка Apple touch icon. PWA также требуют 192×192 и 512×512.

В каком формате должен быть фавикон — SVG, PNG или ICO?

Используйте SVG для современных браузеров, ICO как резервный вариант для старых, и PNG для apple-touch-icon и размеров PWA. SVG масштабируется и даже может подстраиваться под тёмную тему; ICO покрывает старые браузеры.

Может ли фавикон меняться в тёмной теме?

Да, с SVG-фавиконом. Встройте медиазапрос prefers-color-scheme внутрь SVG, чтобы задать светлые и тёмные цвета. Safari пока это не поддерживает, поэтому выбирайте нейтральный цвет, который читается в обеих темах.

Почему мой фавикон не отображается или не обновляется?

Браузеры агрессивно кешируют фавиконы. После изменения сделайте жёсткое обновление страницы или сбросьте кеш, переименовав файл или добавив параметр вроде favicon.svg?v=2, и проверьте, правильно ли прописаны теги link в head страницы.

Источники