FaviPaint ×

Історія

Прозорість

      
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="manifest" href="/manifest.json" />
  <meta name="msapplication-TileColor" content="#ffffff" />
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
  <meta name="theme-color" content="#ffffff" />

Що таке фавікон?

Фавікон (від англ. favorite icon) — це невелике зображення (іконка), що ідентифікує сайт у браузерах, пошукових системах та на пристроях. Він виконує роль "візитівки" сайту, допомагаючи користувачам швидко розпізнати ресурс серед інших вкладок, закладок або в результатах пошуку. Наприклад, це може бути логотип компанії, стилізована літера або символ, що відображає тематику сайту.

Де застосовують фавікон?

Фавікон відображається в таких місцях:

Вкладки браузера — поруч із назвою сторінки.
Закладки — у списку збережених посилань.
Результати пошуку (сніпети) — ліворуч від URL у Google та інших.
Історія перегляду — у списку відвіданих сторінок.
Робочий стіл пристроїв — як ярлик для швидкого доступу (наприклад, через функцію "Додати на домашній екран" у мобільних браузерах).
Адресний рядок — у деяких браузерах (Safari, Firefox).

Як додати фавікон на сайт?

1. Розміщення файлу

Завантажте файл фавікона (наприклад, favicon.ico) у кореневий каталог сайту (наприклад, public_html/). Це гарантує, що старі браузери (на кшталт IE) знайдуть його автоматично.

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

2. HTML-код

Додайте у секцію <head> сторінки теги для різних форматів і розмірів. Приклад:


<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- Основна іконка для старих браузерів (IE) -->

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<!-- Різні розміри для iOS-пристроїв. 180x180 є основним для сучасних пристроїв, інші розміри можуть бути корисні для старших версій. -->

<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
<!-- Основна іконка для Android-пристроїв -->

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- Різні розміри для веб-сайтів. 32x32 та 16x16 є основними, 96x96 використовується рідше. -->

<link rel="manifest" href="/manifest.json" />
<!-- Файл маніфесту для PWA (Progressive Web App) -->

<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<!-- Підтримка для Windows 8/10. Якщо не потрібно, можна видалити. -->

<meta name="theme-color" content="#ffffff" />
<!-- Колір теми для мобільних браузерів -->

3. Для WordPress

Використовуйте розділ "Зовнішній вигляд → Налаштувати → Ідентифікація сайту", де можна завантажити фавікон через інтерфейс.

Актуальні формати та розміри (2025)

Формат	Переваги	Недоліки	Рекомендовані розміри
ICO	Сумісність з усіма браузерами, підтримка кількох розмірів у одному файлі.	Великий розмір файлу, застарілий стандарт.	16x16, 32x32, 48x48.
PNG	Прозорість, висока якість, підтримка сучасними браузерами.	Не підтримується старими версіями IE.	16x16, 32x32, 64x64, 180x180 (iOS), 192x192 (Android).
SVG	Масштабування без втрат якості, малий розмір файлу.	Обмежена підтримка (наприклад, Safari вимагає окремий файл для закріплених вкладок).	Будь-який розмір (оптимально — 512x512 для масштабування).

Поради з оптимізації

Контрастність: Уникніть дрібних деталей, використовуйте яскраві кольори для помітності.
Перевірка: Тестуйте фавікон у різних браузерах (Chrome, Safari, Firefox) та на пристроях (iOS, Android).
Кеш: Після оновлення фавікона очистіть кеш браузера, щоб зміни відобразилися.

Чи впливає фавікон на SEO?

Безпосередньо на ранжування не впливає, але:

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

Як створити фавікон?

Ви можете легко створити фавікон за допомогою нашого інструменту FaviPaint. Ось основні функції:

Малювання з нуля: Використовуйте інтуїтивно зрозумілі інструменти для створення унікальних іконок.
Конвертація зображень: Завантажуйте зображення у форматах PNG, JPEG або BMP та конвертуйте їх у ICO.
Редагування: Налаштовуйте розмір, кольори та інші параметри для досягнення ідеального результату.

Інструкція з використання FaviPaint

Ліва кнопка миші: Малювати.

Права кнопка миші: Стерти.

Колесо миші (кнопка): Переміщення зображення.

Прокрутка колеса миші: Вибір кольору з палітри.

Оновити: Очистіть полотно та почніть знову.

Завантажити зображення: Імпортуйте зображення для редагування.

Зберегти фавікон: Завантажте зображення у форматі ICO.

Зберегти PNG: Завантажте зображення у форматі PNG.

Очистити полотно: Повністю очистіть полотно.

Квадрат: Малюйте квадрати на полотні.

Коло: Малюйте кола на полотні.

Піпетка: Виберіть колір з полотна.

Заповнити: Зафарбуйте область обраним кольором.

Гумка: Видаляйте частини малюнка.

Назад (Undo): Скасуйте останню дію.

Вперед (Redo): Повторіть скасовану дію.

Приховані функції:

Вікно пошуку: Можна завантажити фавікон з іншого сайту для редагування (працює не завжди).
Історія: Переміщайтеся по історії редагування за допомогою шкали.
Чекбокс біля історії: Якщо вимкнено — історія зберігається лише під час поточного сеансу. Якщо увімкнено — зберігається вся історія (після перезавантаження історія обнуляється).

Чому варто використовувати FaviPaint?

Простота: Інтуїтивно зрозумілий інтерфейс, який підходить для новачків та професіоналів.
Безкоштовність: Усі функції доступні безкоштовно.
Онлайн-доступ: Працюйте з будь-якого пристрою без необхідності встановлювати додаткове ПЗ.

Інструкція

Insert this code into the head: