Як встановити favicon на WordPress

Favicon або іконка – це невелике зображення у вкладці браузера, яке ідентифікує ваш сайт. Також це зображення служить при додаванні вашого сайту на робочий стіл мобільного пристрою для швидкого доступу. Відсутність favicon у сайту – одна з найбільш поширений проблем при створенні сайту.

Якщо ви використовуєте комерційну тему для сайту, то скоріше ця іконка вже в ній буде присутня і ця інструкція не буде потрібною.

Чому варто додати favicon на ваш сайт?

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

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

Вигляд іконок в Google Chrome

Вигляд іконок в Google Chrome

Кожен з цих сайтів має свою унікальну іконку і можна без жодних проблем (знаючи, де чия) відкрити потрібний сайт, що не перебираючи кожну вкладку і не підводячи мишкою до заголовку. Все як на долоні – потрібно лише запам’ятати іконки часто використовуваних вами сайтів. Якщо ви активний користувач інтернет, то у вас швидше за все в кожному браузері відкрито по 30-40 вкладок. Без іконок було б дуже тяжко користуватись браузером, коли відкрито багато сайтів.

Як створити favicon

У найпростішому варіанті іконки бувають стандартного  квадратного розміру – 32х32 або 16х16 пікселів. Таку іконку можна без проблем можна зробити в Photoshop, або будь-якому іншому графічному редакторі. Для простоти – створіть зображення розміром 128х128 пікселів, а потім зменшіть масштаб до 32х32 або 16х16, якість не повинно особливо постраждати. Потім збережіть зображення в формат PNG.

Створюємо іконку за допомогою онлайн-генератора LOGASTER

Створення фавікона онлайн не вимагає ніяких додаткових зусиль або спеціальних навичок в дизайні. Серед російськомовних хочу звернути вашу увагу на сервіс Логастер.

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

Крім того логотип можна буде використати для свого сайту.

Покажемо це на прикладі

1. Заходимо на сайт Логастер і для зручності вибираємо російську мову, якщо ви в англійській почуваєтесь некомфортно. Клікаємо по кнопці Создать Логотип. Заповняємо поля – Название, Слоган, Вид деятельности:

Logaster

Logaster

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

2. Натискаємо ДАЛЕЕ і вибираємо собі логотип:

Вибираємо логотип

Вибираємо логотип

3. Редагуємо логотип, вибравши необхідні кольори:

Редагуємо логотип

Редагуємо логотип

4. Тепер можна створити фавікон. Із зображень вибираємо собі необхідне:

Створення фавікон

Створення фавікон

5. Далі редагуємо фавікон, вибравши його форму та заливку:

Редагуємо фавікон

Редагуємо фавікон

6. Після натискання СОХРАНИТЬ ми побачимо створені логотип та фавікон:

логотип та фавікон

логотип та фавікон

На жаль повноцінний сервіс Логастер для створення лого та фавікону є платним. Безкоштовно можна створити лого та завантажити на комп’ютер з водяними знаками. А повноцінний favicon взагалі безкоштовно не можна завантажити. Звичайно, якщо ви робите сайт клієнту, то можете заплатити і отримати повноцінний сервіс, так як клієнт платить. Але якщо Ви робите сайт для себе, то можна зберегти favicon з допомогою правої миші і підредагувати в графічному редакторі, наприклад в paint.net.

7. Зберігаємо зображення фавікону на комп’ютер:

Зберігаємо favicon

Зберігаємо favicon

8. Редагуємо favicon в paint.net:

Редагуємо favicon в paint.net

Редагуємо favicon в paint.net

Змінюємо розміри favicon в paint.ne

Змінюємо розміри favicon в paint.net

Примітка: для більшості тем у WORDPRESS, які підтримують  favicon, стандартні розміри фавікону повинні бути 512 х 512.

Малюємо іконку вручну

Якщо ви не володієте графічним редактором і не хочете звертатися до дизайнерів на біржах праці, тоді є другий варіант – намалювати іконку з допомогою онлайн-сервісу. Є кілька варіантів: favicon.cc, Faviconer, DynamicDrive. Там же можна вибрати з готових варіантів, завантажених іншими користувачами.

Ось так виглядає процес створення іконки вручну в сервісі Favicon.cc:

Favicon.cc

Favicon.cc

 

