Какво е favicon и защо е важен за вашия уебсайт?

Favicon (съкратено от „favorite icon“, т.е. „любима иконка“) е малкото квадратно изображение, което представя уебсайт в разделите на браузъра, отметките, историята, резултатите от търсенето в Google, началните екрани на телефоните и инсталираните уеб приложения. Важен е, защото придава на сайта ви разпознаваемо лице на пръв поглед, улеснява намирането му сред много отворени раздели, показва, че сайтът е професионален и надежден, а вече се показва и до името на сайта ви в резултатите на Google. Без favicon посетителите виждат обща иконка с глобус или празна страница, а сървърът ви напълва журналите си с грешки 404. Можете да създадете пълен комплект favicon безплатно с генератора на favicon MakeFav.

Какво е favicon?

Favicon е малка брандирана графика, обикновено опростена версия на логото или единична буква или символ, която браузърите и други програми изтеглят от вашия уебсайт и показват навсякъде, където е нужен компактен визуален идентификатор. В настолен браузър тя обикновено се изобразява с размер 16 на 16 CSS пиксела, но самият файл трябва да е по-голям, за да остава ясен на екрани с висока плътност.

Технически favicon е просто файл с изображение, посочен в HTML кода ви (или намиращ се на стандартно място), който потребителските агенти изтеглят отделно от съдържанието на страницата. Днес „favicon“ рядко е един-единствен файл. Съвременният сайт обикновено предлага няколко версии на една и съща иконка, така че браузърите, търсачките, iOS и Android да получат формат и размер, които им подхождат.

Кратка история на favicon

Favicon води началото си от март 1999 г., когато Microsoft пуска Internet Explorer 5. Браузърът позволявал на потребителите да запазват страници в списък „Favorites“ (Любими) и търсел малък файл с иконка на име favicon.ico в корена на сайта, за да го покаже до всеки запазен запис. Идеята била проста: ако сайтът предоставя /favicon.ico, иконката се появява до отметката.

Скоро други браузъри възприемат функцията, а разделите (табовете) я правят далеч по-полезна. Когато разделите се превръщат в основния начин за навигация, favicon от украса на отметките става основно помощно средство за ориентиране. С годините подходът еволюира:

• Началото на 2000-те: елементът <link rel="icon"> позволява на сайтовете да посочват иконка на произволен URL адрес, а не само в корена, а браузърите, различни от IE, започват да приемат PNG и GIF файлове.
• 2010-те: Apple въвежда apple-touch-icon за началните екрани на iOS, а Android и Windows добавят свои конвенции, като иконки в манифест и плочки с изображения.
• Днес: SVG favicon, манифести на уеб приложения, иконки, съобразени с тъмния режим, и изискванията на Google към favicon в резултатите от търсенето превърнаха favicon в малка, но реална част от техническата настройка на сайта.

Къде се показват favicon днес

Вашата иконка се показва на много повече места от раздела на браузъра. Основните са:

• Раздели на браузъра: най-видимото място, където иконката често е единственото, което виждате, когато са отворени много раздели.
• Отметки и любими: иконката стои до заглавието на страницата в лентите и менютата с отметки.
• История и най-посещавани страници: браузърите показват favicon в списъците с история и на страниците за нов раздел.
• Резултати от търсенето в Google: и на мобилни, и на настолни устройства Google показва favicon на сайта до името и URL адреса му.
• Начални екрани: когато посетител добави сайта ви към началния екран на iOS или Android, touch иконката или иконката от манифеста се превръща в пряк път, подобен на приложение.
• Инсталирани PWA: прогресивното уеб приложение използва иконките от манифеста си за иконка в стартовия екран, начален екран при зареждане и превключвател на задачите.
• Плочки на Windows и закачени сайтове: по-старите версии на Windows и Edge използваха изображения за плочки, дефинирани за закачените сайтове; съвременните предимно използват повторно стандартните ви иконки.
• Визуализации на връзки в някои приложения: някои чат и продуктивни инструменти (Slack е добре известен пример) показват favicon на сайта до разгърната връзка. Повечето визуализации разчитат основно на изображенията Open Graph, но favicon често осигурява малкия знак на марката.

Защо favicon е важен за вашия уебсайт

Разпознаваемост на марката

Хората разпознават цветове и форми по-бързо, отколкото четат текст. Последователна иконка, повтаряща се в разделите, отметките и резултатите от търсенето, изгражда познатост всеки път, когато някой я види, а това е безплатна експозиция на марката при всяко посещение.

