Створення favicon для сайту

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

Підвищити CTR ресурсу, підкреслити його стиль і зробити улюбленцем публіки допоможе спеціальний значок у вигляді іконки.Називається він фавікон.

Іконка має досить яскраве візуальне зображення, яке легко і швидко запам'ятовується користувачами, ефектно виділяє сайт серед інших вкладок у браузері, дозволяє легко перемикатися між ними, орієнтуючись на зображення, а не на текст, який, як правило, не видно при великій кількості вкладок.

Створення Favicon для сайту дозволить покращити зовнішній вигляд ресурсу у видачі та вивести будь-який бренд за межі вікна браузера.

Що таке фавікон та які його функції

Favicon – компактне зображення у вигляді значка або іконки, що виконує роль міні-логотипу сайту.У перекладі англ.FAVorites ICON означає “значок для обраного”.

Його основне завдання - візуально виділити сайт в закладках, зробити веб-додаток впізнаваним, вплинути на поведінкові метрики користувачів, допомогти впросуваннісайту.Сьогодні цю піктограму можна побачити скрізь: у сніпетах результатів пошуку, в адресному рядку, на сторінках пошукової видачі Яндекс та Google поряд із url сайту, на порожньому початковому екрані десктопних та мобільних браузерах, у вкладках браузера, інших елементах інтерфейсу.

Створення фавікон для сайту дає можливість вирішувати наступні завдання:

1. Підвищує впізнаваність.Людська природа така, що візуальна пам'ять розвиненіша, тому споживачі швидко реагують і запам'ятовують яскраву графіку, ніж тексти.Не дивно, що в більшості випадків користувачі натиснуть на знайому піктограму, особливо якщо Favicon буде суміщений з логотипом компанії або бренду;
2. Підвищує відображення сайту у пошуковій видачі.Піктограма формує помітний у візуальному плані опис, підвищуючи клікабельність сніпету.У зображенні можна передати заклик до дії чи іншу інфографіку.Завдяки цій властивості можна ефектно виділити свій ресурс на тлі конкурентного середовища;
3. Полегшує завдання пошуку потрібного ресурсу та легко орієнтуватися у браузерних закладках.

Підсумовуючи, можна сказати, що Favicon максимально ефективно захищає інтереси сайтів та їх власників, підвищує клікабельність, трафік та позиції у видачі.

Формат та стилі фавікона

Традиційним форматом фавікон було прийнято вважати формат ICO, який характеризувався мульти-розмірністю.Його файл мав здатність зберігати у собі кілька варіантів розмірів іконки і зазвичай містився у корінь сайту, де його шукає Internet Explorer.

На сьогоднішній день цю технологію вважають застарілою, перевагу стали віддавати форматам Svg та Png з роздільною здатністю ICO, вони добре відображаються і мало важать.Перший використовується в Safari MacOS, другий – в інших операційних системах.

Стандартними розмірами вважаються 16х16, 32х32, 60х60 та 120х120 пікселів, при цьому важливо, щоб показники ширини та довжини іконки були рівними.При дотриманні технічних параметрів фавіконів, іконки сайтів правильно і добре відображатимуться на будь-яких пристроях і саме з тією картинкою, яку ви задумали.

Сам розмір картинки потрібно підбирати в залежності від типу та операційної системи пристрою.

Формування фавікона допускається і в таких форматах якGIF, JPEG, але слід знати, що такі формати не підтримуються всіма браузерами. Що робить їх використання недоцільним.

Вимоги до фавіконки

Піктограма повинна бути проста, зрозуміла, не перевантажена складними формами, що чітко читається при побіжному перегляді. Намагайтеся забезпечити її оригінальність таким чином, щоб вона відрізнялася унікальністю, візуалізувала тематику сайту та діяльність компанії в цілому (містити логотип компанії, першу літеру її назви або інше зображення, що відповідає особливостям бізнесу) Ці елементи повинні органічно вписатися в квадратну форму, викликати інтерес і бажання натиснути і обов'язково бути доступні для сканування пошуковими роботами.

Є характерні вимоги до назви файлу.Традиційно його називаютьFavicon, але за фактом іконка може мати будь-яку іншу назву, якщоHTML-кодбуде вказаний до неї шлях.

Існує багато онлайн-сервісів для створення іконок сайтів у потрібних розмірах та форматах.

Забезпечити хороше відображення фавікона у різних контекстах можна за допомогою двох стилів:

1. З суцільною заливкою, яка застосовується в сітчастих закладках та контекстних меню, де пристрій або браузер для досягнення однакового контексту використовує маску до фону;
2. З прозорим фоном, якими користуються популярні сайти світу.Така іконка оптимізована для розміщення поряд із url-адресою або ім'ям самого сайту.

Як створити фавікон

Існує багато варіантів для формування іконок для сайтів у потрібних розмірах та форматах, і для цього необов'язково бути дизайнером або мати професійні навички.

Замовити їх можна у спеціалістів компанії создание-сайта.net, зробити самостійно за кілька хвилин на нашому онлайн-генераторі або в графічному редакторі, намалювати у спеціальному онлайн-сервісі, а потім завантажити картинку в потрібному форматі або завантажити готові стандартні начерки з банків іконок.

Щоб картинка була видна на вкладці, її потрібно додати до кореневої папки сайту та прописати фавікон у коді HTML.Більше того, у вас є всі можливості перевірити, як відображається фавікон в основних пошукових системах.Для цього можна просто занурити ваш ресурс або провести необхідну перевірку за допомогою спеціальних сервісів.

Особливості фавіконів для різних платформ

Фавікон для сайту – це не просто файл Favicon.ico, який розташований у середині ресурсу.В даний час, коли є так багато платформ і пристроїв, рекомендовано генерувати велику кількість зображень, необхідних для настільних браузерів, пристроїв Android, iPhone/iPad, сумісних з Windows, Mac, iOS і т.д.

Пристрої iOS використовують сенсорний значок Apple з високою роздільною здатністю для ілюстрації закладок та ярликів на головному екрані.iPhone першого покоління вимагають зображення 57х57, а ось новий iPad з наявністю Retina-дисплея шукає зображення розміром від 114х114 до 180х180.

Для Android Google рекомендує вибирати фавікон розміром 192х192 пікселів, зображення яких збережені у форматі .png.

Для iOS Safari доводиться формувати мініатюрне зображення під назвоюapple touch icon.Це фавікон гарної якості та з високою роздільною здатністю у форматі .png, його розмірні параметри становлять 180х180.Користувачі iOS зможуть додати сайт на головний екран за допомогою функції Web Clip.У цьому випадку іконки будуть виглядати як додаток.

Як вже писали вище, у Safari Mac OS справи інакше.Щоб додати іконку, потрібно використовувати формат .svg, при цьому іконку слід робити плоскою, простою, без наявності тіні.Тільки тоді вона правильно відтворюватиметься при закріпленні вкладки в браузері Safari.