• Какво е фавикон?
• Няколко причини да създадете фавикон
• Как да създадете фавикон
• Инструменти
• Някои популярни алтернативи:
• Как да добавите фавикон
• WordPress
• Сайт билдър
• Друго приложение
• Проверете фавикона си
• В заключение

Какво е фавикон?

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

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

• 

• 

Няколко причини да създадете фавикон

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

• Оптимизация за търсачки (SEO). Макар че сам по себе си фавиконът не влияе пряко на позицията на сайта Ви в резултатите при търсене, той може да допринесе непряко за позиционирането на сайта на по-предно място. Ако част от посетителите на сайта са го запазили като отметка в браузъра си, ще могат да го намерят лесно и в резултат на това сайтът ще има повече посещения. Това малко ще помогне на сайта Ви да излиза на по-предни позиции, тъй като търсачките дават предимство на сайтове, които имат повече посещения. Освен това, браузърите търсят файл favicon.ico, когато зареждат даден сайт и ако не намерят такъв, показват грешка 404 в конзолата за разработчици. Макар че това не е голям проблем, подобни грешки могат да имат отрицателно въздействие върху мястото, на което излиза даден сайт при търсене. Можете лесно да елиминирате този проблем, ако имате фавикон.

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

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

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

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

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

• Идентичност на марката. Фавиконът трябва да показва на посетителите името на търговската Ви марка, името на компанията или с каква насоченост е марката/компанията. Ако не можете да вместите логото в малки размери, трябва да изберете фавикон, който описва най-добре услугите, които предлагате.

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

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

• Простота. Фавиконът е малък, така че не трябва да използвате нищо сложно. Ако се опитате да съберете прекалено много съдържание, фавиконът няма да се вижда лесно и ще се изгуби смисълът от употребата му.

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

Платформа	Размер на фавикона
Десктоп	16 x 16
	32 x 32
	48 x 48
Android	36 x 36 (плътност на пикселите .75)
	48 x 48 (плътност на пикселите 1)
	72 x 72 (плътност на пикселите 1.5)
	96 x 96 (плътност на пикселите 2)
	144 x 144 (плътност на пикселите 3)
	192 x 192 (плътност на пикселите 4)
Apple iPhone	144 x 144 (Retina 6 и по-ранни модели)
	120 x 120 (Retina 7)
	57 x 57 (6 без Retina и по-ранни модели)
	60 x 60 (7 без Retina)
Apple iPad	144 x 144 (Retina 6 и по-ранни модели)
	152 x 152 (Retina 7)
	72 x 72 (6 без Retina и по ранни модели)
	76 x 76 (7 без Retina)

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

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

Инструменти

Всички инструменти, които сме споменали по-долу, са достъпни онлайн, така че няма да се наложи да сваляте или инсталирате нищо. Първият е нашият Лого дизайнер. Останалите са безплатни инструменти, които се предоставят от компании, с които не сме свързани. Ако се интересувате, можете да посетите сайтовете им.

Нашият Лого дизайнер. Лесният за употреба инструмент е достъпен в Административния панел на ICDSoft. Не е нужно да сте наш клиент - можете да се регистрирате абсолютно безплатно на https://accounts.icdsoft.com/register. Можете да използвате стотици готови форми, които можете да персонализирате и оразмерявате по Ваше усмотрение. Всяко изображение, което създадете, може да бъде свалено безплатно в PNG формат, така че можете да го използвате за фавикон. Ако предпочитате платената опция, ще можете да свалите изображението с висока резолюция и в различни формати, така че ще можете да го използвате както за онлайн присъствието си, така и за различни печатни материали.

Някои популярни алтернативи:

realfavicongenerator.net
www.favicon.cc
iconifier.net
favicon.io

Как да добавите фавикон

WordPress

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

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

Ако не виждате начин да добавите фавикон през административния панел, можете да добавите програмен код директно в хедъра на сайта. Файлът, в който трябва да направите това, се намира в директория /wp-content/themes/theme-name/header.php. Ако не се чувствате уверени да променяте код на ръка, може да използвате плъгина Insert Headers and Footers, чрез който можете да добавите кода за фавикона си чрез административния панел на WordPress. Ще намерите нужния Ви програмен код, ако продължите да четете статията ни.

Сайт билдър

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

Друго приложение

Някои приложения предоставят лесен начин да се добави фавикон. Ако използвате OpenCart или PrestaShop например, ще намерите тази опция в административния панел. Там ще можете да променяте различни настройки на сайта и да качите изображение за фавикон.

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

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

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

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

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

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

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

Ако някой създаде пряк път към сайта Ви на iOS устройство, иконката ще се запази на началния екран. Ако пък някой отвори сайта на iOS-базирано устройство, браузърът Safari ще търси изображение с име apple-touch-icon.png в главната директория на сайта. Ако искате да използвате файл с различно име, трябва да използвате:

<link rel="apple-touch-icon" href="path-to-custom-image">

Ако искате да определите различен фавикон за различните Apple устройства, тогава трябва да използвате следните редове код:

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> 

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> 

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> 

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

Проверете фавикона си

След като добавите фавикон, е хубаво да го тествате. Най-лесният начин за това е да отворите сайта си. За всеки случай изтрийте кеша на браузъра или използвайте инкогнито режим (това важи в най-голяма степен ако решите да смените фавикона на сайта в даден момент). Вижте дали фавиконът излиза в таба до заглавието на сайта. След това, запазете отметка и вижте дали фавиконът излиза в отметките и в историята на браузъра.

Можете да използвате и различни онлайн инструменти. Ето два от тях:

https://realfavicongenerator.net/favicon_checker - проверете дали сайтът Ви има фавикон, подходящ за различни устройства и платформи

http://www.colinkeany.com/favicon-checker/ - вижте как ще изглежда фавиконът Ви в Google Chrome, Firefox и Safari

В заключение

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