Генератор favicon
Перетягніть логотип один раз і отримайте всі іконки, потрібні сайту, разом із кодом для ваших сторінок.
Запечатано на цьому пристрої
Працює у вашому браузері. Нічого не завантажується на сервер.
Запечатано
Ваша іконка
Код для ваших сторінок
Розмістіть файли із 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 завжди отримує суцільний фон і прямі кути: ваш колір фону або білий, якщо ви вибрали прозорий.