Доверие и достоверност

Липсващият favicon кара сайта да изглежда недовършен. Чистата, правилно изобразена иконка е малък знак, че някой държи на детайлите, което подкрепя усещането, че сайтът е легитимен. Тя не е функция за сигурност и фишинг сайтовете могат да копират иконки, но празната иконка по подразбиране рядко помага на бизнеса да изглежда утвърден.

Честота на кликване в резултатите от търсенето

Тъй като Google показва favicon до вашия резултат, той става част от това как изглежда той в сравнение с конкурентите. Google не е публикувал ефект върху класирането от favicon и не бива да очаквате повишаване на позициите. Ползата е във визуалното разпознаване: потребителите, които познават иконката ви, по-лесно ще забележат и изберат резултата ви, особено на мобилни устройства, където резултатите са компактни.

Удобство при много отворени раздели

Когато в браузъра са отворени двайсет раздела, заглавията се скъсяват до нищо и остава само favicon. Отличителната иконка позволява на хората да намерят вашия раздел веднага и да се върнат към него, вместо да отварят дубликат или да го забравят.

Професионално впечатление

Добре дизайнираният favicon показва същото внимание към детайла като останалата част от сайта ви. За продуктови страници, документация, блогове и уеб приложения той е един от най-евтините елементи за допълнителен финес, които можете да добавите.

Достъпност при намиране на раздели

Иконките помагат на потребители, които сканират визуално, вместо да четат, включително хора с дислексия или когнитивни особености, както и на всеки, който бързо превключва между задачи. Иконка с висок контраст и проста форма е по-лесна за забелязване. Но не забравяйте, че favicon е допълнение: той не замества ясното заглавие на страницата, на което разчитат екранните четци и помощните технологии.

Какво се случва, ако нямате favicon

Браузърите автоматично изискват /favicon.ico от корена на домейна ви, дори ако HTML кодът ви не споменава такъв. Ако файлът не съществува, се случват няколко неща:

• Обща иконка: посетителите виждат иконка по подразбиране с глобус, документ или празна иконка в раздела и отметките, което изглежда анонимно.
• Грешки 404 в журналите ви: всеки браузър, който поиска файла, генерира неуспешна заявка. При натоварени сайтове това добавя шум в журналите за достъп, мониторинга на грешки и анализите и може да скрие реални проблеми.
• Няма иконка в резултатите на Google: без валиден favicon, достъпен за обхождане, Google показва свой заместител по подразбиране до вашия резултат.
• Излишни заявки: браузърите може да опитат отново, добавяйки малко, но безсмислено натоварване към сървъра ви.

Дори много проста иконка е по-добра от никаква, защото премахва грешките 404 и дава на потребителите нещо разпознаваемо.

Форматите на favicon обяснени

Нито един формат не покрива всички платформи, затова повечето сайтове използват малък набор от файлове.

Старите изображения за плочки на Windows (конфигурирани чрез browserconfig.xml) бяха необходими за Internet Explorer 11 и старата версия на Edge. Днес рядко са нужни, освен ако не трябва да поддържате тези среди.

Насоките на Google за favicon в резултатите от търсенето

Ако искате иконката ви да се показва в Google Търсене, следвайте публикуваните изисквания на Google:

• Размер: изображението трябва да е квадратно (1:1) и с размер, кратен на 48 пиксела, например 48x48, 96x96 или 144x144. След това Google го смалява до 16x16 за показване. Минималният поддържан размер е 8x8, но се препоръчва 48x48 или по-голям.
• Формати: работи всеки формат, поддържан от браузърите, включително ICO, PNG и SVG.
• Стабилен URL: не сменяйте често URL адреса на favicon. Стабилният адрес помага на Google да поддържа иконката ви актуална.
• Достъпност за обхождане: и файлът на favicon, и началната ви страница трябва да са достъпни за Googlebot. Не ги блокирайте в robots.txt или зад вход с парола.
• Една декларация за сайт: иконката е свързана с началната страница на сайта, затова поставете тага <link> в head на началната си страница.
• Representative и подходяща: иконката трябва да отразява марката ви, а Google може да замени обидна или подвеждаща с иконката си по подразбиране.

След като публикувате или промените favicon, на Google може да са нужни от няколко дни до седмици, за да го обходи наново и да го обнови, така че не очаквайте мигновена промяна.

Как да създадете favicon бързо с MakeFav

