Генератор favicon

Створіть favicon з будь-якого зображення

Favicon — це маленька іконка, що відображається на вкладках браузера, у закладках і на головних екранах телефонів. Цей генератор бере одне квадратне зображення та створює чіткі PNG-іконки всіх розмірів, потрібних сучасним сайтам, — від іконки вкладки 16×16 до іконки 512×512 для прогресивних вебзастосунків — повністю у вашому браузері.

Перетягніть логотип, і ви побачите живий попередній перегляд кожного розміру, готовий до окремого завантаження. Ми також генеруємо точні теги <link>, які потрібно вставити в <head> вашої сторінки, тож підключення favicon займає лічені секунди.

Поради для чітких іконок

Почніть із квадратного зображення щонайменше 512×512 пікселів. Виразні прості форми з високим контрастом залишаються впізнаваними після зменшення до 16 пікселів, тоді як дрібні деталі та маленький текст перетворюються на пляму. Перевірте попередній перегляд 16×16 — якщо ви все ще розумієте, що це, у вас чудова favicon.

Який розмір де використовується

• 16×16 і 32×32 — вкладки браузера, закладки та адресні рядки.
• 48×48 і 64×64 — ярлики на робочому столі та деякі іконки в результатах пошуку і списках сайтів.
• 128×128 — більші записи в магазинах і каталогах розширень.
• 180×180 — Apple touch icon, що використовується, коли сторінку додають на головний екран iPhone або iPad.
• 192×192 і 512×512 — іконки головного екрана Android і прогресивних вебзастосунків, указані в маніфесті вебзастосунку.

Корисно знати

Кожне зображення масштабується безпосередньо до квадрата, тому використовуйте квадратне джерело; прямокутний логотип буде розтягнуто. Прозорість зберігається у файлах PNG, але iOS погано відображає прозорі touch-іконки, тому суцільний фон — безпечніший вибір для версії 180×180. Файли називаються на кшталт favicon-32x32.png, що відповідає згенерованому фрагменту, тож зберігайте ці назви, коли копіюєте їх у корінь сайту. Ця сторінка створює лише файли PNG; якщо вам також потрібен класичний favicon.ico, створіть його зі свого вихідного зображення за допомогою конвертера PNG в ICO.

Додавання іконок на ваш сайт

Завантажте потрібні розміри, розмістіть їх у публічному корені сайту та вставте згенеровані теги <link> у <head>. Якщо ви створюєте маніфест вебзастосунку, вкажіть у його списку іконок файли 192×192 і 512×512. Після розгортання пошуковим системам і браузерам може знадобитися час, щоб оновити кешовану favicon, тож перевіряйте у приватному вікні й не турбуйтеся, якщо стара іконка затримається на день чи два.