Главная›Инструменты›Устройства и утилиты›Утилиты›Создать фавикон онлайн

Создать фавикон онлайн

Впишите букву, слово или эмодзи, подберите фон, форму и шрифт: иконка рисуется на глазах в реальных размерах вкладки. Скачивается набор PNG от 16 до 512 пикселей, favicon.ico, SVG, манифест и готовый код для head.

Что на иконке

Буквы или эмодзиДо трёх букв: на 16 пикселях лучше всего читается одна.

Шрифт

Цвет знака

#ffffff

Жирный

Размер знака

66 %

Сдвиг по вертикали

0 %

Что рисует конструктор и что лежит в наборе

Конструктор рисует иконку сайта с нуля: буква, две-три буквы, слово или эмодзи на фоне из одного цвета, градиента или без фона, в форме скруглённого квадрата, квадрата или круга, с обводкой по желанию. Шрифтов десять: пять системных, от гротеска до плакатного Impact, и пять рукописных, которые подгружаются с сайта и вшиваются в SVG. Размер знака подбирается ползунком, а если буквы не влезают по ширине, конструктор сам уменьшает кегль.

Предпросмотр показывает иконку в 128, 64, 48, 32 и 16 пикселей и на светлой и тёмной вкладке браузера, рядом стоит контраст знака и фона по формуле WCAG с подсказкой, когда буква сольётся с фоном. Набор скачивается одним архивом: favicon.ico с тремя размерами внутри, PNG от 16 до 512 пикселей, favicon.svg, site.webmanifest, код для head и короткая памятка, куда что класть. Отдельно можно забрать только ICO, SVG или PNG 512.

Адресная строка браузера с иконкой сайта — Вкладка браузера: на иконку отводится 16 пикселей, поэтому знак должен быть крупным и простым. Фото: RHo (WMF), CC BY-SA 4.0.

Файл	Размер	Кому нужен
favicon.ico	16, 32, 48	вкладка браузера, закладки, старые программы
favicon.svg	любой	Chrome, Firefox, Edge: резкая иконка на любом экране
favicon-120x120.png	120	Яндекс, иконка в результатах поиска
favicon-96x96.png, 192	96, 192	Google, размеры кратны 48
apple-touch-icon.png	180	iPhone и iPad, ярлык на экране
android-chrome-*.png	192, 512	Android и установка сайта как приложения
site.webmanifest	текст	название, цвет и список иконок для Android

История: от favicon.ico в Explorer до SVG

Фавикон придумали в Internet Explorer 5 в 1999 году: браузер сам запрашивал файл favicon.ico из корня сайта и показывал его рядом с закладкой в «Избранном». Формат ICO пришёл из Windows: это контейнер, в который складывают несколько размеров одной картинки, а с Windows Vista внутрь можно класть и PNG. Веб-мастера тех лет считали запросы к favicon.ico в логах сервера и по ним прикидывали, сколько людей добавили сайт в закладки.

Стандарт закрепил тег link с типом icon, и иконки перестали зависеть от одного имени файла: появились PNG разных размеров, в 2007 году iPhone принёс apple-touch-icon для ярлыка на экране, Android добавил манифест с иконками 192 и 512 пикселей. Векторные фавиконы в SVG понимает Firefox с 2015 года и Chrome с 2020 года, Safari по-прежнему берёт растровые файлы. Поисковики показывают иконку рядом со сниппетом: Яндекс запрашивает квадрат 120×120, Google принимает размеры, кратные 48.

Пиксели экрана под увеличением — Пиксели экрана: на 16×16 точек помещается одна крупная буква, мелкие детали пропадают. Фото: ALexL33, CC BY-SA 3.0.

Античная мозаика — Мозаика: иконка собирается из крупных цветных пятен, как древнее панно из камней. Фото: Викисклад, общественное достояние.

Как собрать иконку и подключить её к сайту

Начните с готового варианта из ряда над формой, впишите свою букву или выберите эмодзи из палитры, подберите цвет фона из готовых сочетаний или задайте свой. Смотрите на ряд размеров: если на 16 пикселях знак превращается в пятно, уменьшите число букв, увеличьте размер знака или уберите обводку. Нажмите «Скачать набор ZIP», распакуйте файлы в корень сайта и вставьте строки из блока «Код для head» в шаблон страницы.

