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

Дата:

2018-07-21 15:50:11

Перегляди:

304

Рейтинг:

1Дизлайк 0Любити

Поділитися:

Table of contents:

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

розмір favicon

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

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

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

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

favicon для сайту

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

Більше:

Розширення

Розширення "Економія трафіку Google Chrome

У статті піде мова про те, як здійснюється економія трафіку в Google Chrome. Цей режим ще називають "Турбо", і його практично кожен спостерігав в таких браузерах, як Yandex Browser або Opera. Проте в Google Chrome даний компонент відсутній, і заощади...

Смайли в

Смайли в "Скайпі" - опис, застосування, секрети

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

Ресурс вогняна сіль в

Ресурс вогняна сіль в "Скайриме"

Матеріал у грі «Скайрим» вогняна сіль має ряд застосувань, які будуть корисні для гравця. Цей предмет можна дістати кількома способами, які варто знати користувачу. Стаття надає всю потрібну інформацію з цього ресурсу.ВидобутокУ проекті ж...

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

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

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

З'єднання

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

favicon generator

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

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

Весь код підключення повинен мати наступний вигляд:

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

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

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

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

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

favicon яндекс

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

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

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

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

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

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


Article in other languages:

AR: https://tostpost.com/ar/computers/2385-favicon-size-creating-a-favicon-favicon-generator.html

BE: https://tostpost.com/be/kamputary/4210-favicon-pamer-stvarenne-favicon-favicon-generatar.html

DE: https://tostpost.com/de/computer/4209-favicon-gr-e-erstellen-eines-favicon-favicon-generator.html

En: https://tostpost.com/computers/4445-favicon-size-creating-a-favicon-favicon-generator.html

ES: https://tostpost.com/es/los-ordenadores/4214-un-favicon-el-tama-o-crear-un-favicon-un-favicon-generator.html

HI: https://tostpost.com/hi/computers/2386-favicon-favicon.html

JA: https://tostpost.com/ja/computers/2385-favicon-favicon-favicon.html

KK: https://tostpost.com/kk/komp-yuterler/4212-favicon-m-lsher-ru-favicon-favicon-generator.html

PL: https://tostpost.com/pl/komputery/4214-favicon-rozmiar-tworzenie-favicon-favicon-generator.html

PT: https://tostpost.com/pt/computadores/4211-favicon-o-tamanho-criar-um-favicon-favicon-gerador.html

TR: https://tostpost.com/tr/bilgisayarlar/4217-favicon-boyut-olu-turma-favicon-favicon-jenerat-r.html

ZH: https://tostpost.com/zh/computers/2564-favicon-size-creating-a-favicon-favicon-generator.html






Alin Trodden - автор статті, редактор
"Привіт, Я Алін Тродден. Я пишу тексти, читаю книги і шукаю враження. І я непогано вмію розповідати вам про це. Я завжди радий брати участь у цікавих проектах."

Примітка (0)

Ця стаття не має коментарів, будьте першим!

Додати коментар

Новини

Як встановити роутер - покрокове керівництво

Як встановити роутер - покрокове керівництво

Якщо ви вирішили встановити wi-fi у себе вдома, на роботі, або в якомусь іншому місці, то вам обов'язково потрібно придбати спеціальний пристрій, який називається роутер, або маршрутизатор. Це спеціальний прилад, який роздає безпр...

Квест

Квест "Клаустрофобія": відгуки та огляд

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

A4Tech - mouse для справжніх геймерів. Огляд миші A4Tech

A4Tech - mouse для справжніх геймерів. Огляд миші A4Tech

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

Як захистити інформацію на сайті від копіювання?

Як захистити інформацію на сайті від копіювання?

Кожен власник сайту знає, що при його веденні важливою для пошукових систем є унікальність розміщеного на ньому континенту. Але що робити, якщо постійно висне загроза крадіжки написаних текстів? Чи можна якось цього уникнути? Якщо...

XTBL як розшифрувати? Вірус-шифрувальник XTBL

XTBL як розшифрувати? Вірус-шифрувальник XTBL

Віруси є невід'ємною частиною життя сучасного користувача комп'ютера. Особливо страждають від них юзери операційної системи Windows від Microsoft. Звичайно, існують віруси і для інших ОС, але їх набагато менше. Такі системи MacOS ...

DNS-сервер не відповідає: що робити в такій ситуації?

DNS-сервер не відповідає: що робити в такій ситуації?

Нечасто, звичайно, але іноді користувачі при спробі доступу до інтернет-сайтів стикаються з тим, що браузер, встановлений в системі, видає повідомлення про те, що DNS-сервер не відповідає. Що робити для усунення проблеми, знає не ...