Безкоштовний генератор фавіконок для всіх платформ

Генератор фавіконок позбавляє нудної частини брендування сайту: експорту того самого логотипу в шести розмірах, правильного іменування кожного файлу й написання тегів, що підказують кожній платформі, де їх шукати. Фавіконка мала, але подорожує далеко. Вона є у вкладках браузера, закладках та історії, на головних екранах телефонів і поруч із назвою вашого сайту у видачі Google, де Google просить квадратну іконку щонайменше 8x8 пікселів і рекомендує більшу за 48x48 (Google Search Central, favicons in search results).

Як користуватися генератором фавіконок?

Перетягніть у інструмент файл PNG, JPG або SVG, найкраще 512x512 пікселів або більше. Генератор малює ваше зображення на полотні в кожному розмірі з високоякісним згладжуванням і показує шість результатів поруч.

1. Підготуйте квадратне джерело. Інструмент змінює розмір зображення до кожного квадратного розміру без обрізання, тому прямокутний логотип виглядатиме розтягнутим. Спершу обріжте його до квадрата, залишивши трохи поля навколо знака.
2. Перетягніть файл або натисніть, щоб вибрати його. Попередній перегляд з'явиться за секунду.
3. Завантажте пакет кнопкою «Завантажити все (.zip)» або кожен PNG окремо.
4. Скопіюйте HTML-код у <head> кожної сторінки, зазвичай у шаблон сайту.
5. Скопіюйте маніфест, заповніть поля name і short_name назвою вашого бренду та збережіть його як site.webmanifest у корені сайту.
6. Завантажте файли в корінь вашого домену, щоб шляхи /favicon-32x32.png та інші з коду працювали.

Оскільки обробка відбувається у вашому браузері, генератор підходить для неопублікованих логотипів і клієнтських файлів, які не можна надсилати на сторонній сервер.

Які розміри фавіконок потрібні у 2026 році?

Шість PNG-файлів охоплюють браузери, iOS, Android і Windows. У таблиці перелічено, що створює генератор, де використовується кожен файл і який тег чи файл на нього посилається.

Пара 192 і 512 не є випадковою: для браузерів на Chromium маніфест веб-застосунку має містити щонайменше іконку 192x192 та іконку 512x512, а Chrome масштабує їх для інших місць, де вони потрібні (web.dev, add a web app manifest). Розмір 180x180 відповідає високороздільній іконці iPhone у власному прикладі коду Apple для веб-закладок (Apple, configuring web applications). Плитка Windows є застарілим файлом: вона не шкодить, і ви можете прибрати тег, якщо не орієнтуєтеся на старі установки Windows.

Який HTML-код дає генератор?

Шість рядків для <head>: два посилання rel="icon" для PNG-фавіконок, іконка Apple touch, посилання на маніфест, плитка Windows і мета-тег theme-color. Коли на сторінці перелічено кілька іконок, браузер зчитує їхні атрибути type і sizes, щоб вибрати найвідповідніший, а якщо файл не завантажується, переходить до наступного (MDN, link types).

