Генератор фавіконок (favicon)
Every favicon size, a real multi-size .ico and a web manifest from one image. Усе виконується локально — нічого не надсилається на сервер.
- Вхід
- PNG · JPEG · WebP · SVG
- Вихід
- ICO · PNG · webmanifest · ZIP
Перетягніть логотип
PNG, JPEG, WebP або SVG. Найкраще — квадратне зображення щонайменше 512 × 512 px. Можна також вставити зображення.
Усі файли фавіконки з одного зображення
Цей генератор фавіконок перетворює один логотип на повний набір, потрібний сучасному сайту: favicon.ico з іконками 16, 32 і 48 пікселів усередині, чіткі PNG від 16 до 512 пікселів, Apple touch icon, іконки Android Chrome, site.webmanifest і HTML-теги для вставлення на сторінку. Зробіть зображення квадратним, додайте відступи, заокругліть кути або покладіть його на суцільну плитку, а потім завантажте все одним ZIP. Масштабування та ZIP виконуються на вашому пристрої, тож логотип нікуди не надсилається.
Як створити фавіконку
- Перетягніть на сторінку PNG, JPEG, WebP або SVG чи вставте зображення. Найчіткіший результат дає квадратний логотип щонайменше 512 × 512 пікселів або SVG.
- Оберіть Вписати, щоб зберегти все зображення з полями навколо, або Заповнити, щоб обрізати його до квадрата. Додайте відступ і радіус кутів, якщо потрібна заокруглена плитка.
- Виберіть колір фону або залиште його прозорим. Apple touch icon завжди отримує суцільний фон, бо iOS зафарбовує прозорість чорним.
- Заповніть назву застосунку й кольори для web manifest, потім натисніть Завантажити ZIP або завантажте окремі файли з попереднього перегляду.
- Завантажте файли в корінь сайту та вставте HTML-теги в
<head>кожної сторінки.
Які файли фавіконки справді потрібні сучасним браузерам?
Поради щодо фавіконок повні пережитків 2012 року: десятки розмірів, XML для плиток Windows і маски закріплених вкладок Safari. Сучасні браузери шукають набагато менше. Чотири файли покривають практично всі браузери, телефони й операційні системи, що використовуються.
Усе інше в ZIP додано для повноти: PNG на 16, 32 і 48 пікселів для інструментів і CMS, які просять їх за назвою, та необов'язкова плитка Windows 150 × 150 для застарілих закріплених сайтів. Зайві файли не шкодять, але посилатися на всі не обов'язково.
- favicon.ico
- Універсальний запасний варіант. Браузери самі запитують /favicon.ico, навіть якщо жоден тег на нього не вказує, і так само роблять RSS-читачі, менеджери закладок і краулери. Один файл містить версії на 16, 32 і 48 пікселів, і кожна з них — це PNG усередині контейнера ICO, який читають усі браузери, починаючи з Windows Vista.
- icon.svg
- Векторна фавіконка, чітка за будь-якого розміру й масштабу. Chrome, Edge, Firefox і нові версії Safari використовують її, якщо на неї є посилання. Вона з'являється лише тоді, коли ви починаєте з SVG: растрове зображення не може стати справжнім вектором.
- apple-touch-icon.png
- Непрозорий PNG 180 × 180, який iPhone та iPad показують, коли хтось додає ваш сайт на головний екран. iOS накладає власну заокруглену маску, тож кути мають бути прямими, а фон — суцільним.
- Іконки маніфесту
- PNG на 192 і 512 пікселів, перелічені в site.webmanifest. Android використовує їх для ярлика на головному екрані та заставки встановленого вебзастосунку, а Chrome перевіряє їх, перш ніж запропонувати встановити сайт.
HTML-теги для вставлення
Фрагмент посилається на ICO з sizes="32x32", а не з sizes="any". Із "any" Chrome обирає ICO, навіть коли є SVG. Якщо ви завантажуєте SVG, фрагмент посилається й на нього, тож браузери з підтримкою SVG-фавіконок використовують його, а решта повертаються до ICO. Без SVG замість нього підключаються PNG на 32 і 16 пікселів.
Метатег theme-color тонує панель браузера на Android і в Safari, а site.webmanifest містить назву застосунку, кольори та великі іконки. Не змінюйте назви файлів і розмістіть усі файли в корені домену або змініть шляхи у фрагменті відповідно до того, куди ви їх поклали.
Як зробити фавіконку, що не губиться на 16 пікселях
- Спрощуйте. Іконка 16 × 16 — це загалом 256 пікселів. Текстові логотипи й тонкі лінії перетворюються на кашу; одна літера, символ або знак логотипа без тексту читаються значно краще.
- Подбайте про контраст для обох кольорів вкладок. Вкладки браузера світлі або темні залежно від теми. Попередній перегляд показує кожен розмір на білій і майже чорній плитці, тож ви помітите темний логотип, що зникає в темному режимі, ще до публікації.
- Якщо сумніваєтеся, додайте плитку. Суцільний фон із невеликим відступом і радіусом кутів робить тонкий або прозорий логотип помітним на будь-якій вкладці й виглядає продумано на головному екрані.
- Починайте з великого. Зображення зменшуються кроками вдвічі для чистих країв, але жоден алгоритм не додасть деталей, яких немає в джерелі. Дайте 512 пікселів або більше чи SVG.
- Перевірте кольори. Якщо фірмовий колір надто блідий на білій чи темній вкладці, перевірте його за допомогою перевірки контрасту або переведіть значення, яке вам дали в іншому записі, у конвертері кольорів.
Чому нічого не завантажується на сервер
Більшість генераторів фавіконок надсилають ваш логотип на сервер для масштабування. Цей малює кожен розмір на canvas у вашому браузері, записує файл ICO байт за байтом на JavaScript і збирає ZIP невеликим модулем WebAssembly, тож зображення не залишає ваш пристрій, а інструмент працює офлайн після завантаження сторінки. Це важливо для бренду, який ще не представлено, або логотипа клієнта, яким поки не можна ділитися.
Поширені запитання
- Якого розміру має бути фавіконка?
- Вкладки браузера показують фавіконки розміром 16 × 16 CSS-пікселів, що на екранах із високою щільністю становить 32 × 32, тому ICO містить версії на 16, 32 і 48 пікселів. Додайте Apple touch icon 180 × 180 та іконки 192 і 512 пікселів для web manifest, і всі поширені випадки покрито. Починайте із зображення щонайменше 512 × 512 пікселів.
- Чи потрібен ще файл favicon.ico?
- Так. Браузери, читачі стрічок і краулери автоматично запитують /favicon.ico, навіть коли жоден тег на нього не вказує, а старі браузери розуміють лише ICO. Тримайте його в корені сайту поряд з іконками SVG і PNG.
- Чи можна використати SVG як фавіконку?
- Так. Chrome, Edge, Firefox і нові версії Safari підтримують SVG-фавіконки через тег link з type="image/svg+xml". Завантажте сюди SVG, і він буде доданий як icon.svg поряд із запасним ICO, а HTML-фрагмент посилатиметься на обидва.
- Що таке apple-touch-icon?
- Це PNG розміром 180 × 180 пікселів, який iPhone чи iPad використовує, коли хтось додає ваш сайт на головний екран. Він має бути із суцільним фоном і прямими кутами, бо iOS сама заокруглює кути й робить прозорі ділянки чорними.
- Чому не відображається фавіконка?
- Браузери агресивно кешують фавіконки, часто на кілька днів. Перевірте, що файл доступний за шляхом із тегу link, потім зробіть жорстке оновлення або відкрийте сайт у приватному вікні. Перейменування файлу чи додавання параметра версії, як-от favicon.ico?v=2, змушує браузер завантажити його заново.
- Як конвертувати PNG в ICO?
- Перетягніть PNG на цю сторінку й завантажте favicon.ico. Генератор масштабує зображення до 16, 32 і 48 пікселів і пакує всі три в один файл ICO, де кожен розмір зберігається як PNG усередині контейнера.
- Навіщо потрібен site.webmanifest?
- Це невеликий JSON-файл, який повідомляє Android і Chrome назву сайту, колір теми, колір фону та іконки на 192 і 512 пікселів, що використовуються, коли сайт додають на головний екран або встановлюють як застосунок.
- Чи завантажується мій логотип на сервер?
- Ні. Кожна іконка малюється й кодується у вашому браузері, а ZIP збирається на вашому пристрої. Нічого нікуди не надсилається, і сторінка працює офлайн після завантаження.