Отже, почнемо з того, що ж таке є цей самий Favicon. Власне, визначення терміна можна знайти у Вікіпедії. З визначення зрозуміло, що favicon - ні що інше, як іконка сайту, показує (якщо вона, звичайно, є на сайті) у вкладці браузера зліва від назви сайту. Якщо така іконка не встановлена, тоді на вкладці ви побачите тільки назва сайту.
Погодьтеся, наявність такої іконки робить сайт більш впізнаваним. Особливо це стосується брендових проектів, які можуть знати і регулярно відвідувати багато користувачів. Наявність favicon на сайті має ще один, часом значний, плюс - ця ікона показується в результатах окремих пошукових сервісів. Наприклад, Яндекс Пошук показує favicon.
Вигода тут дуже проста: користувач щось шукає, набирає пошуковий запит, отримує результати пошуку, серед яких, припустимо, буде і ваш сайт, але, скажімо на п'ятому місці. При цьому користувач знає ваш сайт, відвідує його. Як ви думаєте, наскільки ймовірним є те, що користувач, побачивши в результатах пошуку знайому іконку, вибере ваш сайт? Думаю, вірогідність досить висока. Саме тому мати favicon на сайті, особливо брендовому проект, вкрай бажано.
Хочете швидко навчитися створювати сайти і блоги на WordPress з унікальним дизайном?
Отримайте найповнішу в Рунеті безкоштовну систему навчання створення сайтів на WordPress
ЯК ЗРОБИТИ FAVICON
Отже, якщо на вашому сайті WordPress все ще немає іконки, тоді саме час додати її. Однак перед додаванням, її необхідно зробити. Для початку ми розглянемо універсальні способи створення favicon, ну а трохи нижче ви дізнаєтеся, як додати favicon на сайт WordPress (в WordPress зробити це взагалі вкрай просто).
Для створення favicon можна використовувати будь-яку відповідну програму. Однак можна поступити набагато простіше - скористатися онлайн сервісами для створення favicon. Таких сервісів не менше, ніж програм, і робота з ними проста і зрозуміла. За запитом «favicon online» Гугл або Яндекс підкажуть вам безліч варіантів, на будь-який смак.
З цього виходить, що якщо для вас важлива кроссбраузерность (зокрема, підтримка старих версій IE), тоді для favicon бажано використовувати формат ico. Якщо ж підтримка старих версій IE в плані показу іконки не критична, тоді краще використовувати png. На поточний момент всі популярні сучасні браузери здатні відобразити favicon і інших форматів. Сам же формат ico на сьогоднішній день вже можна вважати застарілим.
Серед інших вимог можна назвати розміри favicon. Це будуть традиційні 16х16 пікселів. Однак вони також вже дещо застаріли. З тієї простої причини, що сайт можуть переглядати на десятках різних платформ і пристроїв. Саме тому можна зробити іконки різних розмірів і підключати ту чи іншу в залежності від пристрою (різні варіанти в документації). Найчастіше буде достатньо однієї іконки 16х16. Якщо вам необхідно врахувати всі можливі пристрої, тоді можете спробувати сервіс Real Favicon Generator. Завантажуєте картинку - на виходите отримуєте цілий пак іконок різних розмірів і код для їх підключення.
ЯК ПІДКЛЮЧИТИ FAVICON
Раніше тут було все просто. Ви могли створити іконку favicon.ico і просто покласти її в корінь сайту. Цього вже було досить, щоб favicon відобразився у вкладці, тобто в HTML не потрібно було писати жодного рядка коду. Все тому, що браузери за замовчуванням шукають цей самий favicon.ico в кореневій директорії сайту.
Також можна було прописати код підключення favicon в коді HTML наступним рядком:
Хочете швидко навчитися створювати сайти і блоги на WordPress з унікальним дизайном?
Отримайте найповнішу в Рунеті безкоштовну систему навчання створення сайтів на WordPress
Як ви розумієте, в атрибуті href вказується шлях до іконки, яка в нашому випадку поміщена в корінь сайту. Відповідно, її можна покласти не обов'язково кореневу директорію, можна в будь-яку папку, прописавши коректний шлях.
Так було раніше. Але зараз все не набагато складніше. З появою в HTML5 атрибута sizes ми можемо вказати кілька варіантів для підключення тієї чи іншої іконки. Вище я писав, що сервіс Real Favicon Generator згенерував мені цілий пак зображень і видав приблизно такий код для підключення favicon на сайт:
Як бачимо з коду, тут використовуються різні варіанти і розміри favicon. Код об'ємний, але завдяки чудовому сервісу нам не потрібно писати його вручну. Взагалі ж, для більшості сайтів буде цілком достатньо єдиною іконки і рядки коду, що включає її (можна і без атрибута sizes):
FAVICON НА САЙТ WORDPRESS
На закінчення хотів би показати вам, як додати favicon на сайт WordPress. Як я вже зазначав, зробити це дуже просто. В фотошопі я намалював простеньку картинку з літерою S (будемо вважати її логотипом сайту) і зберіг її в форматі png.
Йдемо далі. Наступним кроком буде админка WordPress. Так, ви не помилилися. Нам не потрібно використовувати сторонні сервіси, WordPress все зробить за нас. Заходимо в меню Зовнішній вигляд - Налаштувати - Властивості сайту.
У меню, натискаємо кнопку Виберіть файл, щоб завантажити файл або вибрати його з бібліотеки файлів вашого сайту. Зверніть увагу, що WordPress рекомендує використовувати картинку квадратних пропорцій з розміром сторони не менше 512 пікселів. Вибираємо або завантажуємо картинку - інше WordPress зробить за нас.
Після збереження можна побачити цілком гідний результат у вкладці браузера.
У вихідному коді сайту при цьому ми побачимо нові рядки, в яких підключається favicon, це буде приблизно такий код:
Ось і все, так просто ми підключили favicon в WordPress. Щоб поміняти favicon в WordPress необхідно виконати ту ж процедуру, у властивостях сайту просто змінивши картинку для іконки.
На цьому будемо завершувати статтю. Тепер ви зможете створити і додати favicon в WordPress і не тільки. Задавайте питання, якщо вам щось не ясно чи не виходить. Успіхів!
Хочете швидко навчитися створювати сайти і блоги на WordPress з унікальним дизайном?
Отримайте найповнішу в Рунеті безкоштовну систему навчання створення сайтів на WordPress
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Хочете швидко навчитися створювати сайти і блоги на WordPress з унікальним дизайном?
Отримайте найповнішу в Рунеті безкоштовну систему навчання створення сайтів на WordPress "Унікальний сайт з нуля"