Готовый логотип в набор размеров переводит генератор фавикона, подобрать пару цветов с нужным контрастом помогает конвертер цветов и контраст, а найти символ вне палитры можно в каталоге HTML-иконок и эмодзи. Блок «Проверить фавикон сайта» показывает, какую иконку сейчас отдают для домена сервисы Яндекса и Google: так видно, подхватил ли поиск новый файл.

Знак	буквы или эмодзи
Шрифтов	10
Формы	квадрат, скруглённый, круг
Фон	цвет, градиент, прозрачный
Размеры PNG	16–512
Векторный файл	favicon.svg
Проверка	контраст по WCAG
На сервер	ничего не уходит

Как пользоваться

До трёх букв, слово или эмодзи из палитры; шрифт, жирность, размер и сдвиг по вертикали настраиваются рядом.
Цвет, градиент или прозрачный фон, скруглённый квадрат, квадрат или круг, обводка и готовые сочетания цветов.
Иконка показана в 16, 32, 48 и 128 пикселей и на светлой и тёмной вкладке браузера, рядом стоит оценка контраста.
ZIP со всеми размерами, favicon.ico, favicon.svg, site.webmanifest и кодом для head или отдельные файлы.

Частые вопросы

Какие размеры фавикона нужны сайту

Браузеры берут для вкладки 16×16 и 32×32, они лежат в favicon.ico и отдельными PNG. Яндекс показывает фавикон в результатах поиска из файла 120×120, Google берёт квадрат, кратный 48 пикселям, для этого в наборе есть 96×96 и 192×192. Устройства Apple ставят на экран apple-touch-icon 180×180, Android и установка сайта как приложения читают 192×192 и 512×512 из site.webmanifest. Конструктор собирает все эти файлы из одного рисунка, а favicon.svg остаётся резким в любом размере.

Как подключить фавикон на сайте

Положите файлы из архива в корень сайта и вставьте строки из блока «Код для head» между тегами head. Файл favicon.ico в корне браузеры и роботы находят даже без ссылки, остальные форматы подключаются тегами link. После загрузки откройте сайт в новой вкладке: браузеры держат старую иконку в кэше, поэтому иногда помогает добавить к адресу файла параметр с версией. В поиске Яндекса и Google новая иконка появляется после переобхода, на это уходит от нескольких дней до пары недель.

Почему фавикон не отображается в Яндексе

Чаще всего файл лежит по адресу, который закрыт в robots.txt, отдаёт редирект или неверный тип содержимого. Проверьте, что картинка открывается напрямую по своему адресу, а в теге link указан полный путь. Яндекс хочет квадрат 120×120 в формате PNG, ICO, GIF или JPEG и обновляет иконку в выдаче с задержкой. Блок «Проверить фавикон сайта» ниже показывает, какую иконку сейчас отдают сервисы Яндекса и Google для вашего домена.

Что выбрать: буквы, эмодзи или картинку

На 16 пикселях читается одна крупная буква или простая фигура, две буквы уже требуют широкого квадрата, три помещаются только на больших размерах. Эмодзи рисуется системным шрифтом устройства, поэтому на iPhone и Windows он выглядит чуть по-разному, в PNG и ICO попадает тот вариант, который видите вы. Если у вас есть готовый логотип, набор размеров из него собирает генератор фавикона, а здесь удобно сделать иконку без логотипа.

Зачем нужен SVG-фавикон

SVG не зависит от размера: одна и та же иконка резкая и на вкладке, и на экране с высокой плотностью пикселей, а весит меньше килобайта. Его понимают Chrome, Firefox, Edge и другие браузеры на движке Chromium, Safari пока показывает растровые файлы, поэтому в наборе остаются PNG и ICO. Рукописный шрифт вшивается в SVG вместе с файлом, эмодзи в SVG рисуется шрифтом того устройства, где открыт сайт.

Куда уходят мои данные

Рисунок, файлы PNG, ICO, SVG и архив собираются скриптом на странице, на сервер ничего не отправляется. Единственное исключение — блок проверки чужого фавикона: введённый домен уходит в сервисы Яндекса и Google, которые отдают картинку иконки, и запрос делает ваш браузер напрямую.

Ещё утилиты

Фавикон и свой IP, конвертер цветов с проверкой контраста, ссылка WhatsApp, расчёты битрейта и PPI, компас и линейка — в разделе 83 утилиты.

Утилиты Проверки сайта