Које величине фавикона вам требају у 2026? Идеалан сет

У 2026. години идеалан сет фавикона чине: favicon.ico који садржи слике од 16, 32 и 48 px, PNG 96x96 (за Google претрагу), опциони SVG фавикон, apple-touch-icon.png 180x180, као и PNG 192x192 и 512x512 (плус maskable 512) декларисани у web app manifestu. Windows плочице и старије Apple величине потребне су само ако морате да подржите веома старе уређаје. Испод је објашњено зашто је тако, уз табелу величина, готов HTML и уобичајене грешке које треба избегавати.

Пејзаж фавикона је некада био хаотичан: сваки прегледач и оперативни систем тражио је своју величину, што је довело до озлоглашених блокова од 20 линија у <head>. Данас је већина тога застарела. Савремени прегледачи скалирају једну добру иконицу, iOS жели једну величину, а Android чита manifest. Овај чланак раздваја оно што је заиста потребно од онога што је само пожељно.

Кратак одговор: идеалан сет фајлова фавикона

• favicon.ico (16, 32, 48 px у једном фајлу) у корену сајта. Прегледачи, читачи фидова и многи алати и даље аутоматски траже /favicon.ico.
• favicon.svg (опционо, али препоручено) за оштар приказ у било којој величини и подршку за тамни режим.
• PNG 16x16, 32x32 и 96x96 као експлицитне резервне варијанте. Верзија од 96 px помаже у Google претрази, која захтева умножак броја 48 px.
• apple-touch-icon.png величине 180x180, непровидан, без транспарентности.
• PNG 192x192 и 512x512 у manifest.json, плус maskable 512x512 икона за Android.
• theme-color meta таг за бојење интерфејса прегледача на мобилним уређајима.
• Windows плочице (70, 150, 310 px) уз browserconfig.xml само за старији Windows и закачене сајтове у IE11.

Табела величина фавикона: намена, називи фајлова и приоритет

Користите ову табелу као контролну листу. „Обавезно“ значи да ће обичан сајт изгледати поломљено или недовршено без тога; „Препоручено“ значи јасно побољшање квалитета; „Опционо“ значи нишну или застарелу употребу.

favicon.ico: 16, 32 и 48 px у једном фајлу

