Шта је фавикон и зашто је важан за ваш веб-сајт?

Фавикон (скраћено од „favorite icon“, то јест „омиљена иконица“) је мала квадратна слика која представља веб-сајт у картицама прегледача, обележивачима, историји, Гугловим резултатима претраге, на почетним екранима телефона и у инсталираним веб-апликацијама. Важан је зато што вашем сајту даје препознатљиво лице на први поглед, олакшава његово проналажење међу бројним отвореним картицама, оставља утисак професионалности и поузданости, а сада се приказује и поред назива вашег сајта у Гугловим резултатима. Без њега посетиоци виде општу иконицу глобуса или празне странице, а ваш сервер пуни логове грешкама 404. Комплетан сет фавикона можете бесплатно направити помоћу MakeFav генератора фавикона.

Шта је фавикон?

Фавикон је сићушна графика бренда, обично упрошћена верзија логотипа или једно слово или симбол, коју прегледачи и други софтвер преузимају са вашег сајта и приказују свуда где им је потребан компактан визуелни идентификатор. У прегледачу на рачунару обично се црта у димензији 16 са 16 CSS пиксела, мада сама датотека треба да буде већа како би остала оштра на екранима високе густине.

Технички гледано, фавикон је обична слика на коју упућује ваш HTML (или се налази на подразумеваној локацији) и коју кориснички агенти преузимају одвојено од садржаја странице. Данас „фавикон“ ретко представља једну датотеку. Савремени сајт обично садржи неколико верзија исте иконице како би прегледачи, претраживачи, iOS и Android добили формат и величину која им одговара.

Кратка историја фавикона

Фавикон води порекло из марта 1999., када је Microsoft објавио Internet Explorer 5. Прегледач је корисницима омогућавао да чувају странице на листи „Омиљене“ и тражио је малу датотеку иконице под називом favicon.ico у корену сајта да би је приказао поред сваког сачуваног уноса. Идеја је била једноставна: ако сајт обезбеди /favicon.ico, иконица се појављује поред обележивача.

Остали прегледачи су убрзо преузели ту функцију, а картичаста навигација учинила ју је далеко кориснијом. Како су картице постале главни начин сналажења, фавикон је из украса обележивача прерастао у основно помоћно средство за навигацију. Током година приступ се развијао:

• Почетак 2000-их: елемент <link rel="icon"> омогућио је сајтовима да упуте на иконицу на било којој адреси уместо само у корену, а прегледачи који нису IE почели су да прихватају PNG и GIF датотеке.
• 2010-е: Apple је увео apple-touch-icon за почетне екране на iOS-у, а Android и Windows су додали сопствене конвенције као што су иконице у манифесту и слике плочица.
• Данас: SVG фавикони, манифести веб-апликација, иконице прилагођене тамном режиму и Гугловi захтеви за фавиконе у резултатима претраге учинили су фавикон малим, али стварним делом техничке поставке сајта.

Где се фавикони појављују данас

Ваш фавикон се приказује на много више места него што је картица прегледача. Главна су:

• Картице прегледача: најуочљивије место, где је иконица често једино што се види када је отворено много картица.
• Обележивачи и омиљене странице: иконица стоји поред наслова странице у тракама и менијима обележивача.
• Историја и најпосећеније странице: прегледачи приказују фавиконе у листама историје и на страницама нових картица.
• Гуглови резултати претраге: и на мобилним уређајима и на рачунару, Гугл приказује фавикон сајта поред назива и адресе сајта.
• Почетни екрани: када посетилац дода ваш сајт на почетни екран на iOS-у или Android-у, touch иконица или иконица из манифеста постаје пречица налик апликацији.
• Инсталиране PWA апликације: прогресивна веб-апликација користи иконице из свог манифеста за иконицу у покретачу, уводни екран и пребацивач задатака.
• Windows плочице и закачени сајтови: старије верзије Windows-а и Edge-а користиле су слике плочица дефинисане за закачене сајтове; савремене углавном поново користе ваше стандардне иконице.
• Прегледи линкова у неким апликацијама: поједини алати за ћаскање и продуктивност (Slack је познат пример) приказују фавикон сајта поред развијеног линка. Већина прегледа се ослања углавном на Open Graph слике, али фавикон често даје мали знак бренда.

Зашто је фавикон важан за ваш веб-сајт

Препознатљивост бренда

