Як додати favicon у wordpress: 3 робочі способи

Сайт без favicon виглядає незавершеним. Відвідувач відкриває пʼять вкладок, шукає вашу серед них і не знаходить, бо замість іконки там сіра заглушка браузера. Дрібниця? Так. Але саме такі дрібниці формують враження: про вас подбали чи зібрали нашвидкуруч.

WordPress спростив додавання site icon до кількох кліків, однак половина власників сайтів або не знає про цю функцію, або після завантаження стикається з тим, що favicon не відображається. Причина майже завжди в кеші браузера чи неправильному розмірі файлу.

Нижче три робочі способи додати favicon у WordPress: через кастомайзер (найпростіший), вручну через код і через плагін. Плюс розбір вимог до розміру й формату, щоб іконка відображалася всюди: у вкладках, закладках, на iPhone та Android.

💡 Швидкий огляд:

Що таке favicon і навіщо він сайту: впізнаваність бренду, довіра, навігація вкладками
Вимоги до файлу: квадратне зображення стандартного розміру, формат PNG, ICO або SVG
Спосіб 1: завантаження через «Сайт» → кастомайзер (2 хвилини, без плагінів)
Спосіб 2: ручна вставка через functions.php або header.php (для тих, хто править тему)
Спосіб 3: встановлення плагіна Site Favicon (якщо кастомайзер недоступний)
Що робити, якщо favicon не відображається: кеш браузера, старий ICO, CDN

Навіщо сайту favicon і які до нього вимоги

Favicon (скорочення від favorite icon) — це маленька іконка, яку браузер показує ліворуч від назви сторінки у вкладці, в закладках та в історії відвідувань. Користувач із десятком відкритих вкладок знаходить ваш сайт очима за частку секунди, саме за favicon, а не за текстом заголовка.

Друга функція менш очевидна: favicon бере участь у формуванні мікробренду. Коли хтось зберігає сторінку в закладки або додає сайт на домашній екран смартфона, туди потрапляє саме site icon. Без нього WordPress підставляє або сіру заглушку, або скриншот сторінки, виглядає неохайно.

Вимоги до розміру й формату

З 2014 року WordPress підтримує завантаження site icon через кастомайзер. Вимоги стандартні:

Розмір: 512×512 пікселів. WordPress автоматично генерує зменшені копії для браузерів (32×32, 180×180 для Apple touch icon, 192×192 і 512×512 для Android). Завантажувати окремі файли під кожну роздільну здатність не потрібно, ядро робить це само. Докладніше про вимоги до site icon, в офіційній документації WordPress.
Формат: PNG (рекомендовано), ICO або SVG. PNG дає найкращу якість на retina-екранах. ICO, legacy-формат для старих браузерів, на практиці у 2026 році без нього обходяться.
Що використовувати як favicon: логотип, упізнаваний у квадраті й читабельний при сильному зменшенні. Текст із трьох-чотирьох літер на кольоровому тлі працює краще, ніж складна ілюстрація.

Головне правило під час підготовки файлу: квадрат. Неквадратне зображення WordPress обріже примусово, і результат може вас не влаштувати.

Як додати favicon у WordPress: 3 способи

Спосіб 1: через кастомайзер, найпростіше

Цей метод працює на будь-якій сучасній версії WordPress із класичною темою. Для блочних тем (FSE) маршрут трохи відрізняється, покажу обидва.

Класична тема (Customizer):

Зайдіть в адмінку WordPress.
Перейдіть у Зовнішній вигляд → Налаштувати (Appearance → Customize).
Виберіть розділ Відомості про сайт (Site Identity). У деяких темах він називається «Інформація про сайт» або «Site Icon & Logo».
Знайдіть поле Іконка сайту (Site Icon). Натисніть «Вибрати іконку сайту» та завантажте квадратний PNG, WordPress очікує зображення щонайменше 512×512, згідно з документацією.
За потреби обріжте зображення вбудованим редактором і натисніть «Зберегти зміни».

Блочна тема (Site Editor, WordPress 5.9+):

Якщо тема підтримує Full Site Editing, кастомайзер замінено редактором сайту. Зайдіть у Зовнішній вигляд → Редактор, відкрийте панель Стилі або Налаштування, знайдіть розділ Іконка сайту та завантажте ту саму квадратну картинку. Логіка та сама, інтерфейс інший.

Після збереження відкрийте сайт у новому приватному вікні браузера, favicon має зʼявитися у вкладці. Якщо не зʼявився одразу, не панікуйте: браузер агресивно кешує favicon. Докладніше про це, у розділі частих запитань нижче.

Спосіб 2: вручну через functions.php

Варіант для тих, хто править дочірню тему й не хоче покладатися на кастомайзер. Додайте наступний код у functions.php дочірньої теми або через плагін Code Snippets:

1 /**
2  * Підключаємо favicon через wp_head.
3  * Файл favicon.png повинен лежати в корені дочірньої теми.
4  */
5 add_action( 'wp_head', 'sdstudio_add_favicon' );
6  
7 function sdstudio_add_favicon() {
8     $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9     echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10     echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11 }

Що тут відбувається: хук wp_head вставляє два теги <link> у <head> кожної сторінки. Перший, стандартний favicon для браузерів, другий, Apple touch icon для пристроїв Apple (iPhone, iPad). Функція get_stylesheet_directory_uri() віддає URL дочірньої теми, favicon потрібно покласти туди ж, у корінь папки з темою.

