Як додати фавікон на WordPress сайт
У цій статті ми розглянемо найактуальнішу інформацію станом на початок 2024 року, як просто додати фавікон на WordPress сайт.
Як додати фавікон вручну через код
Незалежно від того, у вас стара (редактор теми) або нова тема (редактор сайту), ви додаєте фавікон через адмінку або вручну в код, у будь-якому випадку в результаті всередині тега head буде наступне:
rel="icon"
href="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-32x32.png"
sizes="32x32">
rel="icon"
href="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-192x192.png"
sizes="192x192">
rel="apple-touch-icon"
href="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-180x180.png">
name="msapplication-TileImage"
content="http://yoursite.test/wp-content/uploads/2023/01/cropped-logo-agency-270x270.png">
Якщо ви додаєте фавікон вручну або якщо сайт не на WP, тоді збережіть картинку в розмірах 32×32, 180×180, 192×192, 270×270 пікселів, завантажте та вкажіть правильний шлях до зображення.
Якщо у вас є інші розміри іконок, які відповідають різним дозволам пристроїв для оптимального відображення на різних екранах, увімкніть їх у код додатково.
А тепер покажемо як додати фавікон через адмінку WP.
Як додати favicon через адмін-панель WordPress-сайту
WordPress дозволяє вирішити питання із фавіконом за допомогою одного зображення розміром 512×512 px.
Додається фавікон на цій сторінці в розділі "Site Identity" - http://yoursite.test/wp-admin/customize.php, де yoursite.test - ваш домен.
У правому бічному меню виберіть "Site Identity".
У розділі "Site Icon" ви можете вибрати та додати ваше зображення, майбутній фавікон.
У режимі попереднього перегляду ви можете побачити, як виглядатиме ваш фавікон у вкладці. Якщо все добре, зберігаємо зміни та публікуємо – тиснемо кнопку «Publish».
Те, як ви потрапите на сторінку customize.php, залежить від вашої теми.
Якщо використовується редактор теми, то потрібно перейти в розділ "Appearance" ⇨ "Customize".
У правому бічному меню виберіть "Site Identity".
Якщо у вас тема з редактором сайту (новіші теми), то вам потрібно перейти в "Appearance" ⇨ "Editor".
Клацаємо на будь-який елемент, далі тиснемо на "Edit template".
Клацаємо на лого та на вкладці "Media" ⇨ "Add media". Завантажуємо наше лого.
Далі у нас з'являються такі налаштування. Щоб додати фавікон, нам потрібно перейти за посиланням. "Site Icon settings".
Так ми потрапимо на нашу сторінку, де зможемо додати файл фавікона розміром 512×512 пікселів.
Важливо! Щоб фавікон відобразився, після додавання потрібно буде перезавантажити сайт.
І може знадобитися деякий час, щоб він з'явився у всіх браузерах.
У разі виникнення запитань будемо раді відповісти вам у режимі чату.
WordPress Хостинг
LiteSpeed вебсервер |
Що таке фавікон? 3 способи додати фавікон для сайту на Wordpress
Фавікон від англійського слова “favorite icon” і означає іконку для сайту, яка відображається у браузері. яку вони виконують.Ми розповімо, навіщо потрібен фавікон і де його налаштувати у вашому сайті на Водпрес.
Що таке фавікон?
Фавікон - це зображення 16х16 пікселів, у вкладці браузера поруч із коротким описом сайту, вона знаходиться в корені сайту. У закладках браузера фавікон відображається поруч із назвою сайту, також використовується як іконка для програми.
Як фавікон найчастіше використовують лого компанії, також це може бути зображення пов'язане з брендом або відповідне тематиці сайту. Встановлений фавікон не варто часто змінювати, тому що користувачі запам'ятовують, як виглядає ваша іконка в браузері та асоціюють з брендом. Зображення допомагає швидко знайти потрібну вкладку у браузері.
Чому важливо використовувати фавікон?
Фавікон - це елемент маркетингу, пов'язаний з вами, створений для користувачів. Додавання його до сайту допомагає користувачам ідентифікувати ваш сайт серед інших раніше відкритих у браузері.
Також фавікон нагадує про те, що ви були на сайті та допомагає швидко знайти сайт серед інших. Також оригінальний фавікон допоможе відрізнити ваш сайт від конкурентів та показати ваш рівень компетенції.
Як створити фавікон?
Щоб створити фавікон, виберіть відповідне зображення. Вибирайте картинку з урахуванням специфіки вашого сайту, наприклад, логотип компанії або продукт. Порада: не використовуєте надто деталізоване зображення, якщо ваш логотип довгий, краще використовувати його спрощену (квадратну версію), переконайтеся, що картинка асоціюватиметься у клієнтів з вашим сайтом.
Створення або зміна фавікону
Для створення фавікон потрібно підготувати зображення розміром приблизно 512х512 пікселів. Зображення можна буде обрізати за допомогою Wordpress. Рекомендуємо відредагувати зображення, якщо потрібно, перш ніж завантажувати на сайт.
Якщо ви хочете створити зображення з нуля або внести зміну, варто користуватися програмами Photoshop, Illustrator, Gimp, Inkskape або їх онлайн аналогами тощо. Для онлайн генерації фавікон є багато зручних ресурсів, наприклад, Canva, яка дає можливість змінювати розміри, кольори, прозорість зображення.
Коли ви створите зображення, яке вам до смаку, його потрібно зберегти в gif, png або jpeg для завантаження на сайт.
Як додати фавікон для WordPress сайту?
Для додавання чи зміни фавікона не потрібно мати спеціальних знань або бути розробником, починаючи з WordPress 4.3, додавання фавікона стало простим.
Увійдіть до адмінки WordPress, в меню клацніть на пункт Зовнішній вигляд>Налаштувати
Відкриється сторінка редагування головної сторінки вашого сайту.
Виберіть вкладку Властивості сайту, в якій можна змінити "Короткий опис" та "Іконку сайту".
Далі ви можете завантажити раніше підготовлене зображення, клацніть Вибрати зображення.
За допомогою стандартного завантажувача зображень виберіть необхідну картинку та завантажте її на ваш хостинг для Вордпрес. Натисніть вибрати та редактор Вордпрес запропонує вам обрізати зображення. Підганяйте картинку під потрібний розмір, натисніть Обрізати зображення і подивіться, як зображення виглядатиме як відображатиметься вибране вами зображення, якщо вам не сподобалося зображення, клацніть змінити і виберіть нову іконку для сайту. Щоб зміни вступили в дію, натисніть опублікувати.
Інші способи зміни фавікона для сайту створеного за допомогою CMS Wordpress
Встановлення плагіна
Багато користувачів вважають за краще використовувати плагін для зміни іконки. Одним із плагінів є Favicon by RealFaviconGenerator.Встановити його потрібно з адмін панелі WordPress
Перевагою даного плагіна є попередній перегляд того, як іконка відображатиметься на різних пристроях та операційних системах.
Якщо у вас є досвід роботи з кодом, то ви можете завантажити фавікон в кореневу директорію сайту. Далі потрібно внести зміни до коду хедера вашого сайту header.php файл. Більш детально про цей спосіб можете почитати в документації Wordpress.
Підсумуємо. Додати фавікон досить просто як для новачка, так і для досвідченого користувача. А використання іконки дозволить легко знайти ваш сайт серед інших.
Нагадуємо, що швидкий хостинг SSD для WordPress доступний на нашому сайті.
Відчуйте всі переваги швидкої роботи та встановлення CMS у пару кліків.
Переклад із сайту wpexplorer.com
