Когда вы открываете сайт, в браузере рядом с названием вкладки появляется маленькая иконка. Это и есть favicon (от слов favorite icon). Несмотря на скромный размер — всего 16×16 или 32×32 пикселя — он играет важную роль: делает сайт узнаваемым, помогает пользователям быстрее находить нужную вкладку и повышает доверие к ресурсу.
Если у сайта нет фавикона, браузер либо показывает пустой значок, либо подставляет свою стандартную иконку. В результате сайт теряет индивидуальность. Поэтому favicon стоит добавить даже на самый простой проект.
Как создать favicon
Сегодня не нужно вручную конвертировать картинки в нужный формат. Существует множество онлайн-генераторов, которые превращают любой логотип или картинку в набор иконок для разных устройств и браузеров. Примеры таких сервисов:
- favicon.cc
- realfavicongenerator.net
Обычно favicon делают в формате .ico, но современные браузеры поддерживают также PNG и SVG.
Аренда VPS/VDS — от ₽219/месяц
Почему выбирают VPS от AdminVPS:
✓ Дешевле физического сервера
✓ Более гибкий и мощный, чем обычный хостинг
✓ Бесплатная защита от DDoS и техподдержка 24/7
✓ Масштабируется под любые задачи
Виртуальный сервер VPS/VDS — ваш личный сервер для сайтов, магазинов, ботов и других проектов.
Как разместить favicon на сайте
- Подготовьте иконку в формате .ico (или .png, если сайт ориентирован только на современные браузеры).
- Загрузите файл в корневую папку сайта — туда же, где находятся index.html и другие основные файлы.
- Вставьте код подключения в секцию <head> вашего сайта:
Пример:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">После сохранения и обновления сайта иконка должна появиться в браузере. Иногда браузеры кешируют старую версию, поэтому стоит очистить кеш или открыть сайт в режиме инкогнито.
Типичные ошибки при установке favicon
- Неверное расположение файла. Иконку нужно класть именно в корень сайта, а не в подпапку.
- Неправильное расширение. Старые браузеры требуют .ico, а современные поддерживают .png и .svg. Лучше использовать несколько форматов.
- Нет кода в <head>. Если не прописать <link rel="icon">, браузер может не отобразить иконку.
- Слишком большой или маленький размер. Оптимальный вариант — 16×16 или 32×32 пикселя. Для современных экранов лучше использовать favicon в разных разрешениях.
- Кеш браузера. После замены favicon он может долго не обновляться. Решение — очистить кеш или дождаться автоматического обновления.
Зачем уделять внимание фавикону
Фавикон — мелочь, которая влияет на восприятие сайта. Он помогает бренду быть заметным и запоминающимся, особенно если у пользователя открыто много вкладок. Для интернет-магазинов и корпоративных порталов это ещё и элемент доверия: сайт без favicon выглядит недоработанным.
Поэтому, даже если у вас небольшой проект, не откладывайте установку иконки — это простой шаг, который делает сайт более профессиональным и удобным.
Код favicon с расширенной поддержкой PNG и SVG для современных браузеров
Вот готовый универсальный код для вставки favicon в <head> вашего сайта. Он учитывает современные форматы и работает в разных браузерах и на разных устройствах:
Пример кода:
**```html
<!-- Классический favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Современные форматы -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Для Apple устройств -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Manifest для PWA -->
<link rel="manifest" href="/site.webmanifest">
```**Здесь:
- favicon.ico — нужен для совместимости со старыми браузерами;
- PNG 16×16 и 32×32 — стандарт для современных браузеров;
- SVG — идеален для новых браузеров, так как масштабируется без потери качества;
- Apple Touch Icon — используется на iPhone и iPad при добавлении сайта на экран;
- site.webmanifest — пригодится для Progressive Web App и Android-устройств.
Как сгенерировать favicon во всех форматах
Шаг 1. Подготовьте изображение
Возьмите логотип или символ вашего проекта в хорошем качестве. Лучше всего — квадратное изображение не менее 512×512 пикселей.
Шаг 2. Перейдите на генератор
Один из самых удобных сервисов — RealFaviconGenerator.net.
Он создаёт полный набор иконок: .ico, .png, .svg, Apple Touch Icon, Android-иконки и даже манифест PWA.
Шаг 3. Загрузите изображение
На главной странице нажмите кнопку «Select your Favicon image» и загрузите логотип.
Шаг 4. Настройте параметры
Сервис предложит выбрать:
- как иконка будет обрезаться или вписываться в квадрат;
- цвет фона для Apple Touch Icon;
- настройки манифеста для Android.
Обычно можно оставить всё по умолчанию, но лучше проверить, как favicon будет выглядеть в разных браузерах и устройствах.
Шаг 5. Скачайте архив
После генерации вы получите архив со всеми нужными файлами:
- favicon.ico (для старых браузеров),
- favicon-16x16.png и favicon-32x32.png,
- apple-touch-icon.png,
- favicon.svg,
- site.webmanifest,
- плюс код для вставки в <head>.
Шаг 6. Загрузите файлы на сайт
Разместите все полученные файлы в корневую папку сайта.
Шаг 7. Добавьте код в <head>
Вставьте код, который сервис выдаст после генерации. Обычно он выглядит так, как я привёл в предыдущем сообщении (с .ico, .png, .svg, Apple Touch Icon и манифестом).
Шаг 8. Проверьте работу
- Обновите сайт в браузере в режиме инкогнито.
- Зайдите с телефона, чтобы проверить Apple Touch Icon.
- Используйте кнопку «Check your favicon» на сайте realfavicongenerator.net, чтобы убедиться, что всё работает.
Совет
Чтобы избежать проблем с кешированием, при обновлении favicon меняйте имя файлов (например, favicon-v2.png), иначе браузеры могут продолжать показывать старую версию.
Частые проблемы с favicon и как их решить
1. Favicon не отображается в браузере
Причина: файл не в корне сайта или отсутствует код в <head>.
Решение: проверьте путь к файлу и убедитесь, что код вида:
<link rel="icon" href="/favicon.ico" type="image/x-icon">действительно находится внутри <head>.
2. Браузер показывает старую иконку
Причина: кеш браузера. Даже если вы заменили favicon, браузер может хранить старый вариант.
Решение: очистите кеш или добавьте к ссылке версию:
<link rel="icon" href="/favicon.ico?v=2">3. Favicon выглядит размытым
Причина: загружено слишком маленькое изображение.
Решение: используйте исходное изображение не меньше 512×512 пикселей и генерируйте набор размеров.
4. Иконка не отображается на iPhone или iPad
Причина: нет Apple Touch Icon.
Решение: добавьте строку:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">5. На Android-смартфонах favicon не подтягивается на экран
Причина: нет файла site.webmanifest.
Решение: сгенерируйте его через RealFaviconGenerator и разместите в корне сайта.
6. На Windows-системах иконка не отображается в плитках (tiles)
Причина: нет мета-тегов для Windows tiles.
Решение: добавьте в <head>:
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">7. Установили favicon в PNG, но в старом браузере он не работает
Причина: старые версии IE требуют .ico.
Решение: всегда добавляйте favicon.ico для совместимости.
Совет
В 2025 году стоит использовать комплект из ICO, PNG, SVG, Apple Touch Icon и manifest.json — это полностью закроет вопросы совместимости и сделает ваш сайт современным и удобным.
Заключение
Favicon может показаться мелкой деталью, но именно из таких деталей складывается образ сайта. Иконка во вкладке делает ресурс узнаваемым, помогает пользователю быстрее ориентироваться в десятках открытых страниц и усиливает доверие к бренду.
Добавить favicon просто: достаточно один раз сгенерировать набор иконок в разных форматах, загрузить их на сайт и прописать код в . Важно лишь учесть нюансы совместимости и не забывать про кеш браузера.
Если уделить этому шагу внимание, ваш сайт будет выглядеть профессионально и аккуратно — а это напрямую влияет на восприятие компании клиентами.
Читайте в блоге:
- Как добавить иконку (favicon) на сайт в HTML
- 7 базовых принципов юзабилити интернет-магазина
- Какие сайты можно создать на Joomla
