Какви размери на favicon ви трябват през 2026 г.? Идеалният комплект

През 2026 г. идеалният комплект от favicon иконки е: favicon.ico с изображения от 16, 32 и 48 px, PNG 96x96 (за Google Search), по избор SVG favicon, apple-touch-icon.png 180x180, както и PNG файлове 192x192 и 512x512 (плюс maskable 512), декларирани в манифеста на уеб приложението. Плочките за Windows и старите размери на Apple са нужни само ако трябва да поддържате много стари устройства. По-долу ще обясним защо, с таблица с размерите, готов за ползване HTML и чести грешки, които да избягвате.

Някога светът на favicon иконките беше хаотичен: всеки браузър и операционна система искаха свой размер, което роди прословутите блокове от 20 реда в <head>. Днес по-голямата част от това е излязла от употреба. Съвременните браузъри мащабират една добра иконка, iOS иска един размер, а Android чете манифеста. Тази статия отделя наистина необходимото от това, което е просто хубаво да имате.

Краткият отговор: идеалният комплект favicon файлове

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

Таблица с размери на favicon: предназначение, имена на файлове и приоритет

Използвайте тази таблица като контролен списък. „Задължително“ означава, че обикновен сайт ще изглежда счупен или недовършен без него; „Препоръчително“ означава ясно подобрение на качеството; „По избор“ означава специфична или остаряла употреба.

favicon.ico: 16, 32 и 48 px в един файл

ICO файлът е контейнер, който съдържа няколко растерни изображения. Един добър favicon.ico включва изображения 16x16, 32x32 и 48x48, така че браузърът или ОС да избере най-подходящото. Поставете го в корена на домейна си (https://example.com/favicon.ico). Дори HTML кодът ви да сочи другаде, много роботи, RSS четци и по-стари браузъри все още заявяват точно този адрес, така че наличието му предотвратява излишните 404 грешки в логовете ви.

Не преименувайте просто PNG на .ico. Повечето браузъри го толерират, но някои инструменти го отхвърлят и губите предимството на няколко разделителни способности. Експортирайте истински ICO.

PNG favicon: 16, 32 и 96 px

PNG връзките с изрични sizes позволяват на браузъра да избере най-доброто изображение, без да разчита ICO файла. На практика 32x32 покрива разделите на екрани с висока плътност, а 16x16 днес е почти излишен. Размерът 96x96 си струва да се добави, защото Google Search показва favicon иконки до резултатите и изисква квадратна иконка със размер, кратен на 48 px (48x48, 96x96, 144x144 и т.н.). Файл от 96 px дава на Google по-ясен източник от този от 48 px, когато го смалява за мобилни резултати.

Съвет за дизайн: при 16 px финитe детайли изчезват. Използвайте смела, проста форма, висок контраст и малко текст или изобщо без текст. Можете да настроите и прегледате иконката си в редактора на MakeFav, преди да я експортирате.

SVG favicon и тъмен режим

SVG favicon е един малък файл, който остава ясен при всякаква плътност на екрана. Браузърите, базирани на Chromium, и Firefox го поддържат. Поддръжката в Safari исторически е ограничена, затова никога не разчитайте само на 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>

Имайте предвид, че медийната заявка отразява темата на браузъра или ОС, която се използва от лентата с раздели. Тя не следва превключвател на тема във вашия собствен уебсайт.

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

Apple touch icon: 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 на Android и други браузъри с поддръжка на PWA четат иконките от манифеста на уеб приложението, а не от <link rel="icon">. За да може приложението да се инсталира, ви трябват поне PNG 192x192 и 512x512. Иконката от 192 px се използва на началния екран и в стартера на приложения; иконката от 512 px се появява на начални (splash) екрани и в диалози за инсталиране.

Maskable иконки и безопасната зона

Адаптивните иконки на Android могат да бъдат изрязвани в кръг, 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, използва манифеста и обикновените favicon иконки, така че това е остаряла функция. Включете я само ако аудиторията ви все още включва по-стари 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: оцветяване на интерфейса на браузъра

Мета тагът theme-color казва на мобилните браузъри (и на някои десктоп) какъв цвят да използват за адресната лента или заглавната лента. Това не е favicon, но принадлежи към същия набор за брандиране. Можете да зададете отделни стойности за светъл и тъмен режим:

<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) и двете иконки от манифеста (192 и 512). Добавете PNG 96x96, ако видимостта в Google Search е важна, и 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>

Обърнете внимание на пътищата, относителни спрямо корена, започващи с /. Те работят на всяка дълбочина на страницата, което ни води до най-честите грешки.

