Как создать favicon для сайта

Favicon — это крошечная иконка во вкладке браузера, в закладках, на главном экране iPhone и в результатах поиска Google. Раньше для этого приходилось жонглировать десятком размеров; сегодня хватает четырёх файлов на все платформы.

Какие файлы реально нужны

favicon.ico с размерами 16, 32 и 48 px — старые браузеры, ярлыки Windows, краулер Google.
apple-touch-icon.png размером 180 px — главный экран iOS.
icon-192.png и icon-512.png — Android и веб-манифест (устанавливаемые сайты, splash-экраны).
site.webmanifest — ссылается на оба PNG.

Сгенерировать всё сразу

Нарисуйте квадратный логотип. Простые формы и один-два цвета хорошо читаются даже в 16 px; текст — нет.
Откройте Генератор favicon и перетащите логотип — SVG идеален, потому что каждый размер отрисовывается чётко; подойдёт и PNG на 512 px.
Скачайте ZIP и скопируйте файлы в корень сайта.

Генератор faviconСоздайте favicon.ico (16/32/48), apple-touch-icon и PNG-иконки из PNG, JPG, WebP или SVG. Все размеры в одном ZIP, генерация в браузере.

Добавьте это в <head>:

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Частые проблемы

Логотип не квадратный. Генератор центрирует его с прозрачными полями; для более плотной иконки сначала обрежьте изображение до квадрата.
Показывается старый favicon. Браузеры агрессивно кешируют иконки. Смените имя файла или добавьте ?v=2 к ссылке.
Тёмные вкладки. Чёрный логотип исчезает на тёмной теме браузера. Добавьте ему заливку-подложку.

Конвертировать SVG в PNG онлайнКонвертируйте векторные SVG в PNG любого размера прямо в браузере. Задайте ширину, сохраните прозрачность, обработайте много файлов и скачайте ZIP.

Опубликовано 2026-09-21