Favicon: розмір. Створення favicon. Favicon-генератор

Favicon: розмір. Створення favicon. Favicon-генератор

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

Що таке favicon для сайту?

Це невелика картинка, яку буде показано на вкладці переглядача. Розмір favicon становить 16x16 пікселів. Також ця картинка відображається в результатах видачі пошукових систем, і якщо favicon на сайті буде відсутній, то поруч із сайтом у видачі буде порожньо. Варто зазначити, що фавікон допомагає користувачеві відшукати конкретно ваш сайт серед сотні інших, тому його присутність на сайті хоч і не є обов 'язковою, але суворо рекомендована. І так, розмір favicon не обов 'язково повинен бути 16x16. Деякі вебмайстри роблять фавікон розміром 32x32 і навіть 64x64. Але у своїх рекомендаціях пошукові системи Google і "Яндекс" пишуть, що ідеальний розмір favicon - 16x16. Тому краще дотримуватися цих порад пошукових систем.


Як створити favicon?

Є кілька різних способів створення цієї картинки. Найперший і найпростіший спосіб створити favicon - вкрасти його, наприклад, з англомовного сайту.

Припустимо, ви створили блог з побутової техніки і повністю налаштували його, але залишився останній штрих - фавікон. Пишіть у пошуку Google запит appliances і дивіться перші 10 сайтів. Фавікони цих сайтів ідеально підійдуть вашому новому блогу. Якщо якась картинка вам сподобалася, відкривайте вихідний код сторінки і шукайте запис favicon.ico. Там буде вказана адреса розташуваннях фавікону. Відкрийте його і завантажте на комп 'ютер, потім завантажте на сайт і з' єднайте (про з 'єднання нижче).

Другий спосіб створення favicon розміром 16x16 пікселів - використовувати спеціальний сервіс генерації фавіконів. Він працює за наступним принципом: ви завантажуєте зображення (будь-якого розміру і розширення), яке підходить для титульної іконки сайту, і натискаєте на кнопку Create Favicon. Через секунду отримуєте готовий фавікон, який можна завантажити, завантажити на свій сайт і підключити. Найпопулярніший сервіс - Favicon Generator.

Відзначимо, що даний сервіс лише трохи спрощує процес створення іконок. Те ж саме можна зробити і самому. Просто знайдіть картинку, яка вам підходить, змініть її розмір до 16x16 пікселів і збережіть з розширенням ico. Все це проробляється протягом однієї хвилини в програмі Paint.

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

З 'єднання

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


Найчастіше цих дій достатньо для відображення фавіконів. Пошукові системи (наприклад, "Яндекс") автоматично розпізнають наявність фавікону в кореневому каталозі і використовують його у своїй видачі. Однак з "Яндексом" "іноді бувають непорозуміння. Багато вебмайстрів скаржаться, що фавіконки пропадають з індексу, а потім з 'являються заново. Щоб цього не відбувалося, потрібно підключити його.

Для підключення favicon "Яндекс" рекомендує використовувати метатег < link > з вказівкою конкретних атрибутів. Цей тег слід розмістити в розділі сайту < head >.

Весь код з 'єднання повинен мати такий вигляд:

<link rel=""icon"" href="/"/favicon.ico"" type=""image/x-icon"">

Цей код працює для пошукових систем і всіх браузерів. Можуть бути проблеми з відображенням у переглядачі Internet Explorer, але у всіх інших переглядачах відображення буде точним.

Зверніть увагу на адресу розташування зображення/favicon.ico. Його можна зробити таким: /favicon.gif. Тоді необхідно в корінь сайту помістити зображення з розширенням .gif, інакше відображатися фавікон не буде. Як відомо, картинки у форматі .gif можуть представляти собою слайдери. Цим користуються вебмайстри і роблять при цьому анімовані фавікони для своїх сайтів. Виглядає це цікаво, але не більше того.

Фавікон як інструмент просування сайту

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


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

Як пошуковик "" Яндекс "" розуміє фавіконки?

У пошукової системи є спеціальний робот, який відповідає за оновлення саме фавіконів. Цей робот за певним розкладом відвідує сайти, запитуючи головну сторінку і шукає в коді шлях із зазначенням розташування favicon.ico. Якщо цей шлях він не знаходить, то намагається завантажити іконку з батьківського каталогу, тому найчастіше досить просто файл з назвою favicon.ico помістити в батьківський каталог. Потім отримана іконка завантажується на сервер "Яндекса" і відображається в пошуку. Якщо її розмір буде більшим, то він попередньо перетворюється на 16х16, а розширення змінюється на png. Робот періодично перевіряє сайти на предмет зміни фавіконки. Зазвичай він відвідує оновлювані сайти один раз на місяць. Це і видно експериментальним шляхом: змініть фавікон свого сайту, і приблизно через місяць він з 'явиться в індексах пошуковика "" Яндекс "".

Конфлікт іконок

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

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