Чести грешки с favicon и как да ги поправите

1. Грешни пътища

Връзка като href="favicon.ico" се разрешава спрямо текущия URL, така че работи на /, но се чупи на /blog/post/. Използвайте адреси, относителни спрямо корена (/favicon.ico), или абсолютни URL адреси. Проверете също дали файловете наистина съществуват: отворете всеки URL директно в браузъра и се уверете, че връща HTTP 200, а не пренасочване към 404 страница или страница за вход.

2. Липсващ или грешен атрибут sizes

Без sizes браузърите трябва да изтеглят иконките, за да ги проверят, и може да изберат грешната. Винаги декларирайте sizes на PNG връзките и се уверете, че съвпада с реалните размери в пиксели. Файл, означен като 32x32, който всъщност е 64x64, води до непоследователни резултати.

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

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

4. Неквадратни изображения

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

5. Прозрачни Apple touch иконки, които стават черни

iOS запълва прозрачността с черно. Дайте на иконката 180x180 непрозрачен фон и не закръглявайте ъглите предварително.

6. Maskable иконки без безопасна зона

Ако логото докосва краищата на maskable иконка, Android ще го отреже. Дръжте го вътре в централния кръг от 80% и запълнете цялото платно с цвета на фона.

7. Блокиране на иконките за роботите

Ако robots.txt забранява пътя към вашия favicon, Google не може да го извлече и ще покаже обща иконка с глобус в резултатите от търсенето. Помнете също, че Google изисква favicon да е на същия хост като страницата и го опреснява само от време на време, така че промените може да отнемат дни или седмици, за да се появят.

8. Забравена връзка към манифеста или purposes

Манифест, който не е свързан или няма иконки от 192 и 512 px, пречи на подканата за инсталиране в Chrome. Проверете го в инструментите за разработчици на браузъра си под раздела Application.

Генерирайте целия комплект с едно кликване

Създаването на дузина файлове на ръка в графичен редактор, след това конвертирането към ICO и писането на манифеста е досадно и податливо на грешки. MakeFav генерира всички горепосочени файлове от едно изображение, текст или емоджи: многоразмерен favicon.ico, PNG файлове, SVG, Apple touch icon, PNG 192/512, maskable иконка, плочки за Windows, manifest.json и browserconfig.xml, плюс готов за поставяне HTML код, всичко в един ZIP файл за изтегляне. Можете да настроите фона, отстъпа и формата в редактора, да проверите съществуващ сайт с проверката на favicon и да автоматизирате генерирането чрез ресурсите за разработчици.

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

1. Качете всички файлове в корена на сайта си.
2. Поставете HTML кода в <head> на всяка страница (или в общия си шаблон).
3. Уверете се, че пътищата са относителни спрямо корена и връщат HTTP 200.
4. Проверете светлия и тъмния режим, инсталиране на началния екран на iOS и инсталиране на Android.
5. Пуснете проверката, за да откриете липсващи или несъвпадащи размери.
6. Изчистете кешовете с версия в адреса, ако сте заменили стара иконка.

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

Нужен ли ми е още favicon.ico през 2026 г.?

Да. Макар съвременните браузъри да приемат PNG и SVG, много роботи, четци на емисии, имейл клиенти и по-стари браузъри все още заявяват директно /favicon.ico. Многоразмерен ICO с изображения от 16, 32 и 48 px е малък файл, който предотвратява липсващи иконки и 404 грешки.

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

Google изисква квадратен favicon със размер, кратен на 48 px, поне 48x48. PNG 96x96 е сигурен избор, а SVG също се поддържа. Google също изисква файлът да може да бъде обхождан, затова не го блокирайте в robots.txt. Обновяванията могат да отнемат дни или седмици, за да се покажат.

Достатъчен ли е 180x180 за Apple touch icon?

За почти всички сайтове, да. iOS и iPadOS смаляват PNG 180x180 за всяко текущо устройство. По-старите размери (от 57 до 152 px) имат значение само за много стари версии на iOS. Не забравяйте да използвате непрозрачен фон, така че иконката да не стане черна.

Какво е maskable иконка и нужна ли ми е?

Maskable иконката е PNG 512x512, проектиран за адаптивните форми на иконки в Android. Важното ѝ съдържание е вътре в кръг с диаметър 80% в центъра, а фонът запълва целия квадрат. Нужна ви е само ако предлагате PWA, който може да се инсталира, но тя кара иконката да изглежда естествена, вместо да стои в бял кръг.

Защо старият ми favicon още се показва, след като го смених?

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