ICO фајл је контејнер који садржи неколико битмапа. Добар favicon.ico укључује слике 16x16, 32x32 и 48x48 како би прегледач или оперативни систем могао да одабере најближу. Поставите га у корен свог домена (https://example.com/favicon.ico). Чак и ако ваш HTML упућује на друго место, многи крол��ри, RSS читачи и старији прегледачи и даље траже управо тај URL, па вас његово постојање поштеђује 404 шума у логовима.

Немојте једноставно преименовати PNG у .ico. Већина прегледача то толерише, али неки алати то одбијају и губите предност више резолуција. Извезите прави ICO.

PNG фавикони: 16, 32 и 96 px

PNG линкови са експлицитним sizes омогућавају прегледачу да одабере најбољи битмап без парсирања ICO-а. У пракси 32x32 покрива језичке високе густине, а 16x16 је данас скоро сувишан. Величину 96x96 вреди додати јер Google претрага приказује фавиконе поред резултата и захтева квадратну иконицу чија је величина умножак од 48 px (48x48, 96x96, 144x144 итд.). Фајл од 96 px даје Google-у оштрији извор него онај од 48 px када смањује слику за мобилне резултате.

Савет за дизајн: при 16 px ситни детаљи нестају. Користите подебљан, једноставан облик, јак контраст и мало текста или нимало. Своју иконицу можете да дорадите и прегледате у MakeFav едитору пре извоза.

SVG фавикон и тамни режим

SVG фавикон је један мали фајл који остаје оштар на било којој густини екрана. Подржавају га прегледачи засновани на Chromium-у и Firefox. Подршка у Safariju је историјски била ограничена, зато се никада не ослањајте само на SVG: задржите ICO и PNG као резервне варијанте.

Највећа предност је прилагођавање теми. Пошто SVG може да садржи CSS, иконицу можете да прилагодите корисниковој шеми боја помоћу prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Имајте на уму да media query одражава тему прегледача или оперативног система, коју користи трака језичака. Он не прати прекидач теме на вашем сајту.

Једна позната необичност: када су наведени и ICO и SVG, Chrome може да изабере ICO. Декларисање ICO-а са sizes="32x32" и навођење SVG-а после њега доводи до тога да Chrome преферира SVG, као што је приказано у коду испод.

Apple touch икона: 180x180 и старије величине

Када корисник дода ваш сајт на почетни екран iOS-а или iPadOS-а, Safari користи apple-touch-icon. Данас је довољан један PNG од 180x180 px: iOS га смањује за старије уређаје и iPad-ове. Назовите га apple-touch-icon.png и ставите у корен; iOS чак подразумевано тражи тај фајл ако не постоји link таг.

Правила за Apple иконицу:

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

Када су вам потребне старије величине (57, 72, 76, 114, 120, 144, 152, 167)? Само ако подржавате iOS 6 или старији, или желите прецизну контролу пиксела по уређају за iPad Pro (167 px) и iPad (152 px). За скоро сваки сајт у 2026. сâм фајл 180x180 је сасвим довољан. Поставка максималне компатибилности испод ради потпуности укључује неколико њих.

Android и PWA иконе: 192, 512 и maskable

Chrome на Androidu и други прегледачи који подржавају PWA читају иконе из web app manifesta, а не из <link rel="icon">. За могућност инсталације потребни су вам бар PNG 192x192 и 512x512. Иконица од 192 px користи се на почетном екрану и у покретачу апликација; иконица од 512 px појављује се на уводним екранима и у дијалозима за инсталацију.

Maskable иконе и безбедна зона

Адаптивне иконе на Androidu могу бити исечене у круг, squircle или други облик, зависно од уређаја. Maskable икона је дизајнирана тако да може безбедно да се сече: важан садржај мора да стоји унутар безбедне зоне, централног круга пречника 80% слике (полупречник је 40% странице). За фајл 512x512 то значи да логотип држите унутар круга пречника око 410 px и да боју позадине проширите до све четири ивице како се после маскирања не би појавили празнине.

Декларишите maskable иконицу као посебан унос са "purpose": "maskable". Избегавајте "any maskable" на једном фајлу: размак потребан за маскирање делује премало када се икона приказује без маске.

Пример manifest.json

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

Сервирајте фајл као application/manifest+json (или application/json) и повежите га са сваке странице помоћу <link rel="manifest" href="/manifest.json">. Неки пројекти га називају site.webmanifest; назив није битан, битан је линк.

Windows плочице и browserconfig.xml

Windows 8.1 и 10 омогућавају корисницима да закаче сајт у Start мени, а IE11 и старији Edge читају слике плочица из browserconfig.xml. Уобичајене величине су 70x70 (мала), 150x150 (средња), 310x150 (широка) и 310x310 (велика). Edge заснован на Chromium-у уместо тога користи manifest и обичне фавиконе, тако да је ово застарела функција. Укључите је само ако ваша публика још увек обухвата старије Windows окружења, на пример у корпоративном окружењу.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: бојење интерфејса прегледача

Meta таг theme-color говори мобилним прегледачима (и неким десктоп прегледачима) коју боју да користе за адресну траку или насловну траку. То није фавикон, али припада истом сету брендирања. Можете навести засебне вредности за светли и тамни режим:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Минимална модерна поставка наспрам максималне компатибилности

Минимална модерна поставка (препоручена за већину сајтова)

Пет фајлова покрива преко 99% стварне употребе: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) и две manifest иконе (192 и 512). Додајте PNG 96x96 ако вам је битна видљивост у Google претрази, и maskable иконицу ако објављујете PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Поставка максималне компатибилности

Изаберите ово када опслужујете широку или корпоративну публику, или када желите да покријете сваког могућег клијента. Додаје експлицитне PNG величине, старије Apple величине, Windows плочице и боје теме.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Обратите пажњу на путање релативне у односу на корен, које почињу са /. Оне раде на свакој дубини странице, што нас доводи до најчешћих грешака.

Уобичајене грешке са фавиконима и како их исправити

1. Погрешне путање

Линк као href="favicon.ico" разрешава се у односу на тренутни URL, па ради на /, али не ради на /blog/post/. Користите путање релативне у односу на корен (/favicon.ico) или апсолутне URL-ове. Такође проверите да фајлови заиста постоје: отворите сваки URL директно у прегледачу и уверите се да враћа HTTP 200, а не преусмерење на 404 страницу или страницу за пријаву.

2. Недостајући или погрешан атрибут sizes

Без sizes, прегледачи морају да преузму иконе да би их прегледали и могу да одаберу погрешну. Увек декларишите sizes на PNG линковима и побрините се да одговара стварним димензијама у пикселима. Фајл означен као 32x32 који је заправо 64x64 даје неконзистентне резултате.

