Генератор favicon
Дайте картинку или букву; скачайте favicon.ico, PNG, иконку Apple и теги head одним ZIP.
Инструмент
Favicon это маленькая иконка, которая представляет сайт на вкладке браузера, в закладках и на главном экране телефона. Инструмент начинает двумя путями: вы загружаете картинку PNG, JPG, WebP или SVG либо рисуете иконку из одной-двух букв или эмодзи, выбирая цвет фона, цвет текста, скругление углов и жирность. На выходе favicon.ico с размерами 16, 32 и 48 пикселей, PNG на 16 и 32, apple-touch-icon на 180, иконки Android на 192 и 512, маскируемая иконка 512 и файл site.webmanifest.
Если картинка не квадратная, вы выбираете между центрированием с обрезкой и вписыванием с заливкой остального цветом фона. Предпросмотр показывает иконку на светлом и тёмном фоне вкладки и на главном экране. Теги для head и текст манифеста инструмент выдаёт в полях, которые можно скопировать. Файлы скачиваются по одному или все вместе одним ZIP. В маскируемой иконке содержимое уменьшается до безопасной зоны, чтобы обрезка краёв его не задела.
Если исходник меньше 512 пикселей, крупные размеры получатся размытыми, и инструмент об этом предупредит. Детальный логотип на 16 пикселях не читается, на таком размере лучше работает простая форма или одна буква. Браузеры хранят favicon в кеше, поэтому новая иконка после публикации может появиться не сразу. Инструмент создаёт файлы; разместить их на сайте и проверить адреса и пути предстоит вам или вашему разработчику.
Частые вопросы
Какие файлы и размеры создаются?
В favicon.ico лежат изображения 16, 32 и 48 пикселей. Кроме него вы получите favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, маскируемую иконку 512 и site.webmanifest.
Отправляется ли загруженная картинка куда-нибудь?
Нет. Картинка обрабатывается только в вашем браузере, по сети не передаётся и не хранится. После закрытия страницы картинка и созданные файлы исчезают, поэтому заранее скачайте ZIP.
Какого размера должна быть исходная картинка?
Для хорошего результата берите квадратную картинку не меньше 512 пикселей. Если она меньше, крупные размеры получатся размытыми, и инструмент предупредит вас. У SVG проблемы с размером нет.
Почему сайт всё ещё показывает старый favicon?
Браузеры хранят favicon в кеше, поэтому изменение может появиться не сразу. Попробуйте жёсткое обновление страницы или закройте и снова откройте вкладку, а также проверьте имена файлов и пути в тегах head.
