Що таке favicon

Багато користувачів інтернету не знають, що таке фавікон, хоч регулярно стикаються з ним під час роботи в мережі. Слово favicon походить від англійського словосполучення favorite icon – вибраний значок або значок. Ця піктограма відображається у вкладках браузерів перед назвою сторінки (яка виводиться за допомогою тега title) та як іконка в закладках.

Что такое favicon

Де можна побачити favicon сайту?

У статті ми розглянемо такі питання, що стосуються favicon: що це таке, навіщо він потрібен, як і де створюється, способи інтеграції в код сайту та вирішення проблем, пов’язаних із відображенням.

Докладніше про іконку сайту

Якщо ви неодноразово ставили питання, що таке favicon, то сьогодні ви дізнаєтеся про нього все, але перш за все слід узагальнити поняття значка (іконки), що використовується в комп’ютерній термінології.

Favicon – це відображається у відкритій вкладці браузера, ліворуч від назви відкритої сторінки, піктограма, так званий міні-логотип. Є своєрідною візитною карткою ресурсу, незалежно від движка (CMS), на якому той створений, встановленої теми та шаблону, що використовується. Піктограму можна зустріти на сайтах під управлінням як популярних CMS, таких як WordPress, Bitrix, Joomla, Drupal, так і на менш поширених. Зображення має розміри 16×16 пікселів та часто зберігається у форматі ico.
Инфографика Favicon

Призначення favicon

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

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

Favicon в поисковой выдаче Яндекса

Favicon у пошуковій видачі Яндекса

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

До уваги: ​​фахівці Яндекса створили спеціальний бот, що спеціалізується на індексації favicon. Після того, як фавіконка була встановлена, може пройти від тижня до декількох місяців, поки у видачі пошукової системи з’явиться красива піктограма поряд із сайтом.

Всі ці фактори можуть вплинути на збільшення відвідуваності сторінок вашого сайту.

Способи створення favicon

Так як фавікон – це піксельний графічний файл, то і створити його можна так само, як і звичайне зображення у форматі ico. Зробити фавікон можна наступними способами:

  • конвертувати із зображення практично будь-якого формату через спеціальний додаток;
  • скачати готову піктограму;
  • намалювати з нуля у графічному редакторі або скористатися онлайн-генератором.

Розберемося з кожним способом докладніше.

Галереї готових значків

Інтернет рясніє різними ресурсами, у тому числі й вузькоспеціалізованими. Одними з таких сайтів є ресурси, що зберігають та постійно поповнюють колекцію створених користувачами (а часом і роботами) іконок. Будь-яка така галерея дозволяє швидко вибрати і завантажити на комп’ютер або прямо на сайт зображення, що сподобалося.

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

  1. www.iconj.com/favicon-gallery-page1.html – містить понад 4 тисячі зображень, дозволяє завантажувати готові рішення необхідного розміру у форматах ico та gif. Після реєстрації з’явиться можливість додавання піктограм у вибране. Скопіювавши HTML-код, можна швидко вставити його у код свого сайту.

Додавання іконок до обраного ICON J

Додавання іконок до обраного на сайті ICON J
  1. www.favicon.cc – велика колекція значків, які можна знайти по дереву тегів або перегортання сторінок. З функціоналу доступні завантаження у форматі ico, online-редагування оригінальної піктограми, конвертування картинки в піктограму та перегляд нових/популярних файлів.

favicon.cc

Сайт favicon.cc
  1. www.freefavicon.com/freefavicons/objects – найбільший тематичний каталог, де можна знайти та завантажити іконку. Файли розсортовані за категоріями для зручності вибору та названі відповідно до вмісту.

Категорії для пошуку фавікон

Категорії для пошуку фавікон на сайті freefavicon.com

Онлайн генератори

За допомогою спеціалізованих сервісів потрібну favicon можна створити за кілька хвилин.

  1. Favicon.cc – редактор, який дарує можливість вибрати фон та піксель за пікселем намалювати малюнок за допомогою пензля, що підтримує прозорість. Також на сайті можна перетворити будь-який графічний файл на фавікон з його подальшим редагуванням.

Онлайн-редактор для створення фавікону

Створення за допомогою онлайн-редактора Favicon.cc
  1. Logaster.ru пропонує попрацювати над візитівкою, логотипом та фавіконкою сайту одночасно, щоб основні графічні елементи були взаємопов’язані та виконані в єдиному стилі. Виконується все кілька простих кроків: створюємо логотип, на його основі генератор пропонує відповідну йому іконку, після вибору якої відкриється графічний редактор для її коригування. Готовий логотип та значок завантажуємо після реєстрації в системі або через контекстне меню.

Регистрация на Logaster.ru

Реєстрація на Logaster.ru
  1. www.favicon-generator.org – простий сервіс, який створює favicon з вибраного зображення без можливості його редагування або обрізки.

Сервіс для створення favicon

Сервіс favicon-generator.org
  1. www.michurin.net/online-tools/favicon-editor.html – вузьконаправлений ресурс, де після завантаження картинки в jpeg, bmp або gif форматі вона буде зменшена до 16 пікселів по обидва боки без збереження пропорцій, а кількість кольорів зменшиться до 16 для мінімізації розміру файлу на виході. Додатково є функція модифікації готових ico.

Онлайн-редактор іконок favicon.ico

Онлайн-редактор іконок favicon.ico
  1. www.favicon.by и favicon.ru підтримують малювання власних піктограм та перетворення області або цілого зображення на фавікон. Є інструменти заливки та піпетка.