3. Агресивно кеширање

Прегледачи кеширају фавиконе дуго, често независно од кеша странице. После ребрендирања стара иконица може да остане данима. Промените назив фајла или додајте верзију у query string (/favicon.ico?v=2) и ажурирајте link тагове. Тврдо освежавање често не освежи иконицу језичка; отварање URL-а иконице директно и његово освежавање обично успева.

4. Неквадратне слике

Фавикони морају бити квадратни. Правоугаони логотип се развлачи, сече или оивичава непредвидиво. Дизајнирајте посебан квадратни знак, као што је иницијал или симбол, уместо да смањујете широк word mark.

5. Провидне Apple touch иконе које постану црне

iOS попуњава транспарентност црном бојом. Дајте иконици 180x180 непровидну позадину и немојте унапред заобљавати углове.

6. Maskable иконе без безбедне зоне

Ако логотип додирује ивице maskable иконе, Android ће га одсећи. Држите га унутар централног круга од 80% и попуните цело платно бојом позадине.

7. Блокирање икона за кроулере

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

8. Заборављен manifest линк или purpose

Manifest који није повезан или коме недостају иконе од 192 и 512 px спречава поруку за инсталацију у Chrome-у. Проверите га у алаткама за програмере у прегледачу, на картици Application.

Генеришите цео сет једним кликом

Ручно прављење десетак фајлова у едитору слика, затим конвертовање у ICO и писање manifesta је заморно и подложно грешкама. MakeFav генерише све горенаведене фајлове из једне слике, текста или емоџија: favicon.ico са више величина, PNG-ове, SVG, Apple touch иконицу, PNG-ове 192/512, maskable иконицу, Windows плочице, manifest.json и browserconfig.xml, плус HTML исечак спреман за лепљење, све у једном ZIP преузимању. Позадину, размак и облик можете фино да подесите у едитору, проверите постојећи сајт помоћу провере фавикона и аутоматизујете генерисање преко ресурса за програмере.

Контролна листа за постављање

1. Отпремите све фајлове у корен свог сајта.
2. Налепите HTML исечак у <head> сваке странице (или у заједнички layout).
3. Уверите се да су путање релативне у односу на корен и да враћају HTTP 200.
4. Проверите светли и тамни режим, инсталацију на почетни екран на iOS-у и инсталацију на Androidu.
5. Покрените проверу да бисте уочили недостајуће или непоклапајуће величине.
6. Заобиђите кеш помоћу ознаке верзије ако сте заменили стару иконицу.

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

Да ли ми је у 2026. и даље потребан favicon.ico?

Да. Иако савремени прегледачи прихватају PNG и SVG, многи кроулери, читачи фидова, имејл клијенти и старији прегледачи и даље директно траже /favicon.ico. ICO са више величина и сликама од 16, 32 и 48 px је мали фајл који спречава недостајуће иконе и 404 грешке.

Које величине треба да буде фавикон за Google претрагу?

Google захтева квадратни фавикон чија је величина умножак од 48 px, најмање 48x48. PNG 96x96 је безбедан избор, а подржан је и SVG. Google такође захтева да фајл може да се скенира, зато га не блокирајте у robots.txt. Ажурирањима може да буде потребно неколико дана или недеља да се појаве.

Да ли је 180x180 довољно за Apple touch иконицу?

За скоро све сајтове, да. iOS и iPadOS смањују PNG 180x180 за сваки актуелни уређај. Старије величине (од 57 до 152 px) битне су само за веома старе верзије iOS-а. Не заборавите да користите непровидну позадину како иконица не би постала црна.

Шта је maskable иконица и да ли ми треба?

Maskable иконица је PNG 512x512 дизајниран за адаптивне облике иконица на Androidu. Њен важан садржај налази се унутар круга пречника 80% у центру, а позадина испуњава цео квадрат. Потребна вам је само ако нудите PWA који може да се инсталира, али због ње иконица изгледа изворно, уместо да стоји у белом кругу.

Зашто се моја стара иконица и даље приказује након што сам је променио/ла?

Прегледачи кеширају фавиконе засебно и дуго. Преименујте фајл или додајте верзију у query string, на пример ?v=2, ажурирајте link тагове, а затим отворите URL иконице директно и освежите га. Претраживачима може да буде потребно дуже да освеже сопствену копију.