Іноді навіть найменші деталі на нашому сайті можуть грати дуже велику роль у дизайні та юзабіліті. І якраз про таку маленьку деталь ми сьогодні з вами і поговоримо ...
Що таке фавікон?
Favicon (від англійської favorite icon - обраний знак) - це маленька картинка, яка асоціюється з певним вебсайтом або сторінкою.
Вона розташовується у верхній вкладці браузера навпроти назви сайту, який ви відкрили. А також ця картинка відображається в закладках, якщо ви додали сайт у вибране.
Для чого його потрібно використовувати?
Цей маленький значок, який, здавалося б, використовується на сайтах головним чином "для краси" або щоб просто не було порожнього місця у квадратику напроти назви сайту в браузері ...
Насправді він є одним з ключових чинників формування бренду вашого сайту. Фавікон повинен відображати сутність сайту і в той же час він повинен бути незабутнім і індивідуальним.
Фавікон повинен економити час вашого відвідувача. Ви запитаєте: яким же чином він може економити час?
Справа в тому, що багато користувачів, користуючись інтернетом, часто відкривають багато вкладок одночасно. І коли на вкладках немає значка, а просто порожній квадратик, то дуже велика ймовірність того, що він ніяк не відрізнить ваш сайт і просто-напросто закриє його.
Тому завжди робіть так, щоб вашому відвідувачеві було зручно, щоб ваш відвідувач, навіть якщо у нього відкрито багато різних вкладок в браузері або ж якщо у нього багато сайтів знаходиться у закладках, щоб він завжди легко міг знайти ваш сайт серед "натовпу" інших сайтів .
Ще такий момент - коли людина шукає інформацію в пошуковій системі він з більшою ймовірністю клацне на ваш сайт, якщо там буде стояти фавікон, ніж на сайт вашого конкурента без фавікону.
Візуальне сприйняття відіграє величезну роль для людини. Коли ми заходимо на якусь вебсторінку, наш погляд падає насамперед на картинку, а потім вже на текст, який її оточує.
Те ж саме, коли я, наприклад, переглядаю закладки, щоб знайти потрібний мені ресурс, мій погляд передусім ковзає по фавіконам, і часто тільки цього буває достатньо, щоб знайти те, що я шукала. Рідше - після того, як я знайду потрібну мені картинку, я придивляюся, що ж там написано з нею поруч.
Таким чином, час мого пошуку помітно скорочується.
На картинках, які я розмістила в цій статті, ви можете бачити наочні приклади того, про що я тут пишу.
Якщо на вашому сайті немає фавікону, браузер просто буде показувати порожній квадратик. Якщо у вас в закладках є досить багато таких "безфавіконових" сайтів, то пошук потрібного вам ресурсу може стати досить складним завданням - вам доведеться переглянути їх всі, щоб знайти потрібний сайт.
Де мені його взяти?
Фавікон зазвичай - це картинка розміром 16х16 пікселів з розширенням .ico або .png
Ви можете самі намалювати його і потім просто перевести в потрібний формат за допомогою спеціальних сервісів або використовувати фотошоп.
Або ви можете знайти відповідну картинку на одному із сайтів з безкоштовними іконками.
Тут потрібно враховувати кілька моментів: щоб ваш фавікон не був занадто строкатим і щоб картинка виглядала цілісною (не складалася з якихось окремих частин, краще, щоб це був один об'єкт) щоб навіть у такому маленькому розмірі було зрозуміло, що там намальовано.
Як поставити фавікон на сайт?
Якщо ж у вас, наприклад, статичний сайт, побудований на html, вам потрібно залити картинку у папку з іншими зображеннями сайту, а потім додати у ваші html документи таку строчку, розташувавши її в тезі head:
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
або
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
Це вже залежно від того, який формат ви використовуєте.
Якщо у вас сайт на MaxSite CMS - тут ще простіше. Вам просто потрібно додати потрібну картинку в папку images / favicons. Тільки це має бути формат png.
Висновки:
Вигідніше все-таки використовувати фавікон, як в естетичних цілях (маленька акуратна картинка милує око), так і в практичних цілях (і відвідувачам і вам самим буде набагато зручніше з ним).