Веб студія » Блог » Як зробити фавікон для сайту
Дата публікації: 15 Квітня 2021

Як зробити фавікон для сайту

Зміст:

Зробити простий сайт можна, але чи принесе його наявність вашому бізнесу результат? Питання складне, адже якщо ви створюєте ресурс для своєї справи, то тут важлива кожна дрібниця. Як показує статистика, одного 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 “/>

Як встановити окремі фавікони для мобільних пристроїв

AndroidiOS
Для гаджетів на Андроїд краще вибрати зображення 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, в залежності від типу екрану, вимагають такий розмір фавікона:

  1. Звичайний екран – від 57х57 до 76х76 пікселів.
  2. Retina-дисплей – від 114х114 пікселів і до 180х180.
Колесніков Дмитро
Технічний директор, студії BRAINLAB

Залишити відповідь

Ваш e-mail не буде опублікований. Обов'язкові поля позначені *

Хочете зробити щось велике?
Дозвольте допомогти вам.
Чи готові? Зв'яжіться сьогодні.

Зв'яжіться з нами!

info@brainlab.com.ua

Наш офіс

Україна, Київ

вулиця Євгена Сверстюка, 19

Номер телефону

38 (095) 307 888 5

Ми в соцмережах

Калькулятор вартості сайту Brainlab

Цікавить вартість розробки сайту? Наш калькулятор дає можливість вивчити вартість кожного етапу і підібрати відповідний під бюджет варіант.
1. Тип сайту
Сайт візитка

Невеликий сайт, як правило, складається з декількох веб-сторінок (до 5), містить основну інформацію про організацію, приватну особу, компанію.

Детальніше про сайт
Landing Page

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

Детальніше про сайт
Корпоративний
сайт

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

Детальніше про сайт
Сайт-каталог

Являє собою багатосторінковий сайт з багаторівневою структурою. Такий сайт містить каталог продуктів компанії, є можливість вказувати ціни, знижки, акції, розділяти контент для різних груп користувачів (опт / роздріб).

Детальніше про сайт
Інтернет магазин

Інтернет-магазин, який містить каталог товарів компанії, з можливістю фільтрації і сортування. Користувачі можуть оформити замовлення, оплатити онлайн, зареєструватися, брати участь в програмі лояльності.

Детальніше про сайт
2. Дизайн
3. Верстка
4. Движок CMS
Тип сайту: Не вибрано
0 $
Дизайн: Не вибрано
0 $
Верстка: Не вибрано
0 $
Движок CMS: Не вибрано
0 $
Приблизна вартість:0 $
Зразкові терміни:0 днів

Хочете зробити щось велике?
Дозвольте нам допомогти вам.

Чи готові? Зв'яжіться сьогодні.
Заповніть поле
Заповніть поле
Заповніть поле
Дякую за заявку!

Наші менеджери зв'яжуться з вами найближчим часом.