Генератор favicon

Что делает инструмент

Генератор favicon превращает букву, эмодзи или ваш логотип во все иконки, которые нужны современному сайту. Он отрисовывает иконку в каждом размере, упаковывает favicon.ico, пишет манифест веб-приложения и выдаёт теги <link> для вставки в <head> страницы. Всё скачивается одним ZIP-архивом.

Начать с текста — самый быстрый способ получить аккуратную иконку: введите от одного до трёх символов или эмодзи, выберите цвета, шрифт и форму (квадрат, скруглённая или круг). Для текстовых иконок также создаётся масштабируемый favicon.svg, который остаётся чётким в любом размере и на экранах высокой плотности.

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

1. Выберите источник: Текст или Изображение. Для изображения нажмите Выбрать изображение… и укажите квадратный PNG, SVG или JPG.
2. Задайте Форму и включите Заливку фона, чтобы поместить иконку на цветную плашку, или выключите, чтобы оставить фон прозрачным.
3. Введите Название сайта: это подпись под иконкой, когда кто-то добавляет ваш сайт на главный экран телефона; оно записывается в site.webmanifest (Android) и в тег apple-mobile-web-app-title (iOS). Затем укажите Папку иконок, куда вы загрузите файлы, — обычно /.
4. Проверьте предпросмотр: иконку 16 px люди видят на вкладке браузера.
5. Нажмите Скачать ZIP, загрузите файлы на сайт и вставьте HTML в <head>.

Пример

С настройками по умолчанию получаются такие теги:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Советы

• Браузеры агрессивно кэшируют favicon. После замены иконки откройте страницу в приватном окне, чтобы увидеть изменения.
• iOS игнорирует прозрачность в Apple touch icon и заливает её чёрным, поэтому для аккуратной иконки на домашнем экране оставляйте фон залитым.