Адрес
жк.Студентски град 64,
София, България
Контакти
hello@web-graphica.bg
Тел: +359 89 443 3785

Фавикон (Favicon) как и защо да го използваме?

Фавикон (Favicon) как и защо да го използваме

Favicon (фавикон) е важна част от правилното брандиране на една компания. Когато се използва, вашият favicon или „икона на сайта“ може да помогне на потребителите лесно да идентифицират вашия бизнес. Може да помогне за повишаване на разпознаваемостта на марката и дори да подобри потребителското изживяване (UX) на сайта.

Съдържание

Какво е Фавикон (Favicon) ?

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

Първият браузър, който го поддържаше, беше Internet Explorer 5 на Microsoft, пуснат през март 1999 г. Тогава изображението беше известно също като икона за пряк път, икона на отметка или икона на уеб сайт. В края на 1999 г. фавикона е стандартизиран от World Wide Web Consortium (W3C).

Къде можем да видим фавикона?

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

Табове в браузъра

Favicon в табове в браузъра

Отметки в браузърите

Лента за търсене

Защо трябва да използваме Favicon?

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

Favicon и SEO

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

Ако сайтът е отбелязан и потребителите могат да го намерят лесно, той вероятно ще получи повече посещения. В резултат на това може да получи малък тласък в резултатите от търсачките, тъй като търсачките са склонни да предпочитат популярни уеб сайтове. В допълнение, браузърите обикновено търсят изображение на favicon.ico (ако друго не е дефинирано) и ако не го намерят, ще покажат грешка „404 Not found“ в конзолата си. Въпреки че това не е голям проблем, подобни грешки не са добри за SEO. Наличието на favicon ще ви помогне да елиминирате този проблем.

  • Доверие

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

  • Последващи посещения

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

  • Бърз достъп до вашия уеб сайт 

Стандартният фавикон се появява в историята на браузъра и отметките, но хората може да решат да добавят пряк път към вашия уебсайт към работния плот или лентата на задачите или ако използват мобилно устройство – направо на екрана си. Ако вашият сайт няма фавикон, ще се появи сива икона по подразбиране. По-вероятно е потребителите да запазят прекия път, ако видят вашият фавикон, а не икона по подразбиране на noname.

Как да създадете добър фавикон?

Favicon обикновено е по-малка версия на лого на компания/марка, но понякога може да не е възможно да се побере стандартно лого, така че трябва да проявите креативност. Има някои неща, които трябва да имате предвид, когато създавате фавикон:

Идентичност на марката

Favicon-а трябва да показва на посетителите името на вашата марка или компания/бранд. Ако не можете да поберете логото на компанията, трябва да изберете фавикон, които най-добре описва услугите или продуктите, които предлагате.

Съкращения

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

Цветове

Изберете контрастни цветове, така че вашият фавикон да се откроява и да се вижда ясно. В зависимост от уеб браузъра, facivon-а ще се появи на черен, кафяв или бял фон. В някои случаи различна тема на браузъра може да зададе и различен цвят на фона.

Размери

Стандартният favicon е с размери 16×16 пиксела, но по-новите устройства и браузъри често изискват и по-голям. Фавиконите обикновено се появяват в браузърите, но е възможно да добавите такъв към лентата с отметки или дори на екрана на телефона. Ето защо може да се наложи да добавите няколко различни размера на фавиконите. Ако вашият сайт няма фавикон и някой иска да го добави на екрана си за по-бърз достъп, той ще види сива икона по подразбиране, която вероятно ще премахне.

Формати

В наши дни има много формати за изображения и може да срещнете различни мнения какво да използвате.

  • ICO – това е класическият файлов формат за фавиконите. ICO файлът може да съдържа едно или няколко изображения, всяко от които с различен размер и различна дълбочина на цвета. Този формат се разпознава от всички браузъри и ако две или повече изображения с различни формати са зададени като фавикони, някои браузъри предпочитат .ico.
  • PNG – този формат ви позволява да създавате малки изображения с добро качество и поддържа прозрачен фон. Можете лесно да създадете PNG файл с почти всяко приложение. Единственият недостатък е, че Internet Explorer не поддържа показване на PNG файлове като фавикони, но тъй като пазарният дял на този уеб браузър е много нисък в наши дни (2% – 5% в зависимост от различни източници), това не е нещо, което наистина трябва да се притеснявате относно.
  • GIF – поддържа се от повечето браузъри, GIF форматът ви позволява да добавите анимиран фавикон, но това може да бъде досадно за някои потребители. Дори ако харесвате малко движещо се изображение, хората вероятно няма да го оценят по същия начин, както вие.
  • JPG, SVG – популярни за стандартни изображения, но не се поддържат широко като фавикони.

Ако се чудите какъв файлов формат да използвате, препоръчваме или класическия ICO, или широко поддържания PNG. Другите формати може да не са съвместими с някои браузъри. Не ви е необходим специален софтуер, за да създадете фавикона. 

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

  1. Favicon Generator
  2. Real Favicon Generator
  3. Favicon.io

Как да добавим Favicon към нашият сайт?

WordPress сайт

Ако използвате най-популярната система за управление на съдържанието там, обикновено можете да добавите favicon от таблото за управление на WordPress -> Външен вид -> Персонализиране. Там ще намерите опция за идентичност на сайта, където можете да добавите икона на сайта.

Ако не виждате начин да добавите favicon през таблото за управление, можете да добавите кода директно към заглавката на сайта. Файлът за това се намира в директорията на вашия сайт /wp-content/themes/theme-name/header.php. Ако не сте много наясно с технологиите, можете да инсталирате приставката за вмъкване на горни и долни колонтитули с няколко щраквания в таблото за управление на WordPress и след това да копирате и поставите кода за вашата favicon, като използвате този плъгин.

Custom сайт

Ако използвате персонализиран уеб сайт или платформа, която не ви дава възможност да добавите фавикона чрез графичен интерфейс, можете да добавите необходимия код към заглавката на сайта или ако няма нито един заглавен файл – към секцията на всяка страница, където искате да имате фавикона.

Ето общия код, от който се нуждаете, в зависимост от типа изображение, което използвате:

Стандартен ICO файл:

<link rel=“shortcut icon“ href=“https://example.com/favicon.ico“>

PNG изображение:

<link rel=“icon“ type=“image/png“ href=“https://example.com/favicon-16×16.png“ sizes=“16×16″>

Можете също да посочите различни размери за фавикона, в случай че искате да я използвате на множество устройства, които имат различни изисквания. Трябва да използвате атрибута „sizes“:

<link rel=“icon“ sizes=“<16>X<16>,<32>X<32>“>

В заключение

Favicon-a може да е един от най-малките елементи на всеки уеб сайт, но е доста важен. Не пренебрегвайте този аспект на вашето уеб присъствие. Това помага на вашият бранд, вашето SEO и потребителското изживяване. Хората ще го виждат всеки път, когато отворят вашия сайт, прегледат своята история или отметки. Необходими са много малки стъпки, за да се направи един уеб сайт успешен и настройката на подходящ фавикон е една от тях.

Нашият сайт използва бисквитки.