Генератор favicon — favicon.ico и набор иконок приложения

Создаёт иконки всех размеров для вкладки браузера, главного экрана телефона и результатов поиска и упаковывает их в один ZIP-файл.

Файл не отправляется на сервер — обработка выполняется только в браузере этого устройства

Текст или эмодзи (1–2 символа) Цвет текста

Толщина

Форма

Заливка фона Цвет фона

Внутренний отступ 12%

Информация о приложении (site.webmanifest)

Название сайта Короткое имя (под иконкой на главном экране, до 12 символов) Цвет темы (цвет адресной строки на мобильном)

Мой сайт

Новая вкладка

180 · iPhone

192 · Android

512

HTML-код для вставки в <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#3182f6">

Указано для случая, когда файлы из ZIP загружены в корневой каталог сайта (/). Такой же код также содержится в head.html.

Как использовать «Создать favicon»

1Загрузите изображение или задайте текст/эмодзи и цвет.
2Проверьте вид для каждого размера в предпросмотре.
3Нажмите «Скачать ZIP» и вставьте указанный HTML-код в <head>.

Часто задаваемые вопросы

Какое исходное изображение подходит лучше всего?

Лучше всего подходит квадратный PNG или SVG размером от 512×512. В маленьком размере хорошо видны только простые формы.

Разве не достаточно одного favicon.ico?

Достаточно для старых браузеров, но для экрана «Домой» на iPhone (180 px) и Android (192 и 512 px) нужен отдельный PNG.