Генератор favicon

Що робить інструмент

Генератор favicon перетворює літеру, емодзі чи ваш логотип на всі іконки, потрібні сучасному сайту. Він рендерить іконку в кожному розмірі, пакує favicon.ico, пише маніфест вебзастосунку й дає теги <link> для вставлення в <head> сторінки. Усе можна зберегти одним ZIP-архівом.

Почати з тексту — найшвидший спосіб отримати охайну іконку: введіть від одного до трьох символів або емодзі, виберіть кольори, шрифт і форму (квадрат, заокруглена чи коло). Текстові іконки також отримують масштабований favicon.svg, який лишається чітким у будь-якому розмірі й на екранах із високою щільністю пікселів.

Як користуватися

1. Виберіть джерело: Текст або Зображення. Для зображення натисніть Вибрати зображення… і виберіть квадратний PNG, SVG чи JPG.
2. Задайте Форму й увімкніть Заливати тло, щоб розмістити іконку на кольоровій плитці, або вимкніть, щоб лишити її прозорою.
3. Введіть Назву сайту: це підпис під іконкою, коли хтось додає ваш сайт на головний екран телефона; вона записується в site.webmanifest (Android) і в тег apple-mobile-web-app-title (iOS). Потім укажіть Теку з іконками, куди ви завантажите файли, — зазвичай /.
4. Перевірте перегляд: іконку 16 px люди бачать на вкладці браузера.
5. Натисніть Зберегти ZIP, викладіть файли на сайт і вставте HTML у <head>.

Приклад

Налаштування за замовчуванням дають такі теги:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Поради

• Браузери агресивно кешують favicon. Замінивши іконку, відкрийте сторінку в приватному вікні, щоб побачити зміни.
• iOS ігнорує прозорість в Apple touch icon і заливає її чорним, тож залишайте тло заповненим, щоб іконка на головному екрані виглядала охайно.