Як зробити фавікон для сайту
Зробити простий сайт можна, але чи принесе його наявність вашому бізнесу результат? Питання складне, адже якщо ви створюєте ресурс для своєї справи, то тут важлива кожна дрібниця. Як показує статистика, одного SEO недостатньо. Зараз, при створенні будь-якого сайту, важливо приділити увагу тонкощам. Наприклад, до елементів дизайну, які ненав’язливо потрапляють до уваги користувача і швидко запам’ятовуються. Ось одним з таких елементів – фавікон. Саме цей елемент підкреслює стиль і унікальність сайту на тлі інших. У цій статті ми розглянемо, що це за такий елемент і на що звернути увагу при його створенні.
Що таке фавікон
Щоб повністю розібратися в темі почнемо з визначення. Favicion – невеликий значок, картинка, яку користувач бачить у вкладці браузера поруч з Тайтл і перед назвою сайту в меню закладок. Як правило, в якості цієї картинки використовують логотип компанії, але тільки в мініатюрі. Це може бути велика літера, що відображає назву вашої компанії або невелике, тематичне зображення. У такий мініатюрки є одне важливе завдання – бути помітним і незабутнім для того, щоб сайт виділявся на тлі інших. Розмір фавікона, як правило, 32 * 32 або 16 * 16 пікселів.
Навіщо потрібен фавікон
Кожен з нас стикався з тим, що під час роботи за ПК відкрито безліч вкладок. Ми постійно між ними перемикається, для добування потрібної інформації. Щоб потрапляти на потрібний сайт, користувачі орієнтуються на картинку вкладки, а не на текст поруч з ним. Він в принципі і не помітний, якщо одночасно відкрито багато вкладок. І щоб розпізнати потрібний ресурс, досить просто подивитися на фавікон. З цього можна зробити простий висновок про те, навіщо ж потрібно це мініатюрне зображення:
- Воно забезпечує впізнаваність бренду.
- Спрощує пошук необхідної вкладки або закладки.
- Виділяє компанію серед конкурентів (звичайно ж якщо фавікон унікальний).
- Підтримує єдиний стиль ресурсу.
- Підвищує довіру до компанії, так як ви подбали навіть про таку дрібницю.
- Важливо для SEO, так як ресурс буде видно в пошуковій видачі
Як відображається favicon сайту в пошуку
Відразу відзначимо, що такий невеликий значок стане в нагоді і для вкладок і для пошукової системи. Гугл тестує favicion в пошуковій видачі на десктопній версії ресурсу, а в мобільному варіанті, у видачі, він відображається на постійній основі. Знайти його можна зліва від самої адреси сайту. Він виступає в ролі додаткового орієнтиру для вибору посилання і якщо у вас ще немає фавікона, задумайтеся про його створення. Сайт без картинки швидко загубиться серед яскравих посилань конкурентів.
Як створити фавікон для сайта
Існує кілька варіантів створення фавікона, розглянемо докладніше:
- Замовити унікальний малюнок у дизайнера.
- Намалювати зображення самостійно використовуючи Photoshop.
- Завантажити готову картинку, але тільки підходящу вашій тематиці.
- Скористатися простими онлайн-сервісами для самостійного створення.
У першому варіанту вам необхідно буде оплатити роботу дизайнеру, який повністю врахує ваші вимоги. Другий варіант – безкоштовний, але він актуальний тим, хто вміє працювати в Фотошопі (можна скористатися іншим графічним редактором). Тут потрібно буде проявити свою фантазію і витратити кілька годин свого часу.
У третьому випадку досить просто завантажити фавікон. Існують ресурси, де є набір стандартних картинок. Все, що вам потрібно, просто вибрати потрібний варіант і встановити на свій сайт. А ось 4-й – корисний тим, хто вже має якесь зображення і йому просто потрібно його трансформувати в фавікон. Звичайно зі збереженням якості.
Допустимі формати і розміри
В даному випадку – розмір має значення. Як і для інших растрових картинок, він вимірюється в пікселях. Існує стандартний розмір, який буде підтримуватися в усіх браузерах: 16 * 16 пікселів. Також використовують і такі варіанти: 24 * 24, 32 * 32 і 64 * 64 пікселів.
Гугл рекомендує використовувати квадратні картинки більше 16 * 16 пікселів, щоб вони в браузері могли масштабуватися, при цьому не втрачаючи якість. Запам’ятайте, картинка повинна бути квадратною!
Де я можу використовувати фавікон?
Фавікон можна використовувати на сайті, на мобільних пристроях. Користувач може використовувати його, зберігши на робочому столі (щось на зразок закладки) на Android, IOS, Windows Phone. Також можна використовувати і в програмах і додатки для РС / Мас.
Онлайн-інструменти для створення favicon
І так, ми вже сказали, що для створення фавікона необов’язково бути дизайнером або звертатися до фрілансерів. Існують прості онлайн-інструменти, які дозволяють будь-якому охочому перетворити наявну картинку в зображення потрібного формату, або намалювати нову самостійно.
Щоб намалювати фавікон, необов’язково бути дизайнером або звертатися в дизайнерське бюро або до фрілансерів. Онлайн-генератори дають можливість безкоштовно перетворити наявну картинку в зображення потрібного розміру і формату, намалювати самостійно або вибрати готове з бази.
Нижче представлений короткий список таких ресурсів.
favicon.by
Досить зручний генератор, що дозволяє перетворити будь-яке квадратне зображення в фавікон. Тут також можна намалювати його самостійно. Поле вже розділене на квадратики, тобто користувач бачить кожен піксель майбутнього зображення.
pr-cy.ru
Даний ресурс дозволяє не тільки створити фавікон. У його арсеналі є СЕО-інструменти для аналітиків, копірайтерів та адміністраторів. Сайт простий у використанні, але якщо виникли питання, досить просто вивчити інструкцію.
Favicon-Generator.org
Сайт швидко і якісно конвертує будь-яке зображення в faviсоn для різних операційних систем. Відразу відзначимо, що сайт англомовний. Є і галерея готових фавіконів.
katvin.com
Тут користувач може намалювати фавікон у відповідному розділі. Це відмінний сервіс для тих, хто хоче створити зображення самостійно. Тут відсутня можливість завантажити готову картинку зі свого ПК. Поле для малювання без сітки, проте її можна включити.
Як користуватися сервісом для створення favicon?
Велика частина ресурсів для створення фавікона працюють за однією схемою:
- Зайти на сайт і натиснути “Створити” (в разі самостійного створення).
- За допомогою наявних інструментів намалювати відповідний логотип.
- Якщо ресурс дозволяє використовувати готову картинку, просто скачайте її з ПК і переконвертує в favicon.
- Коли зображення готове, просто скачайте його на свій комп’ютер.
Які типи файлів можна використовувати в favicon
З моменту винаходу фавікона використовувався формат зображення .ico. Він може містити файли різного розміру. Браузери розпізнають його в кореневій папці сайту і самостійно підтягують у вигляді маленької іконки. Також можна використовувати і формат .png, непоганий варіант для Андроїд. А ось для Apple (браузер Safari) добре підійде розширення .svg (векторне зображення).
Такі браузери як Chrome, Firefox, Opera і Safari можуть підтримувати GIF- формат, проте не варто встановлювати в якості фавікона гіфку. Так, такий варіант приверне увагу, проте з часом буде відволікати.
Найпопулярніші варіанти формату:
.ico,
.png,
.svg,
.gif (без анімації).
До слова, є спеціальні сервіси, які допомагають визначитися з форматом картинки для конкретного браузера.
Як встановити favicon на сайт
Для автоматичного завантаження фавікона, необхідно завантажити його в кореневу папку сайту. Виглядати це буде так:
https://website.com/favicon.ico
де,
website.com – домен вашого сайту, а favicon.ico – ім’я файлу (можна залишити і в такому
варіанті, як в нашому прикладі).
Ми вже написали про те, що не всі браузери можуть розпізнати фавікон автоматично, тому іноді необхідно прописати між тегами <head> і </ head> наступне:
<Link rel = “shortcut icon” href = “/ favicon.ico” type = “image / x-icon”>
або
<Link rel = “icon” href = “/ favicon.ico” type = “image / x-icon”>
Якщо у вас ресурс створений на WordPress, то тут все трохи інакше. У розділі head файлу header.php пишемо:
<Link rel = “shortcut icon” href = “<? Php echo get_stylesheet_directory_uri (); ?> / Favicon.ico “/>
Як встановити окремі фавікони для мобільних пристроїв
| Android | iOS |
| Для гаджетів на Андроїд краще вибрати зображення 192 * 192 з форматом png: <link type=”image/png” sizes=”192×192″ rel=”icon” href=”…/android-icon-192×192.png”> | У випадку з айфоном, то тут необхідно вибирати формат PNG з розмірами 180х180: <link sizes=”180×180″ rel=”apple-touch-icon” href=”…/apple-touch-icon-180×180.png”> |
Особливості відображення favicon на різних пристроях
Логічно, що фавікон по-різному буде відображатися на моніторі ПК, планшеті і телефоні. Причина тому – різне розширення дисплея. Гаджети на ОС Android, в залежності від PPI, використовують такі розміри:
- 36 × 36,
- 48 × 48,
- 72 × 72,
- 96 × 96,
- 144 × 144,
- 192 × 192.
А ось планшети, смартфони і телефони на IOS, в залежності від типу екрану, вимагають такий розмір фавікона:
- Звичайний екран – від 57х57 до 76х76 пікселів.
- Retina-дисплей – від 114х114 пікселів і до 180х180.
