Генератор фавиконок
Превратите изображение или букву в полный набор файлов фавикона вместе с HTML для их подключения.
Ваши файлы никогда не покидают устройство
Перетащите сюда изображение
PNG, JPEG, WebP, GIF, BMP или AVIF. Или переключитесь ниже на значок из буквы.
Открывается на этом устройстве. Ничего не загружается.
Одно изображение за раз, до 50 МБ и около 100 мегапикселей. Для значка из букв используется 1 или 2 символа.
Как создать фавикон
- Выберите изображение или переключитесь на «Буквы» и введите один-два символа, выбрав цвета.
- Для изображения выберите обрезку квадрата по центру или вписывание с полями. Проверьте предпросмотр в размерах 16, 32, 48 и 180 пикселей.
- Нажмите Создать файлы фавикона, скачайте архив .zip и вставьте HTML на свои страницы.
Что входит в набор фавикона
Фавикон — это маленький значок во вкладке браузера, списке закладок или результатах поиска. Браузеры ищут несколько разных файлов: favicon.ico для старых и общих случаев, значки PNG размером 16 и 32 пикселя для вкладок, значок Apple touch в 180 пикселей для домашнего экрана iPhone и iPad и значки 192 и 512 пикселей для Android и устанавливаемых веб-приложений. Небольшой файл site.webmanifest перечисляет значки Android.
Инструмент рисует каждый размер отдельно из вашего оригинала, так что малые размеры получаются уменьшением полного изображения, а не растягиванием крошечного. Файл .ico записывается как контейнер из трёх изображений PNG размерами 16, 32 и 48 пикселей. Значки из букв рисуются сразу в каждом размере, поэтому края остаются чёткими.
Советы
- Используйте крупные простые формы и сильный контраст. Мелкие детали при 16 пикселях исчезают.
- Нужна квадратная картинка из части фото? Сначала обрежьте её до 1:1 инструментом «Обрезать изображение».
- Нужны другие размеры? «Изменить размер изображения» даст любую ширину и высоту.
Вопросы и ответы
Загружается ли моё изображение?
Нет. Значки рисуются в вашем браузере, на вашем устройстве, и архив тоже собирается там. Ничего не отправляется на сервер.
Какие файлы я получу?
favicon.ico (версии 16, 32 и 48 пикселей), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 пикселей), android-chrome-192x192.png, android-chrome-512x512.png и site.webmanifest в одном архиве .zip.
Куда положить файлы?
В корневую папку вашего сайта, чтобы они отдавались по адресам вроде /favicon.ico. Затем вставьте фрагмент HTML, показанный после создания файлов, в head своих страниц.
С какого изображения начинать?
Лучший результат даёт квадратная картинка не менее 512 × 512 пикселей, потому что самый большой значок имеет размер 512 пикселей. Простые формы при уменьшении до 16 пикселей сохраняются гораздо лучше детализированных. Проверьте предпросмотр в 16 и 32 пикселя.
Чем отличаются обрезка и поля?
Обрезка берёт из изображения квадрат по центру, а остальное отбрасывает. Вписывание с полями сохраняет всё изображение, центрирует его с небольшим отступом, а оставшееся место заливает цветом фона или оставляет прозрачным.
Корректен ли файл .ico?
Да. Он содержит три изображения в кодировке PNG размерами 16, 32 и 48 пикселей, которые читает любой современный браузер.