Генератор фавиконов: создание favicon.ico, PNG и Apple touch icon
Создавайте favicon.ico, PNG-фавиконы, Apple touch icon и манифест веб-приложения из изображения или текста в браузере вместе с HTML-тегами для копирования.
Перетащите изображение сюда или выберите его
PNG, JPG, WebP, GIF (первый кадр), BMP или SVG. Лучше всего подходит квадратное изображение размером не менее 512 × 512 пикселей.
Текст рисуется шрифтами, установленными на этом устройстве, поэтому буквы и эмодзи могут выглядеть иначе на другом компьютере или телефоне. Скачанные файлы PNG и ICO сохраняют тот вид, который вы видите здесь.
Предпросмотр
Размеры 16, 32 и 48 показаны в реальную величину, а более крупные иконки — уменьшенными. Шахматный узор обозначает прозрачные области.
Во вкладке браузера
Упрощённая панель вкладок в светлой и тёмной теме. Проверьте, что иконка видна в обеих: тёмный логотип на прозрачном фоне может потеряться на тёмной панели вкладок.
Файлы
Некоторые устройства Apple показывают прозрачные части иконки на главном экране чёрными, поэтому apple-touch-icon.png сохраняется без прозрачности: прозрачные области заполняются этим цветом. Настройка формы к нему не применяется, потому что iPhone и iPad сами скругляют углы иконок на главном экране.
Используется в HTML-тегах и манифесте. «/» означает корневую папку сайта.
Настройки фона, формы, отступа и обрезки к favicon.svg не применяются.
Браузеры могут использовать цвет темы, чтобы окрасить адресную строку или заголовок окна. Цвет фона приложения показывается, пока запускается установленное веб-приложение.
Чтобы начать, выберите изображение или переключитесь на текст.
Содержимое site.webmanifest
Примечания
- Загрузите файлы в корневую папку сайта (папку, где находится главная страница) или укажите выше другую папку, чтобы пути в HTML и манифесте совпадали.
- favicon.ico содержит изображения 16 × 16, 32 × 32 и 48 × 48, хранящиеся в формате PNG. Такой файл читают современные браузеры и Windows Vista или новее; некоторые очень старые программы читают только несжатые изображения иконок.
- Маленькие исходные изображения, например 64 × 64, увеличиваются для крупных иконок и выглядят размытыми. По возможности используйте изображение не менее 512 × 512 пикселей или SVG-файл.
- Текстовые иконки используют шрифты, установленные на устройстве, на котором вы их создаёте. Файлы PNG и ICO сохраняют этот вид, но если создать иконку заново на другом устройстве, результат может отличаться.
- SVG-файлы рисует ваш браузер. Изображения, шрифты или стили, которые SVG-файл подгружает из других файлов или с других сайтов, не загружаются и могут отсутствовать на иконках.
- Браузеры долго хранят фавиконы в кэше. После замены фавикона старый может ещё некоторое время отображаться; помочь может принудительное обновление страницы, приватное окно или изменённое имя файла в HTML.
- Изображения и текст обрабатываются в вашем браузере и не отправляются в LeedyBox.
Как пользоваться
- Выберите «Изображение» и укажите или перетащите свой логотип либо выберите «Текст или эмодзи» и введите до трёх символов.
- Настройте фон, форму и отступ и проверьте предпросмотр и вкладку браузера в светлой и тёмной теме.
- При желании укажите название сайта, короткое название, цвет темы и папку, где будут храниться файлы.
- Нажмите «Создать файлы фавикона», затем скачайте файлы по одному или все вместе в архиве favicon-package.zip.
- Загрузите файлы на свой сайт и вставьте скопированные HTML-теги в раздел head своих страниц.
Частые вопросы
Загружаются ли мои изображения на сервер?
Нет. Изображение или текст рисуется и преобразуется в вашем браузере, а файлы создаются на вашем устройстве. В LeedyBox ничего не отправляется. При загрузке страницы скачивается только библиотека ZIP, с самого leedybox.com.
Какие изображения можно использовать и есть ли ограничения?
Файлы PNG, JPG, WebP, GIF (первый кадр), BMP и SVG. SVG-файлы могут быть размером до 10 МБ. Очень большие фотографии (больше примерно 50 мегапикселей) могут не обработаться на телефонах, потому что им нужно много памяти. Самый чёткий результат дают квадратное изображение не менее 512 × 512 пикселей или SVG-файл.
Почему мой фавикон выглядит размытым или плохо читается?
На иконке размером 16 пикселей очень мало места. Простые формы, высокий контраст и одна-две буквы работают лучше, чем детализированные логотипы или длинный текст. Маленькие исходные изображения увеличиваются для крупных размеров и выглядят размытыми. Проверьте предпросмотр и попробуйте уменьшить отступ или использовать упрощённую версию логотипа.
Какие из этих файлов мне нужны?
favicon.ico и PNG-файлы размером 16 и 32 пикселя используют настольные браузеры, а apple-touch-icon.png — iPhone и iPad. Иконки размером 192 и 512 пикселей и site.webmanifest используются, когда сайт добавляют на главный экран или устанавливают как веб-приложение. Если подключить все эти файлы HTML-тегами, основные случаи будут охвачены.
Почему у apple-touch-icon.png нет прозрачности?
Некоторые устройства Apple показывают прозрачные части иконки на главном экране чёрными. Поэтому инструмент заполняет прозрачные области выбранным вами цветом (по умолчанию белым) и оставляет углы прямыми, потому что iPhone и iPad скругляют их сами.