Генератор фавиконок
Перетащите логотип один раз и получите все иконки, нужные сайту, вместе с кодом для вставки в страницы.
Запечатано на этом устройстве
Работает в вашем браузере. Ничего не загружается на сервер.
Запечатано
Ваша иконка
Код для ваших страниц
Поместите файлы из ZIP-архива в корень сайта, затем вставьте этот код внутрь <head> каждой страницы.
Как это работает
-
Добавьте логотип
Перетащите SVG, PNG или JPG, выберите или вставьте его. Самые чёткие иконки получаются из квадратного изображения не меньше 512 × 512 пикселей.
-
Настройте внешний вид
Добавьте внутренний отступ, цвет фона или скруглённые углы и проверьте результат во вкладке браузера и на главном экране телефона.
-
Скачайте и вставьте код
Скачайте ZIP, поместите файлы из него в корень сайта, затем вставьте код в <head> своих страниц.
Частые вопросы
Какие файлы я получу?
Файл favicon.ico с иконками 16, 32 и 48 пикселей, PNG-иконки размером 16, 32, 48, 192 и 512 пикселей, apple-touch-icon.png размером 180 пикселей для iPhone и iPad и файл site.webmanifest, благодаря которому Android использует иконки 192 и 512 пикселей. Скачайте их по одному или все сразу в ZIP-архиве.
Куда положить файлы?
В корень сайта, рядом с главной страницей, чтобы они открывались по адресам вроде /favicon.ico. Затем вставьте код, показанный под предпросмотром, внутрь <head> каждой страницы. Браузеры сами ищут /favicon.ico, поэтому даже страницы без кода получат вашу иконку.
Какого размера должно быть изображение?
Квадратное и не меньше 512 × 512 пикселей — это размер самой большой иконки. Идеален SVG: он чётко отрисовывается в любом размере. Изображение поменьше тоже подойдёт, но тогда большие иконки увеличиваются и выглядят размыто.
Почему иконка во вкладке браузера размытая или слишком маленькая?
При 16 пикселях мелкие детали и тонкий текст исчезают. Используйте простой знак, например букву или символ, а не полный логотип с надписью, делайте внутренний отступ небольшим и выберите «Обрезать до квадрата», если изображение широкое.
Моё изображение куда-то загружается?
Нет. Изображение читается, масштабируется и сохраняется в вашем браузере, на вашем устройстве. Оно никуда не отправляется.
Почему у Apple touch icon есть фон?
iPhone и iPad сами скругляют углы иконок на главном экране и показывают прозрачные области чёрными. Поэтому у Apple touch icon всегда сплошной фон и квадратные углы: ваш цвет фона или белый, если выбран прозрачный.