Сделать фавикон онлайн — от логотипа до готового кода за пять шагов

Загрузите логотип или любое изображение, обрежьте его до квадрата, выберите фон и отступ для Android — и скачайте готовый архив. Мастер ведёт по пяти шагам и на каждом показывает живой предпросмотр: во вкладке браузера, на домашнем экране iPhone и под масками Android. Регистрация не нужна, файл никуда не загружается.

Нет. Кадрирование, ресайз во все размеры, сборка ICO и упаковка в ZIP выполняются локально в браузере на JavaScript. Файл не уходит ни на сервер Neorank, ни куда-либо ещё. Проверить просто: отключите интернет сразу после загрузки страницы — инструмент продолжит работать.

Пять файлов и один манифест. favicon.ico с кадрами 16, 32 и 48 пикселей — обязательный запасной вариант для старых браузеров, почтовых клиентов и RSS-читалок. apple-touch-icon.png 180×180 — иконка на домашнем экране iOS. icon-192.png и icon-512.png — для Android и PWA. site.webmanifest, который на них ссылается. Плюс favicon.svg, если исходник векторный. Устаревшие browserconfig.xml с плитками Windows и mask-icon.svg для закреплённых вкладок Safari в набор не входят: обе технологии упразднены.

Одного размера не хватает, потому что значок показывается в разных местах. Вкладка браузера берёт 16 или 32 пикселя, панель задач Windows — 48, выдача Google — от 48 и выше, домашний экран iPhone — 180, Android и PWA — 192 и 512. Поэтому в паке и лежит набор: каждый файл отвечает за своё место, а favicon.ico содержит сразу три мелких кадра в одном файле.

Квадратное изображение от 512×512 пикселей, а лучше SVG. Из большого исходника корректно получаются все размеры, включая 512 для Android. Из маленького файла крупные иконки выйдут мутными — инструмент об этом предупредит. Лучше всего работает простой контрастный знак или монограмма: фотография или логотип с тонкими линиями на 16×16 превращается в неразличимое пятно.

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

Загрузите SVG и включите перекраску в настройках состава пака: в favicon.svg добавится медиа-запрос prefers-color-scheme, и во вкладке с тёмным оформлением значок сменит цвет. Возможность доступна только для одноцветного знака — у многоцветного логотипа общая перекраска слила бы цвета в один и испортила рисунок, поэтому инструмент её блокирует и объясняет, почему. Safari медиа-запросы внутри фавикона игнорирует: там останется светлый вариант.

Четыре причины покрывают почти все случаи. Первая — кэш: браузеры держат значок неделями, и обычная очистка кэша страницы не помогает. Вторая — неверный путь: файл лежит не там, куда указывает тег, особенно если сайт в подкаталоге. Третья — файл не залит на сервер вовсе. Четвёртая — сервер отдаёт неверный тип содержимого. Начинайте с проверки: откройте адрес файла напрямую в браузере.

Добавьте версию в путь: favicon.ico?v=2 — и меняйте цифру при каждой замене значка. Это самый надёжный способ, потому что для браузера адрес становится новым. В генераторе есть галочка «Добавить версию в пути»: она проставит параметр во все теги и манифест сразу. Помогает также открыть адрес файла напрямую и обновить страницу с очисткой кэша.

На WordPress проще всего через «Внешний вид → Настроить → Свойства сайта → Иконка сайта»: система сама создаст нужные размеры из загруженного PNG, но полный пак с манифестом придётся положить в корень по FTP и добавить теги в шаблон. В Tilda иконка задаётся в настройках сайта, а дополнительные теги вставляются в блок HTML-кода в head. В Битриксе файлы кладутся в корень сайта, а теги — в шаблон, обычно в header.php.

Android накладывает на иконки PWA собственную маску: обрезает их в круг, сквиркл или скруглённый квадрат — форму решает лаунчер конкретного телефона, а не вы. Спецификация W3C гарантирует видимость только центральных 80% по диаметру, а реальные лаунчеры обрезают ещё плотнее, вплоть до 66%. Поэтому maskable-версия рисуется с запасом по краям и непрозрачным фоном на весь холст: важная часть логотипа остаётся видимой при любой форме.

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

Базовый манифест нужен в любом случае: без него браузер не поймёт, какую иконку показать при добавлении сайта на домашний экран телефона. Но по умолчанию инструмент выставляет display: browser — сайт остаётся обычным сайтом в браузере. Режим отдельного приложения включается в расширенных настройках осознанно, если вам действительно нужно поведение PWA.

Начиная с iOS 26 Safari перестал красить верх и низ экрана по мета-тегу theme-color и использует вместо него фоновый цвет самой страницы. В Chrome и большинстве браузеров на Android тег работает по-прежнему, поэтому оставлять его стоит. Но для полноценной поддержки iOS 26 и новее фон страницы нужно задавать отдельно в CSS.

По умолчанию все файлы пака идут в корень сайта — туда же, где лежит index.html. Плоская структура выбрана намеренно: она исключает самую частую ошибку, когда папку с иконками кладут не на тот уровень. Теги для head лежат в архиве файлом code.html и показываются прямо на последнем шаге — их нужно вставить в каждую страницу сайта, обычно через общий шаблон.

Напрямую фактором ранжирования значок не является. Но Google показывает его в мобильной выдаче рядом со сниппетом, и узнаваемая иконка повышает кликабельность, а поведенческие сигналы поисковики учитывают. Требования Google к значку простые: он должен быть квадратным, размером кратным 48 пикселям и доступным для сканирования — всем этим условиям пак удовлетворяет.