Људи брже препознају боје и облике него што читају текст. Доследна иконица која се понавља у картицама, обележивачима и резултатима претраге гради познатост сваки пут када је неко види, што је бесплатна изложеност бренда при свакој посети.

Поверење и кредибилитет

Сајт без фавикона делује недовршено. Чиста и исправно приказана иконица је мали сигнал да неко води рачуна о детаљима, што подржава утисак да је сајт легитиман. То није безбедносна функција, а сајтови за пецање (фишинг) могу копирати иконице, али празна подразумевана иконица ретко помаже предузећу да делује etablirano.

Стопа кликова у резултатима претраге

Пошто Гугл приказује фавикон поред вашег резултата, он постаје део изгледа вашег резултата поред конкуренције. Гугл не објављује да фавикони утичу на рангирање и не треба да очекујете побољшање позиције. Корист је у визуелном препознавању: корисници који познају вашу иконицу вероватније ће приметити и изабрати ваш резултат, посебно на мобилним уређајима где су резултати збијени.

Употребљивост са много отворених картица

Када прегледач има отворено двадесет картица, наслови се скраћују до нестајања и остаје само фавикон. Препознатљива иконица омогућава људима да тренутно пронађу вашу картицу и врате се на њу уместо да отварају дупликат или је заборave.

Професионалан утисак

Добро дизајниран фавикон показује исту пажњу према детаљима као и остатак вашег сајта. Било да је реч о страницама производа, документацији, блоговима или веб-апликацијама, то је једна од најјефтинијих ствари којима можете дати завршни сјај.

Приступачност при проналажењу картица

Иконице помажу корисницима који визуелно скенирају уместо да читају, укључујући особе са дислексијом или когнитивним разликама, као и све који брзо прелазе са задатка на задатак. Иконицу високог контраста са једноставним обликом лакше је уочити. Ипак, имајте на уму да је фавикон допуна: он не замењује јасан наслов странице, на који се ослањају читачи екрана и асистивне технологије.

Шта се дешава ако немате фавикон

Прегледачи аутоматски траже /favicon.ico из корена вашег домена, чак и ако ваш HTML не помиње ниједан. Ако датотека не постоји, дешава се неколико ствари:

• Општа иконица: посетиоци виде подразумеван глобус, документ или празну иконицу у картици и обележивачима, што делује анонимно.
• Грешке 404 у вашим логовима: сваки прегледач који затражи датотеку ствара неуспешан захтев. На прометним сајтовима то додаје шум у логове приступа, праћење грешака и аналитику и може сакрити стварне проблеме.
• Нема иконице у Гугловим резултатима: без исправног фавикона који се може индексирати, Гугл поред вашег резултата приказује своју подразумевану замену.
• Узалудни захтеви: прегледачи могу покушати поново, додајући мало, али беспотребно оптерећење вашем серверу.

Чак и врло једноставна иконица боља је него никаква, јер уклања грешке 404 и даје корисницима нешто препознатљиво.

Објашњење формата фавикона

Ниједан формат не покрива све платформе, па већина сајтова користи мањи скуп датотека.

Старије Windows слике плочица (подешене преко browserconfig.xml) биле су потребне за Internet Explorer 11 и стари Edge. Данас су ретко неопходне осим ако морате да подржите та окружења.

Гуглове смернице за фавиконе у резултатима претраге

Ако желите да се ваша иконица појављује у Гугл претрази, пратите Гуглове објављене захтеве:

• Величина: слика мора бити квадратна (1:1) и умножак од 48 пиксела, на пример 48x48, 96x96 или 144x144. Гугл је затим смањује на 16x16 ради приказа. Минимално подржана величина је 8x8, али се препоручује 48x48 или веће.
• Формати: ради било који формат који прегледачи подржавају, укључујући ICO, PNG и SVG.
• Стабилна адреса: немојте често мењати адресу фавикона. Стабилна адреса помаже Гуглу да ваша иконица остане ажурна.
• Могућност индексирања: и датотека фавикона и ваша почетна страница морају бити доступне Googlebot-у. Не блокирајте их у robots.txt нити иза пријаве.
• Једна декларација по сајту: иконица је везана за почетну страницу сајта, па ставите <link> ознаку у head своје почетне странице.
• Репрезентативна и прикладна: иконица треба да одражава ваш бренд, а Гугл може заменити своjom подразумеваном ону која је увредљива или обмањујућа.

Након што објавите или промените фавикон, Гуглу могу бити потребни дани или недеље да га поново индексира и ажурира, зато не очекујте тренутну промену.

