Як поміняти фавікон на сайті і що це таке
Фавікон - це абсолютно неправильне слово, просто воно використовується в розмовній лексиці веб-майстрів і під ним розуміють картинку, яку ви можете бачити у вкладці браузера, а також при знаходженні сайту в пошуковій системі Яндекс.
Ця ікона, хоча вона і зовсім крихітна (16х16), має велике значення в загальному сприйнятті сайту. Але її найголовніша роль - залучити користувачів в пошуковій видачі. Я вам гарантую, якщо у вас немає такої картинки, ви втрачаєте 10-30% кліків з пошуку, тому що люди клікають на ті сайти, які мають favicon!
І кому тепер справа, яку ви написали статтю, наскільки добре вона відповідає на питання людини і т.д. Її просто можуть не помітити, а все з однієї причини - немає favicon.
Отже, здавалося б така дрібниця, але значення її величезне. Таким чином, потрібно розібратися, як таку іконку додавати, а також як з міняти в разі потреби. Сьогодні я розповім вам про два варіанти: як це зробити через адмінку WordPress і як через html-код.
Задаємо іконку через адмінку WordPress
До речі, сама система радить завантажувати картинку не менше 512 піселей по ширині і висоті. Така рекомендація дається тому, що на мобільних додатках в браузерах можуть дійсно використовуватися такі розміри. Але в цілому ви маєте право повністю проігнорувати цю рекомендацію і завантажити файл будь-якого розміру. Головне, щоб ширина і висота були однаковими.
Як поміняти favicon через html код
Цей спосіб вже для тих, хто хоче залізти в код і взагалі розібратися, як це працює зсередини. Іконка сайту завжди задавалася в тезі head, де підключаються зовнішні файли: стилі, скрипти, бібліотеки і т.д.
Для такого підключення використовується одинарний тег link. У ньому потрібно задати деякі атрибути, а також задати шлях до файлу.
Типове підключення іконки виглядає саме таким чином. Давайте розглянемо кожен атрибут тега докладніше:
Rel - завжди цей атрибут використовувався для того, щоб вказати роль підключається файлу. Наприклад, stylesheet - таблиця стилів, shortcut icon - іконка і т.д. Просто запам'ятайте цей параметр, його потрібно обов'язково прописувати.
Href - найважливіший параметр, він визначає шлях до файлу. Якщо шлях заданий невірно, ви просто не побачите на сторінці ніяких змін. Шлях в цьому прикладі коду заданий так, як ніби файл icon.png лежить в тій же папці, що і файл з кодом сторінки.
Type - сьогодні використання цього атрибута є необов'язковим. Він вказує mime-тип підключається файлу. В цілому, його все-таки можна прописати хоча б для того, щоб в старих браузерах не було ніяких проблем з обробкою коду.
Формат картинки може бути будь-яким - jpeg, png, gif, ico. Останній формат створений спеціально для відображення таких іконок. У деяких програмах для малювання ікон, зображення зберігається саме в цьому форматі. Щоб підключити таку картинку, потрібно всього лише змінити атрибут type:
Однак сьогодні набагато простіше і розумніше буде використовувати png формат.
А де ж взяти іконку?
Переробити готову іконку або навіть поставити її як є. Для свого особистого блогу можна не сильно заморочуватися і просто знайти безкоштовне зображення, зменшити його і використовувати. Шукати можна в різних фотобанках. Наприклад, pixabay.
Загалом, з установкою такого важливого елемента сайту ні в якому разі не можна зволікати. Без іконки сьогодні ніяк не можна, тому негайно її встановлюєте, хоча б зовсім просту, поки не придумаєте щось цікавіше.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