Перейменовувати файл на favicon.ico не обовʼязково. WordPress нормально працює з PNG, а браузери розуміють його без проблем. Головне, квадрат стандартного розміру.

Якщо ви підключаєте favicon не з теми, а з кореня сайту, замініть get_stylesheet_directory_uri() на home_url() і скоригуйте шлях:

1 $favicon_url = home_url( '/favicon.png' );

Після додавання коду завантажте favicon.png у відповідну папку через FTP або файловий менеджер хостингу. Перевірте результат у приватному вікні браузера.

Спосіб 3: через плагін

Якщо кастомайзер з якоїсь причини не дає завантажити site icon (буває в кастомних і застарілих темах), поставте плагін Site Favicon, мінімалістичний і безплатний. Встановлюється стандартно: Плагіни → Додати новий → пошук «Site Favicon» → Встановити → Активувати. Після активації в адмінці зʼявляється пункт Налаштування → Site Favicon, де можна завантажити іконку й одразу побачити превʼю.

Інший варіант, All in One SEO. Якщо SEO-плагін уже стоїть на сайті, зазирніть у його налаштування: там є секція завантаження site icon, яка робить те саме без додаткового плагіна. Але ставити важкий SEO-комбайн лише заради favicon не радимо, Site Favicon справляється із завданням, важить менше й не додає зайвого навантаження.

Після встановлення favicon будь-яким із трьох способів перевірте, що іконка справді відображається: відкрийте сайт у режимі інкогніто й подивіться на вкладку браузера.

На відео вище, покрокова демонстрація всіх трьох способів на живому сайті WordPress. Якщо після прочитання залишилися сумніви щодо якогось із кроків, подивіться ролик: на 1:15 показують завантаження через кастомайзер, на 3:40, ручний спосіб.

⁉️🤔 Часті запитання

Чому favicon не відображається після завантаження через кастомайзер?

У більшості випадків проблема в кеші браузера. Favicon кешується агресивно, браузер може тримати стару версію кілька днів. Відкрийте сайт у режимі інкогніто (Ctrl+Shift+N у Chrome): якщо іконка зʼявилася, річ саме в кеші. Очистіть кеш браузера або дочекайтеся його природного скидання. Друга за частотою причина, favicon завантажено у форматі ICO, а браузер очікує PNG. WordPress із версії 4.3 віддає перевагу PNG, завантажте квадрат стандартного розміру в PNG, як того вимагає документація, і проблема зникне.

Чи можна використовувати логотип як favicon?

Можна й потрібно — це стандартна практика. Але не кожен логотип годиться. Перевірте, як ваш логотип виглядає в дрібному масштабі: якщо деталі зливаються в нечитабельну пляму, зробіть спрощену версію. Гарний приклад, значок WordPress (W на синьому тлі): упізнаваний навіть у крихітному розмірі. Горизонтальний логотип із текстом із десяти літер при сильному зменшенні перетвориться на сіру смужку, для favicon візьміть лише знак без тексту.

Чому WordPress вимагає favicon саме такого розміру?

Для WordPress, так. Ядро приймає саме цей розмір як вихідний і генерує всі необхідні зменшені копії автоматично, офіційна документація підтверджує мінімальну вимогу 512 px по кожній стороні. Якщо завантажити favicon меншого розміру (наприклад, 128×128), масштабування до 512 пікселів відбудеться з утратою якості, а на retina-екранах іконка виглядатиме розмитою. Виняток, якщо підключаєте favicon вручну через код (спосіб 2): тоді можна зібрати кілька розмірів і прописати їх окремими тегами <link>.

Як прибрати або замінити favicon?

Заміна, через той самий інтерфейс, де завантажували: кастомайзер → Відомості про сайт → Іконка сайту → «Видалити» і потім завантажити нову. Стара іконка деякий час висітиме в кеші браузера (до кількох днів) — це нормально. Повне видалення, кнопка «Видалити» в тому самому інтерфейсі, після чого WordPress перестане віддавати теги favicon, і браузер повернеться до сірої заглушки.

Чи впливає favicon на SEO?

Напряму, ні. Google не використовує наявність чи відсутність favicon як фактор ранжування. Опосередковано, так: сайт із favicon виглядає професійніше, користувачі рідше плутають його з конкурентами під час навігації вкладками. Це знижує показник pogo-sticking (повернення до пошукової видачі), що пошуковики враховують опосередковано. Плюс Google іноді показує favicon у результатах мобільного пошуку, іконка робить сніпет помітнішим візуально, що підвищує CTR.

Який спосіб обрати: короткий алгоритм

Якщо у вас стандартна тема з кастомайзером, використовуйте спосіб 1. Це два кліки, і WordPress бере на себе всю технічну частину: ресайз, генерацію тегів, підтримку Apple та Android. Девʼять із десяти сайтів на WordPress закривають питання favicon саме так.

Кастомна тема без підтримки site icon? Підключіть через functions.php (спосіб 2), код із трьох рядків дає повний контроль над розмірами й форматом. Плагін (спосіб 3) залиште на випадок, коли ні кастомайзер, ні правка теми недоступні, наприклад, якщо сайт на мультисайтовій установці з обмеженими правами або ви працюєте з конструктором, який не дає доступу до functions.php.

І головне: після завантаження favicon перевірте сайт у режимі інкогніто нового браузера. Не покладайтеся на звичайне вікно, там міг закешуватися старий варіант або сама заглушка. Побачили іконку у вкладці? Готово.