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