Генератор фавиконов — ICO, PNG и Apple Touch Icon
Превратите одно изображение в полный набор фавиконов: favicon.ico, значки PNG, apple-touch-icon и манифест веб-приложения.
Apple-touch-icon всегда непрозрачный. Если название приложения пустое, манифест использует имя файла изображения.
Предпросмотр
Файлы в ZIP
Как сделать фавикон
- Выберите квадратное изображение, желательно не менее 512 на 512 пикселей, в формате PNG, JPG, WebP или SVG.
- Выберите, как вписывать неквадратные изображения: contain дополняет их цветом фона, cover обрезает по центру.
- Задайте цвет фона и темы, отступы и то, сохранять ли прозрачный фон для маленьких значков.
- Введите название и короткое имя приложения для манифеста, затем проверьте превью в реальном времени.
- Скачайте ZIP со всеми файлами или отдельно favicon.ico и apple-touch-icon.png и скопируйте фрагмент HTML.
Когда пригодится
- Создание фавикона для нового сайта без открытия графического редактора.
- Замена отсутствующего или размытого фавикона, который отображается как пустой значок страницы во вкладках.
- Добавление apple-touch-icon, чтобы сайт хорошо выглядел при сохранении на главный экран iPhone.
- Подготовка значков Android и манифеста для прогрессивного веб-приложения.
- Превращение логотипа в аккуратный набор значков с одинаковыми отступами для каждого размера.
Частые вопросы
Какие размеры создаёт генератор?
Он записывает favicon.ico с изображениями 16, 32 и 48 пикселей внутри, отдельные файлы favicon-16x16.png и favicon-32x32.png, apple-touch-icon.png размером 180 на 180 и значки Android 192 и 512 пикселей.
Почему apple-touch-icon всегда непрозрачный?
iOS не показывает прозрачность в значке на главном экране, поэтому прозрачный PNG получил бы чёрный или белый блок позади. Генератор заполняет этот файл вашим цветом фона и оставляет маленькие размеры фавикона прозрачными, если вы хотите.
Что указать в манифесте?
Полное название сайта или приложения и короткое имя примерно из двенадцати символов, потому что именно короткое имя появляется под значком на телефоне. Цвет темы окрашивает панель браузера, а цвет фона заполняет экран запуска.
Можно ли использовать логотип SVG?
Да. SVG растеризуется шириной 512 пикселей, а его пропорции берутся из атрибутов ширины и высоты или из viewBox, поэтому квадратный логотип остаётся квадратным.
Куда положить файлы на сервере?
Поместите их в корень сайта рядом с index.html, чтобы пути из фрагмента, такие как /favicon.ico и /site.webmanifest, работали. Если вы храните их в подпапке, измените значения href во фрагменте.
Моё изображение куда-нибудь загружается?
Нет. Изображение декодируется и рисуется на холсте внутри браузера, а ZIP собирается в памяти, поэтому ничего не отправляется на сервер.