Фавикон в HTML

Сессия про Head собрала стартовый блок метаданных с charset, viewport, title и ссылкой на таблицу стилей. Фавикон — ещё одна практичная ссылка в head: крошечная иконка, которая появляется на вкладке браузера рядом с заголовком страницы. Она помогает узнавать ваш сайт среди плотных рядов вкладок, закладок и некоторых списков истории. Её не рисуют CSS-текстом — вы указываете браузеру путь к небольшому файлу изображения.

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

Фавикон — это ресурс иконки сайта. Браузеры загружают его, потому что ваш HTML (или догадка по умолчанию вроде /favicon.ico) говорит, куда смотреть. Современные страницы обычно объявляют его явно через элемент link, чтобы путь и тип файла были ясны. Иконка должна оставаться простой и достаточно квадратной, чтобы читаться в очень маленьком размере.

Прямой ответ

В head документа добавьте link с rel="icon" и href, который указывает на файл иконки. Частые варианты: favicon.ico, PNG вроде images/favicon.png или SVG-иконка. Путь должен разрешаться так же, как другие относительные URL (см. File Paths). После смены файла ждите кэширования браузером — жёсткое обновление или приватное окно часто показывают новую иконку быстрее обычной перезагрузки.

Классическая ссылка .ico

Многие учебники по-прежнему начинают с favicon.ico в той же папке, что и HTML-файл. Необязательный атрибут type может помочь браузерам понять ресурс.

Читаем классический образец

• link живёт в head рядом с title и другими метаданными
• rel="icon" помечает ресурс как фавикон
• href="favicon.ico" предполагает, что файл иконки лежит рядом с этой HTML-страницей
• type="image/x-icon" — распространённая MIME-подсказка для файлов .ico
• Без верного пути вкладка может оставить иконку по умолчанию или пустую

Варианты PNG и SVG

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

Выбор стартового формата

• .ico — традиционный, широко узнаваемый старыми инструментами
• .png — простой для новичков, которые уже экспортируют PNG
• .svg — чёткий векторный вариант, когда браузеры аудитории его поддерживают
  В первый день не нужны все форматы. Отправьте одну ясную иконку с верной ссылкой, а позже расширьте до apple-touch или пакетов нескольких размеров, если проект этого требует.

Пути важны не меньше разметки

Если href указывает на отсутствующий файл, запрос фавикона возвращает 404, и иконка вкладки тихо не появляется. Проверьте имена папок, написание и то, не переехал ли HTML без иконки. Относительные пути считаются относительно URL HTML-документа, а не от ощущения, «где файл должен быть».

Кэш может скрыть обновления

Браузеры часто агрессивно кэшируют фавиконы. Вы меняете favicon.png, перезагружаете и всё ещё видите вчерашний знак. Это не всегда значит, что HTML неверен. Попробуйте жёсткое обновление, приватное/инкогнито-окно или временно переименуйте файл и обновите href, чтобы браузер запросил свежий URL. Приучите к этой привычке рано, чтобы ученики в панике не удаляли рабочую разметку.

Держите иконки маленькими и ясными

Огромное фото, сжатое во вкладку, становится нечитаемым пятном. Предпочитайте простой знак, высокий контраст и квадратный холст. Фавикон — помощь в узнавании, а не второй hero-баннер. Детальный брендинг оставьте для тела страницы.

Куда принадлежит ссылка

Элементы link фавикона ставьте в head. Размещение в body — неверное место для иконок уровня документа. Вы уже знаете, что head — для метаданных и ссылок на ресурсы; фавиконы следуют тому же правилу.

Практика в редакторе

1. Положите маленькую квадратную иконку рядом с HTML-файлом или внутри папки images.
2. Добавьте <link rel="icon" href="..."> внутрь head с подходящим путём.
3. Откройте страницу и посмотрите на вкладку браузера рядом с текстом заголовка.
4. Намеренно сломайте путь, перезагрузите и заметьте, как иконка исчезает или возвращается к прежней — затем исправьте.
5. Замените файл иконки и, если старая залипла, откройте приватное окно или сделайте жёсткое обновление, чтобы подтвердить новый рисунок.

Лёгкие ошибки

• Ставить link фавикона в body вместо head
• Неверный href, из‑за чего иконка отдаёт 404, пока HTML страницы выглядит нормально
• Ждать мгновенного визуального обновления, пока старый фавикон в кэше
• Использовать огромную фотографию вместо маленького простого квадратного знака
• Забыть загрузить файл иконки, когда деплоите только HTML
• Перепутать rel="stylesheet" с rel="icon" и удивляться, почему CSS или иконка вкладки ведут себя странно

Итог

• Фавиконы связывают в head через rel="icon"
• Указывайте href на реальный файл .ico, .png или .svg
• Верные пути и спокойные проверки кэша решают большинство жалоб на «пропавшую иконку»
• Держите иконки маленькими и узнаваемыми в размере вкладки
• Одна рабочая ссылка лучше кучи неиспользуемых форматов иконок