Сервіс favicon.cc дозволяє як самому створити фавікон, так і імпортувати картинку, з якої можна створити його. Потім дозволяє безкоштовно зберегти фавікон з розширенням ico на комп’ютер.

Установка favicon на WordPress

Є кілька варіантів підключення іконки до сайту. Перший спосіб – найпростіший і доступний практично всім з новою версією WordPress – скористатися інструментами нашого движка. Якщо настройки вашої теми мають опцію для установки favicon – використовуйте її.

Другий спосіб – це ручне внесення двох рядків коду в файл вашої теми. Третій спосіб – використання спеціальних плагінів WordPress для цього завдання. Я рекомендую спробувати спочатку перший варіант, тому що тримати додаткові плагіни – це не найкраще рішення, тим більше, для такої разової операції, як favicon для сайту.

Є багато неякісних безкоштовних тем для WordPress, які теми жорстко прописують шлях до іконки в код файлу header.php. І якщо жоден із запропонованих варіантів не спрацьовує, то вам потрібно відкрити файл header.php в директорії з вашою темою і видалити всі згадки в тексті зі словом «favicon».

Спосіб 1. Використовуємо можливості WordPress

Якщо у вас версія WordPress 4.3 і новіша, то вам достатньо буде завантажити графічний файл розміром 512х512 пікселів і через інтерфейс «Зовнішній вигляд» – «Налаштувати» перейти в розділ «Властивості сайту». Після цього завантажити ваш файл через завантажувач WordPress і він автоматично масштабується під всі необхідні розміри.

Розглянемо це на прикладі з прінтскрінами:

«Зовнішній вигляд» - «Налаштувати»

«Зовнішній вигляд» – «Налаштувати»

Властивості сайта

Властивості сайта

Клікаємо на Змінити зображення:

Змінити зображення

Змінити зображення

Завантажуємо фавікон. Увага – фавікон має бути розміром більш ніж 512 на 512 пікселів.

Також деякі теми мають власні опції для favicon. Тому в першу чергу необхідно скористатись цими опціями уважно вивчивши налаштування теми.

Спосіб 2. Підключення в файл header.php

В даному способі необхідно завантажити іконку на хостинг. Можна її завантажити через меню Медіафайли або через FTP, SSH, через файловий менеджер вашої хостинг-панелі. Рекомендуємо завантажувати через FTP, так як легше буде прописати шлях до цього файлу. Файл через FTP потрібно розмістити в кореневій директорії сайту, щоб він був доступний за адресою http://адрес-вашого-сайту.com.ua/favicon.ico, або favicon.png, в залежності від типу іконки.

Тепер зайдіть на хостингу в директорію з вашою темою (/wp-content/themes/ваша_тема /) і відкрийте на редагування файл header.php. Після відкриваючого тега <head> вставте наступний код:

<link rel=”icon” href=”http://адрес-вашого-сайту.com.ua/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”http://адрес-вашого-сайту.com.ua/favicon.ico” type=”image/x-icon” />

Увага, якщо ваша іконка має розширення .png, то необхідно поміняти в коді .ico на .png.

Тепер залишилося зберегти цей файл і відновити головну сторінку в браузері. У вкладці повинна з’явитися нова іконка, яку ви успішно підключили до сайту.

Увага: недолік цього методу той, що при оновленні теми файл header.php зміниться і ваш код пропаде. Тому прийдеться цей код вставляти знову після оновлення теми.

Спосіб 3. Використання спеціальних плагінів для WordPress

Якщо попередні способи не підходять, то можна пошукати спеціальні плагіни для favicon. Наприклад це плагіни «Insert Headers and Footers» або «All In One Favicon».

Заходимо в розділ «Модулі» – «Додати новий», в пошуку вбиваємо Insert Headers and Footers, встановлюємо знайдений плагін і активуємо його. Далі в меню Плагіни знаходимо цей плагін і налаштовуємо його. Аналогічно можна зробити з плагіном «All In One Favicon». Можна пошукати і інші плагіни для WordPress.

Висновок

Якщо у вас не спрацювала установка іконки ні з одним із запропонованих мною способів – напишіть в коментарі, обговоримо, як вирішити вашу дрібну проблему. Але, як особисто мені здається, цих варіантів більш ніж достатньо щоб вирішити таку просту проблему.

Be Sociable, Share!

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *