Генератор фавиконок онлайн
Создайте все фавиконки для вашего сайта из одного изображения.
Сообщить о проблеме с этим инструментом
Как использовать Генератор фавиконок
Добавьте логотип или картинку
Перетащите на страницу PNG, JPG, WebP, GIF или SVG. Лучше всего подходит квадратное изображение с простой формой.
Настройте внешний вид
Обрежьте до квадрата или впишите изображение целиком, выберите прозрачный или цветной фон, добавьте отступ и скруглите углы. В предпросмотре видны все размеры и вкладка браузера.
Скачайте и добавьте код
Скачайте ZIP, загрузите файлы в корневую папку сайта и вставьте строки HTML в head ваших страниц.
Почему стоит использовать Utils365
Полный набор
favicon.ico с размерами 16, 32 и 48 px внутри, фавиконки PNG, Apple touch icon, иконки для Android и site.webmanifest — всё с именами, которые ожидают браузеры.
Посмотрите до скачивания
Проверьте, как иконка выглядит в реальных размерах и в светлой и тёмной вкладке браузера, чтобы мелкие детали не потерялись.
Конфиденциально по умолчанию
Всё происходит в вашем браузере, поэтому логотип никогда не загружается на сервер.
Часто задаваемые вопросы
Какие размеры фавиконок нужны?
favicon.ico (16, 32 и 48 px) покрывает вкладки браузера и закладки, Apple touch icon 180 px — главный экран iPhone и iPad, а PNG 192 и 512 px — Android и установленные веб-приложения. Этот инструмент делает их все из одного изображения.
ICO, PNG или SVG: какой формат фавиконки выбрать?
Все три. favicon.ico работает везде, включая старые браузеры и инструменты, которые ищут его автоматически. Фавиконки PNG дают чёткий результат в фиксированных размерах. Фавиконка SVG остаётся чёткой в любом размере; вы получите её, если начнёте с SVG.
Что такое apple-touch-icon?
Это иконка, которую iPhone и iPad используют, когда кто-то добавляет ваш сайт на главный экран. Её размер 180 × 180 px, и она не может быть прозрачной, поэтому сохраняется со сплошным фоном (белым, если вы выбрали прозрачный). iOS сама скругляет углы.
Куда положить файлы фавиконок?
Распакуйте их в корневую папку сайта, рядом с главной страницей, чтобы favicon.ico был доступен по адресу yoursite.com/favicon.ico. Затем вставьте строки HTML с этой страницы в раздел head каждой страницы или в шаблон сайта.
Почему новая фавиконка не появляется?
Браузеры долго хранят фавиконки. Откройте адрес фавиконки напрямую, сделайте жёсткую перезагрузку или откройте приватное окно, чтобы увидеть новую.