Малювання власних піктограм

Малювання власних піктограм
  1. www.favicomatic.com перетворить завантажений графічний файл на ico розміром 16×16, завантажить його на ПК і згенерує HTML-код для вставки на сайт.

Фавікон генератор Favic-o-matic

Фавікон генератор Favic-o-matic
  1. www.antifavicon.com – генератор простих favicon з текстовими написами, в якому користувач задає текст, вибирає колір фону, літер та межі та отримує готову іконку.

Генератор favicon із текстовими написами

Генератор favicon із текстовими написами

Графічні програми

За допомогою IconFX, Axialis IconWorkshop та подібних графічних редакторів можна легко створити іконку для будь-якого порталу, але лише за умови володіння користувачем базовими навичками роботи з подібними програмами. Якщо ви працюєте у Photoshop, завантажте для нього розширення під назвою ICOFormat, додавши підтримку імпорту іконок у форматі ico.

Розширення ICOFormat

Розширення ICOFormat

Через IconFX та альтернативи, можна як намалювати, так і конвертувати картинку або її частину в іконку, відредагувавши її, вибравши колір та розмір.

Створення нового малюнку в IconFX

Створення нового малюнку в IconFX

Додавання на сайт

За наявності файлу favicon.ico в корені директорії сучасні браузери автоматично намагаються підвантажувати файл, навіть якщо не прописаний в HTML-коді. Але для більшої надійності краще вказати фавіконку за допомогою простого коду, який необхідно розмістити між тегами head:

<head>
...
<link rel="shortcut icon" ENGINE="image/x-icon" href="директорія_зберігання_файлу/favicon.xxx">
...
</head>

Де атрибут href містить відносний або повний шлях до файлу на сервері, а rel повідомляє браузер про те, що цим рядком задається фавіконка сайту.

Відповіді на популярні запитання

При роботі з фавіконами у користувачів виникає безліч запитань. Спробуємо дати відповіді на найчастіші.

Робимо іконку з картинки чи фото

Багато графічних редакторів, що спеціалізуються на роботі зі значками, дозволяють конвертувати png, bmp, jpeg та інші формати в ico з можливістю обрізки вихідного файлу та редагування результату. На прикладі IcoFX це робиться так:

  1. Відкриваємо редактор та перетягуємо у його вікно графічний файл.
  2. Вибираємо варіант створення іконки із зображення.

Створення іконок із зображення

Створення іконок із зображення
  1. Після редагування зберігаємо отриманий файл ico і завантажуємо його на сайт.

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

Робимо прозорий фавікон

Відомо, що з поширених графічних форматів прозорість підтримується файлами з розширенням png. Як вихідник беремо файл png і конвертуємо його у фавікон за допомогою Photoshop (встановивши перед цим плагін ICOFormat), іншого графічного редактора або онлайн-сервісу, що підтримують прозорий шар, наприклад Favicon.cc.

Як отримати анімовану іконку

Створити анімований favicon допоможе спеціалізований сервіс:

  1. Переходимо за посиланням favicon.htmlkit.com/favicon/.
  2. Тиснемо «Огляд» та вказуємо шлях до першого слайду (кадру) анімації.

Створення анімованого favicon

Створення анімованого favicon
  1. Клацаємо по кнопці “Add another image”, щоб додати другий кадр і вказуємо бажану картинку, і так з усіма кадрами.
  2. Після закінчення додавання слайдів клацаємо “Download FavIcon Package”.

Завантаження FavIcon Package

Завантаження FavIcon Package

Як завантажити favicon?

Піктограми зазвичай лежать у відкритому доступі. Найпростіший спосіб копіювання фавіконки з чужого сайту полягає в переході на адресу: www.google.com/s2/favicons?domain=1 или favicon.yandex.net/favicon/1, де одиницю в обох випадках замінюємо URL площадки.

Копіювання фавіконки з іншого сайту

Копіювання фавіконки з іншого сайту

Також допомагає дописування /favicon.ico в кінці кореня сайту, наприклад, www.youtube.com/favicon.ico.

Спосіб працює не з усіма сайтами, тому що файл може зберігатися в будь-якій папці на сервері, а також мати іншу роздільну здатність і відмінну від favicon назву. Тому додатково можна скористатися пошуком відповідного рядка в HTML-коді сайту.

Дописывание /favicon.ico в конце корня сайта

Допишіть /favicon.ico наприкінці назви сайту

Що робити, якщо не відображається фавікон в Яндексі

Якщо в пошуковій системі не візуалізується нещодавно додана піктограма, швидше за все проблема криється в наступному:

  • робот, що індексирує, ще не встиг обробити ваш ресурс і додати піктограму;
  • файл за потрібною адресою не виявлений, слід подивитися, чи він правильно вказаний;
  • в коді під час його прописування допущена помилка або помилка;
  • код вставлено поза тегом head;
  • необхідно почистити кеш інтернет-браузера та перезапустити його.

Висновок

Додавання favicon здатне не тільки зробити сайт красивішим, але й підвищити кількість його відвідувачів. А як це зробити, ви знаєте!


Будем признательны за каждый лайк:

Оставьте комментарий, Ваше мнение очень важно для нас!
Введенный e-mail не будет виден другим пользователям :

Просимо ознайомитись з політикою конфіденційності и угодою про використання файлів cookie перед початком використання сайту.

Back to Top

Telegram

Подписывайтесь на наш канал в Telegram, будьте лучше ваших конкурентов

Подпишитесь на наш канал

You have Successfully Subscribed!