Що таке favicon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Через 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. Вибираємо варіант створення іконки із зображення.

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

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

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

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

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

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

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

3. Клацаємо по кнопці “Add another image”, щоб додати другий кадр і вказуємо бажану картинку, і так з усіма кадрами.
4. Після закінчення додавання слайдів клацаємо “Download 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-коді сайту.

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

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

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

Висновок

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