Генератор favicon
Завантажте логотип і отримайте в одному ZIP усі значки, потрібні сайту: favicon.ico із зображеннями 16, 32 і 48 пікселів, PNG 48 пікселів для Google, Apple Touch Icon з непрозорим тлом для iPhone, значки 192 і 512 пікселів для Android, маскований значок із врахованою безпечною зоною та site.webmanifest. Якщо ви завантажите SVG, до набору потрапить і icon.svg. Ви побачите попередній перегляд у вкладці, у видачі Google та на головному екрані й скопіюєте готовий код для <head>; усе працює у вашому браузері.
- Безкоштовно, без реєстрації
- Файл не залишає ваш пристрій
- До 50 МБ на файл
Щоб почати, додайте логотип або значок. Підійдуть PNG, SVG, JPG і WebP; найкращий результат дає квадратне зображення від 512 × 512 пікселів.
Ваш файл не залишає пристрій: зображення обробляються в браузері. EXIF і дані про місцезнаходження до результату не потрапляють.
Як створити favicon
Додайте логотип
Завантажте логотип у форматі PNG, SVG, JPG або WebP. Найкращий результат дає квадратне зображення від 512 × 512 пікселів; SVG теж підійде.
Задайте назву, кольори та поля
Введіть назву сайту й коротку назву, виберіть кольори теми й тла, за потреби додайте поля. Попередні перегляди покажуть, як значок виглядатиме у вкладці, в Google та на головному екрані.
Завантажте архів і розмістіть файли
Завантажте ZIP, розмістіть файли в кореневій теці сайту й додайте показаний фрагмент <head> на свої сторінки.
Що зберігається?
Зберігається
- Пропорції вашого логотипа: неквадратне зображення вписується в квадрат і ніколи не розтягується
- Прозорість (у звичайних значках; якщо ви виберете колір тла, його буде залито)
- Якщо ви завантажуєте SVG, icon.svg додається без змін
Змінюється
- Кожен значок перераховується під свій розмір з високою якістю
- В Apple Touch Icon і маскованого значка тло завжди непрозоре: вибраний вами колір або білий, якщо вибрано «Прозорий»
- У маскованому значку вміст лежить у безпечній зоні 80 %
Не переноситься
- З PNG чи JPG вектор (SVG) не створюється; icon.svg є лише за завантаження SVG
- EXIF та інші метадані до значків не додаються
Коли це стане в пригоді
Повний набір значків для нового сайту
Одного favicon.ico вже замало: головний екран iPhone, Android і пошук Google чекають на різні файли. Одне завантаження дає всі потрібні файли з правильними назвами й розмірами.
Значок сайту у видачі Google
Google показує значок сайту в результатах пошуку з квадратного файлу, розмір якого кратний 48 пікселям, і цей файл має бути доступний для обходу. До набору входить такий файл і посилання на нього для <head>.
Сайт, який можна додати як застосунок (PWA)
Щоб сайт можна було додати на головний екран, потрібні маніфест і значки 192 та 512 пікселів. Маскований значок не дасть обрізати логотип, коли Android вирізає значок колом чи заокругленим квадратом.
Що важливо врахувати
- Найкращий результат дає квадратне зображення від 512 × 512 пікселів; великі значки з меншого вихідника виходять розмитими.
- Тонкі лінії та дрібний текст у значках 16 і 32 пікселі нечитабельні; краще працюють жирні контрастні логотипи.
- Колір теми застосовується лише в адресному рядку мобільних браузерів і залежить від налаштувань браузера.
- Google може оновлювати значок у пошуку кілька днів, а то й тижнів, і браузери теж кешують значки.
Поширені запитання
Які файли favicon потрібні сайту?
Сучасний набір такий: favicon.ico в корені сайту, PNG 48 пікселів для Google, за можливості icon.svg, apple-touch-icon.png 180 пікселів для iPhone, значки 192 і 512 пікселів для Android та site.webmanifest. Генератор робить усе це й видає посилання для <head>.
Що таке маскований значок?
Маскований значок тримає вміст усередині безпечної зони й має повністю зафарбоване тло, тому Android може вирізати з нього коло, заокруглений квадрат чи іншу форму залежно від пристрою. Тут вміст міститься в центральній області 80 % зображення 512 пікселів.
Чому Apple Touch Icon непрозорий і без заокруглених кутів?
iOS показує прозорі ділянки чорними й сама заокруглює кути. Тому значок робиться повністю зафарбованим і без заокруглень, з вибраним вами кольором тла (білим, якщо вибрано «Прозорий»).
Чому мій значок не з'являється у видачі Google?
Файл значка не має бути закритий у robots.txt, на нього має вести посилання в <head> головної сторінки, а сам він має бути квадратним із розміром, кратним 48 пікселям. Після виправлення можна запросити повторне індексування головної в Search Console; оновлення однаково може забрати дні чи тижні.
Що буде, якщо завантажити неквадратне зображення?
Значки вписуються в квадрат без спотворень, і з боків лишається порожнє місце. Якщо потрібно, щоб картинка заповнила квадрат, спершу обріжте її до 1:1 інструментом обрізання.
Чи створює він SVG-значок із PNG?
Ні. Автоматичне перетворення пікселів на вектор може непомітно змінити вигляд значка, тому icon.svg додається лише тоді, коли ви самі завантажуєте SVG.
Цей інструмент безкоштовний?
Так, повністю безкоштовний. Без акаунта, підписки та водяних знаків.
Чи надсилаються мої файли кудись?
Ні. Зображення обробляються у вашому браузері й не залишають пристрій. EXIF і дані про місцезнаходження до результату не додаються.