Favicon на сайті WordPress

23

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

Отже, почнемо з того, що ж таке цей самий Favicon. Власне, визначення терміна можна знайти у Вікіпедії. З визначення зрозуміло, що favicon — ні що інше, як іконка сайту, показывающаяся (якщо вона, звичайно, є на сайті) у вкладці браузера зліва від назви сайту. Якщо така іконка не встановлена, тоді на вкладці ви побачите тільки назву сайту.

Favicon на сайті WordPress

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

Favicon на сайті WordPress

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

ЯК ЗРОБИТИ FAVICON

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

Для створення іконки можна використовувати будь-яку відповідну програму. Однак можна поступити набагато простіше — скористатися онлайн сервісами для створення favicon. Таких сервісів не менше, ніж програм, і робота з ними проста і зрозуміла. За запитом «favicon online» Гугл або Яндекс підкажуть вам безліч варіантів, на будь-який смак.

Як непоганий варіант, можете спробувати сервіс http://favicon.ru/. Тут ви можете як створити іконку з наявного зображення, так і намалювати її самі з чистого аркуша. Крім того, на цьому ж сервісі ви можете замовити послугу створення іконки. Варіантів, як бачите багато. До речі, ви можете поставити цілком логічне запитання — А що, я не можу зробити іконку в редакторі Photoshop? А ось тут не все так просто. Проблема в тому, що для іконки favicon пред’являється ряд вимог.
Почнемо з розширення favicon. Традиційно це повинен бути файл з розширенням .ico. Чому традиційно запитаєте ви? Та тому що інші розширення для favicon можуть бути некроссбраузерными. Наприклад, браузер Internet Explorer до 11-ої версії не підтримує ніяких інших форматів для favicon, крім формату ico. Ну а Photoshop з коробки просто не підтримує роботу з файлами ico.

Що стосується інших форматів, то краще всього в цьому плані працює Firefox, він розпізнає всі популярні формати зображень png, gif, jpg та ін). До речі, підтримка формату gif означає, що ми можемо створити для сайту анімований favicon. Не впевнений, що це хороша ідея, але на деяких сайтах я зустрічав і такий favicon. Ось тільки побачити анімацію можна не у всіх браузерах (знову таки, проблема кросбраузерності). Chrome, наприклад, не підтримує анімацію іконки favicon, він просто покаже перший кадр анімації, тобто на вкладці ми побачимо статичну іконку.

З цього виходить, що якщо для вас важлива кросбраузерність (зокрема, підтримка старих версій IE), тоді для favicon бажано використовувати формат ico. Якщо ж підтримка старих версій IE в плані показу іконки не критична, тоді краще використовувати png. На поточний момент всі популярні сучасні браузери здатні відображати favicon і інших форматів. Сам же формат ico на сьогоднішній день вже можна вважати застарілим.

Серед інших вимог можна назвати розміри favicon. Це будуть традиційні 16х16 пікселів. Однак вони вже дещо застаріли. З тієї простої причини, що сайт можуть переглядати на десятках різних платформ і пристроїв. Саме тому можна зробити іконки різних розмірів і підключати ту чи іншу в залежності від пристрою (різні варіанти в документації). Найчастіше буде достатньо однієї іконки 16х16. Якщо вам необхідно врахувати всі можливі пристрої, тоді можете спробувати сервіс Real Favicon Generator. Завантажити картинку на виходьте отримуєте цілий пак іконок різних розмірів і код для їх підключення.

ЯК ПІДКЛЮЧИТИ FAVICON

Раніше тут було все просто. Ви могли створити іконку favicon.ico і просто покласти її в корінь сайту. Цього вже було досить, щоб favicon відобразився у вкладці, тобто в HTML не потрібно було писати ні строчки коду. Все тому, що браузери за замовчуванням шукають цей самий favicon.ico в кореневій директорії сайту.

Також можна було прописати код підключення favicon в коді HTML наступним рядком:

Як ви розумієте, в атрибуті href вказується шлях до іконки, яка в нашому випадку поміщена в корінь сайту. Відповідно, її можна покласти не обов’язково кореневу директорію, можна в будь-яку папку, прописавши правильний шлях.

Так було раніше. Але зараз все набагато складніше. З появою в HTML5 атрибута sizes ми можемо вказати кілька варіантів для підключення тієї чи іншої іконки. Вище я писав, що сервіс Real Favicon Generator згенерував мені цілий пак зображень і видав приблизно такий код для підключення favicon на сайт:

Як бачимо з коду, тут використовуються різні варіанти і розміри favicon. Код об’ємний, але завдяки чудовому сервісу нам не потрібно писати його вручну. Взагалі ж, для більшості сайтів буде цілком достатньо єдиною іконки і рядки коду, яка приводить в дію її (можна і без атрибуту sizes):

От і все, так просто ми підключили favicon в WordPress. Щоб поміняти іконки в WordPress необхідно виконати ту ж процедуру, у властивостях сайту просто змінивши картинку для іконки.

На цьому будемо завершувати статтю. Тепер ви зможете створити і додати іконки в WordPress і не тільки. Задавайте питання, якщо вам щось не ясно чи не виходить. Удачі!