Как сделать иконку сайта в HTML?

Иконка вкладки браузера (favicon) подключается тегом `<link rel="icon" href="/favicon.png" type="image/png">` в `<head>` страницы - без него браузер либо сам ищет файл favicon.ico в корне сайта, либо показывает заглушку. Проще всего сделать один квадратный PNG размером 512х512 пикселей и указать путь к нему явно в этом теге.

Полный набор на 2026 год выглядит так: `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` для современных браузеров - векторная иконка не размывается на ретина-экранах, запасной `<link rel="icon" href="/favicon.png" sizes="32x32">` для браузеров без поддержки SVG, и `<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">`. Именно последняя иконка появится, если пользователь iPhone добавит сайт на домашний экран, и файл для неё нужен без прозрачности: iOS кладёт под иконку белую подложку, и прозрачные края смотрятся неряшливо.

Готовый набор удобно сгенерировать сервисом вроде realfavicongenerator.net: он сам нарежет один макет на нужные размеры и форматы и выдаст готовые теги для вставки в `<head>`. Частая засада - браузер жёстко кэширует favicon и может показывать старую иконку даже после замены файла на сервере. Помогает добавить версию в путь (`favicon.png?v=2`) или открыть сайт в режиме инкогнито, чтобы проверить, действительно ли иконка обновилась.

Если сайт делается не с нуля, а на конструкторе или CMS, там обычно есть отдельное поле для загрузки favicon в настройках - лезть в код не нужно вообще, теги подставляются автоматически при сохранении.