Како брзо направити фавикон помоћу MakeFav-а

Није вам потребан софтвер за дизајн нити командна линија. MakeFav генератор претвара једну изворну слику у датотеке описане изнад.

1. Припремите графику. Користите квадратни логотип или симбол величине 512 x 512 px или веће. Једноставни облици раде најбоље јер ће се иконица видети у величини од 16 px.
2. Отпремите је на MakeFav почетној страници или отворите уређивач да бисте пре извоза подесили слику, позадину и размак.
3. Прегледајте резултат у малим величинама и на светлој и тамној позадини да бисте били сигурни да остаје читљив.
4. Преузмите пакет. Садржи ICO, PNG величине, Apple touch иконицу, иконице из манифеста и HTML исечак за уметање.
5. Отпремите датотеке у корен свог веб-сајта тако да буду доступне на путањама као што је /favicon.ico.
6. Додајте HTML у <head> сваке странице или у заједнички распоред или шаблон.
7. Проверите помоћу провере фавикона, затим обришите кеш прегледача и поново учитајте страницу да бисте видели нову иконицу.

Пример 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 задовољава Гуглово правило умношка броја 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 процесима или желите да аутоматизујете прављење иконица, погледајте ресурсе за developере.

Савети за дизајн фавикона који функционише

• Нека буде једноставан. Један облик, једно слово или смело изведен монограм бољи је од детаљног логотипа који се у величини од 16 px претвара у мрљу.
• Користите јак контраст. Побрините се да је иконица видљива и на светлим и на тамним темама прегледача. Обојена позадинска плочица помаже.
• Избегавајте текст. Једно почетно слово је у реду; речи су у овој величини нечитљиве.
• Оставите мало размака за maskable иконице и иконице са заобљеним угловима како ништа важно не би било одсечено.
• Будите доследни са својим логотипом и бојама бренда како би фавикон ојачао препознатљивост.
• Тестирајте на стварним уређајима и проверите како изгледа у картици, обележивачу и Гугловом резултату.

Уобичајени проблеми са фавиконом

Ако се ваша иконица не појављује, уобичајени узроци су кеширање, погрешне путање и блокиране датотеке. Прегледачи агресивно кеширају фавиконе, па је често довољно потпуно освежавање или нови приватни прозор да бисте видели промене. Проверите да ли адреса датотеке враћа статус 200 и исправан тип садржаја и да ли се <link> ознака налази у <head>. Што се претраге тиче, уверите се да robots.txt не блокира иконицу ни почетну страницу. MakeFav провера може вам помоћи да брзо уочите ове проблеме.

Често постављана питања

Шта значи реч фавикон?

Фавикон је скраћеница од „favorite icon“ („омиљена иконица“). Назив потиче из програма Internet Explorer 5, који је 1999. први пут користио малу датотеку иконице за украшавање уноса на листи омиљених у прегледачу. Термин се одомаћио иако се иконица сада појављује на многим другим местима.

Да ли фавикон помаже SEO-у?

Фавикон није директан фактор рангирања. Ипак, појављује се поред назива вашег сајта у Гугловим резултатима на мобилним уређајима и рачунару, па може побољшати препознатљивост бренда и визуелну привлачност вашег резултата, што може посредно подржати кликове. Праћење Гуглових смерница је оно што иконицу чини подобном за приказ.

Колики треба да буде фавикон?

За Гугл претрагу користите квадратну слику која је умножак од 48 пиксела, на пример 48x48 или 96x96. За шири обухват обезбедите и ICO датотеку, Apple touch иконицу 180x180 и иконице из манифеста 192x192 и 512x512. SVG је добар додатак ради скалабилности.

Да ли ми је и даље потребан favicon.ico ако користим PNG или SVG?

И даље је добра идеја. Прегледачи и неки алати подразумевано траже /favicon.ico, а старији софтвер се на њега ослања. Држање ICO датотеке у корену сајта спречава грешке 404 и пружа сигурну резерву када SVG или PNG нису подржани.

Зашто се мој фавикон не ажурира?

Прегледачи и претраживачи дуго кеширају фавиконе. Покушајте са потпуним освежавањем, приватним прозором или брисањем кеша. Уверите се да је путања датотеке исправна и да се нова датотека испоручује. У Гугл претрази промењеној иконици могу бити потребни дани или недеље да буде поново индексирана и ажурирана.