1. Більш докладно про іконці сайту
2. призначення favicon
3. Способи створення favicon
4. Галереї готових значків
5. онлайн генератори
6. графічні програми
7. Додавання на сайт
8. Відповіді на популярні питання
9. Робимо іконку з картинки або фото
10. Робимо прозорий фавікон
11. Як отримати анімовану іконку
12. Як завантажити favicon?
13. Що робити якщо не відображається фавікон в Яндексі
14. висновок

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

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

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

Більш докладно про іконці сайту

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Додавання іконок в обране на сайті ICON J

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

сайт favicon.cc

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

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

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

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

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

Створення за допомогою онлайн-редактора Favicon.cc

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

Реєстрація на сайті Logaster.ru

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

сервіс favicon-generator.org

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

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

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

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

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

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

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

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

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

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

розширення ICOFormat

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

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

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

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

<Head>

. . .

<Link rel = "shortcut icon" type = "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

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

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

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

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

висновок

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

Автор статті:

Олег скрип

Керівник компанії ApollonGuru, ментор SEO-матеріалів vc.ru. В інтернет-маркетингу з 2012 року. Люблю щоб все було чітко.