Два налаштування у згенерованому коді варто змінити. theme-color і кольори маніфесту за замовчуванням білі (#ffffff): замініть їх на колір вашого бренду, якщо хочете, щоб рядок браузера й екран-заставка встановленого застосунку відповідали вашому сайту. А в маніфесті name і short_name навмисно залишено порожніми: web.dev пояснює, що потрібне принаймні одне з двох, а short_name використовується на головному екрані, де місця мало.

Чи допомагає фавіконка SEO?

Не як фактор ранжування, але вона формує вигляд вашого результату. Google може показувати вашу фавіконку поруч із назвою сайту вгорі кожного результату, тож чітка іконка допомагає користувачам упізнати ваш бренд і може підвищити ваш CTR порівняно з результатами з універсальним глобусом.

Google наводить умови відповідності, і відсутність однієї з них зазвичай і є причиною, чому фавіконка не показується:

• Тег link на головній сторінці. Google зчитує rel="icon", shortcut icon, apple-touch-icon та apple-touch-icon-precomposed.
• Доступ для сканування. Googlebot має мати доступ до головної сторінки, а Googlebot-Image до файлу іконки. Правило robots.txt, що блокує папку із зображеннями, може приховати вашу фавіконку.
• Квадратний файл щонайменше 8x8 пікселів, краще більший за 48x48, у підтримуваному форматі: BMP, GIF, ICO, PNG, JPEG, PPM або TIFF. Згенеровані PNG-файли відповідають вимогам.
• Одна фавіконка на ім'я хоста. Піддомен може мати власну іконку; підкаталог, як-от /blog, не може.
• Стабільний URL, який ви не змінюєте часто.

Після зміни Google має повторно просканувати головну сторінку, на що, за тією самою документацією, може піти від кількох днів до кількох тижнів. Запит на індексацію головної сторінки в Search Console прискорює цей процес.

Як створити фавіконку, що залишається читабельною на 16 пікселях?

Спершу проєктуйте під найменший розмір. На 16x16 уся іконка складається з 256 пікселів, тож повний логотип із слоганом перетворюється на розмиту пляму. Ці правила зберігають іконку читабельною:

• Використовуйте знак логотипу, а не весь логотип. Символ або одна жирна літера переживають зменшення, слово ні.
• Заповнюйте квадрат. Залиште тонке поле, але уникайте великих порожніх країв, через які знак у вкладці стає крихітним.
• Обирайте сильний контраст і два-три однотонні кольори. Тонкі лінії й градієнти зникають у малих розмірах.
• Перевірте світлу й темну теми. Прозорий PNG із темним знаком зникає на темній панелі вкладок; суцільний фон або світлий контур розв'язує проблему.
• Подумайте про маски для Android. Android може обрізати іконки застосунків до кола. MDN рекомендує маскувану іконку з важливою частиною в безпечній зоні й непрозорим фоном (MDN, define app icons). Якщо ваш знак торкається країв, експортуйте версію з відступами для файлів 192 і 512.

Які помилки з фавіконками трапляються найчастіше?

Більшість зламаних фавіконок спричинені шляхом або кешем, а не самим зображенням.

• Файли завантажено не в ту папку. Згенерований код вказує на корінь (/favicon-32x32.png). Якщо ви розмістили файли в /assets, оновіть кожен шлях.
• Немає файлу /favicon.ico. Коли сторінка не оголошує іконку, стандарт HTML дозволяє браузерам за замовчуванням запитувати /favicon.ico (WHATWG HTML standard, link types). Сторінки без тегів, як-от PDF чи сторінки помилок, тоді спричинятимуть 404 у ваших журналах. Генератор створює лише PNG-файли, тож якщо вам потрібен цей запасний варіант, експортуйте свій PNG 32x32 у файл ICO будь-яким редактором зображень.
• Стара іконка, яка не зникає. Браузери агресивно кешують фавіконки. Після редизайну перейменуйте файл або додайте параметр версії (?v=2).
• Теги лише на головній сторінці. Браузери зчитують іконку для кожної сторінки окремо, тому розмістіть код у спільному шаблоні.
• Розтягнутий логотип. Перед генеруванням обріжте джерело до квадрата, як описано вище.

Коли файли опиняться онлайн, запустіть екстрактор фавіконок для свого домену, щоб побачити, які іконки справді знаходить краулер, а потім SEO-аудит сторінки, щоб перевірити решту тегів у head.

Як фавіконка вписується у ваш бренд у відповідях ШІ?

AI-асистенти, як-от ChatGPT і Perplexity, часто показують іконку кожного сайту, який цитують, поруч із посиланням на джерело. Послідовна фавіконка робить ваш бренд упізнаваним і там, але це лише рамка: цитування залежить від вашого контенту й авторитетності. Щоб побачити, чи з'являється ваш сайт у цих відповідях взагалі, відстеження згадок у ШІ вимірює згадки вашого бренду щотижня, промпт за промптом і модель за моделлю, а дашборд GEO / SEO ставить їх поруч із вашими кліками та позиціями в Google.

Повний набір фавіконок вимагає одного квадратного зображення й двох хвилин. Згенеруйте іконки вище, вставте код у свій шаблон, а потім ознайомтеся з тарифами Sorank, щоб наростити трафік, який їх побачить, на autopilot.