Не ви трябва софтуер за дизайн или команден ред. Генераторът MakeFav превръща едно изходно изображение във файловете, описани по-горе.

1. Подгответе графиката си. Използвайте квадратно лого или символ с размер 512 x 512 px или по-голям. Простите форми работят най-добре, защото иконката ще се вижда с размер 16 px.
2. Качете я на началната страница на MakeFav или отворете редактора, за да настроите изображението, фона и отстоянията, преди да експортирате.
3. Прегледайте резултата при малки размери и на светъл и тъмен фон, за да сте сигурни, че остава четлив.
4. Изтеглете пакета. Той съдържа ICO, PNG размери, Apple touch icon, иконки за манифеста и HTML фрагмента за поставяне.
5. Качете файловете в корена на уебсайта си, така че да са достъпни на пътища като /favicon.ico.
6. Добавете HTML кода в <head> на всяка страница или във вашия споделен layout или шаблон.
7. Проверете с проверката на favicon, след това изчистете кеша на браузъра и презаредете, за да видите новата иконка.

Пример за HTML фрагмент

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Атрибутът sizes="48x48" на връзката към ICO помага на браузърите да предпочетат SVG, когато го поддържат, като същевременно ICO остава като резервен вариант. PNG файлът от 96 px отговаря на правилото на Google за кратност на 48.

Пример за манифест на уеб приложение

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Ако работите с build процеси или искате да автоматизирате създаването на иконки, вижте ресурсите за разработчици.

Съвети за дизайн на favicon, който работи

• Дръжте го прост. Една форма, една буква или смело монограмно изображение е по-добро от детайлно лого, което се превръща в мазно петно при 16 px.
• Използвайте силен контраст. Уверете се, че иконката се вижда и на светли, и на тъмни теми на браузъра. Цветната фонова плочка помага.
• Избягвайте текст. Една начална буква е наред; думите са нечетливи при този размер.
• Оставете малко отстояние за maskable иконки и иконки със закръглени ъгли, за да не бъде отрязано нищо важно.
• Бъдете последователни с логото и цветовете на марката си, така че favicon да затвърждава разпознаваемостта.
• Тествайте на реални устройства и проверете как изглежда в раздел, в отметка и в резултат от Google.

Чести проблеми с favicon

Ако иконката ви не се показва, обичайните причини са кеширане, грешни пътища и блокирани файлове. Браузърите кешират favicon агресивно, затова принудително опресняване или нов личен прозорец често са достатъчни, за да видите промените. Проверете дали URL адресът на файла връща статус 200 и правилния тип съдържание и дали тагът <link> е в <head>. За търсенето се уверете, че robots.txt не блокира иконката или началната страница. Проверката на MakeFav може да ви помогне бързо да откриете тези проблеми.

Често задавани въпроси

Какво означава favicon?

Favicon е съкращение от „favorite icon“ („любима иконка“). Името идва от Internet Explorer 5, който през 1999 г. за първи път използва малък файл с иконка, за да украси записите в списъка „Favorites“ на браузъра. Терминът се наложи, макар че иконката вече се показва на много други места.

Помага ли favicon на SEO?

Favicon не е пряк фактор за класиране. Той обаче се показва до името на сайта ви в резултатите на Google на мобилни и настолни устройства, така че може да подобри разпознаваемостта на марката и визуалната привлекателност на резултата ви, което може индиректно да подкрепи кликванията. Следването на насоките на Google е това, което прави иконката допустима за показване.

Какъв размер трябва да е favicon?

За Google Търсене използвайте квадратно изображение с размер, кратен на 48 пиксела, например 48x48 или 96x96. За по-широко покритие предоставете също ICO файл, Apple touch icon 180x180 и иконки за манифеста 192x192 и 512x512. SVG е добро допълнение заради мащабируемостта.

Нужен ли ми е още favicon.ico, ако използвам PNG или SVG?

Все още е добра идея. Браузърите и някои инструменти по подразбиране изискват /favicon.ico, а по-старият софтуер разчита на него. Наличието на ICO файл в корена на сайта предотвратява грешки 404 и ви дава сигурен резервен вариант, когато SVG или PNG не се поддържат.

Защо favicon не се обновява?

Браузърите и търсачките кешират favicon за дълго време. Опитайте принудително опресняване, личен прозорец или изчистване на кеша. Уверете се, че пътят до файла е правилен и че новият файл се сервира. В Google Търсене промяната на иконка може да отнеме дни или седмици, докато бъде обходена наново и обновена.