Претрага израза „величина фавикона” и даље враћа спискове од петнаест датотека наслеђене из 2014. У пракси шест димензија данас покрива картице прегледача, резултате претраге, iOS, Android и PWA апликације. Ево које су то и зашто су потребне.
Величине које су вам заиста потребне
Сваки ред одговара документованој употреби у предложеном пакету. Табела даје предност малом, међусобно компатибилном скупу уместо збирци историјских варијанти.
| Датотека | Димензије | Намена |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Картице, обележивачи, старији прегледачи, роботи |
| favicon.svg | векторски, квадратан | Савремени прегледачи, оштар у свакој величини, подржава тамни режим |
| favicon-96x96.png | 96×96 | Google резултати претраге на мобилном уређају |
| apple-touch-icon.png | 180×180 | Почетни екран iOS и iPadOS уређаја, без провидности |
| web-app-manifest-192x192.png | 192×192 | Почетни екран Android уређаја, наведено у веб манифесту |
| web-app-manifest-512x512.png | 512×512 | Уводни екран PWA апликације, верзија „maskable” |
Зашто су 16, 32 и 48 у истој .ico датотеци
ICO је контејнерски формат: једна датотека може да садржи више слика, а прегледач бира ону која одговара приказу. Управо то вам треба, јер се тражена величина мења са контекстом.
16×16 служи за картицу на стандардном екрану. 32×32 обезбеђује варијанту за екране велике густине пиксела и друге делове прегледача. 48×48 употпуњује контејнер и прати правило умношка броја 48 које Google наводи за фавиконе у претрази.
Испорука .ico датотеке која садржи само 16×16 најчешћа је грешка: на Retina екрану икона се увећава и стално изгледа мутно.
180×180 за iOS, 192 и 512 за Android
iOS не чита веб манифест за икону почетног екрана: тражи ознаку apple-touch-icon. Довољна је једна величина, 180×180, која покрива све новије iPhone и iPad уређаје. За старије уређаје систем је сам смањује.
Android уместо тога користи веб манифест. Довољне су две ставке: 192×192 за икону почетног екрана и 512×512 за уводни екран када се сајт инсталира као апликација. Верзију 512 треба навести са purpose „maskable”, што значи да је нацртана тако да подноси исецање у круг или заобљени квадрат.
За maskable икону задржите најважније делове у средишњих 80%. Све изван те области може бити одсечено, зависно од произвођача телефона.
Од које изворне слике почети
Најбоља полазна тачка је SVG: скалира се без губитка на све наведене величине. Ако га немате, користите квадратни PNG од најмање 512×512 пиксела, како би и Android уводна икона настала смањивањем, никада увећавањем.
Хоризонтални логотип са текстом не функционише на 16×16: реч се на тој величини претвара у неколико нејасних пиксела. Издвојте симбол или почните од једног или два слова на контрастној позадини.
На крају проверите контраст на светлој и тамној позадини: црни логотип нестаје на картици са тамном темом. Управо томе служи тамна варијанта SVG фавикона.
Величине које вам више нису потребне
Старији генератори и даље праве датотеке за историјске интеграције, попут Windows плочица које користе mstile-150x150.png и browserconfig.xml. Додајте их само ако ваш план подршке изричито обухвата те интерфејсе.
Дуга серија apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 и 152x152 потиче из времена када iOS није умео да мења величину. Једна слика од 180×180 замењује све њих.
Уклањање непотребних декларација поједностављује репозиторијум и HTML. Пре уклањања постојеће интеграције проверите које прегледаче и платформе заиста подржавате.
Примарни извори
Честа питања
Да ли је favicon.ico и даље потребан?
Да, али само у корену сајта. Савремени прегледачи преферирају SVG, али многи роботи, агрегатори и клијенти е-поште и даље захтевају /favicon.ico без читања HTML кода. Датотека има неколико килобајта: задржите је.
Коју величину фавикона Google користи у резултатима?
Google тражи икону чија је страница умножак 48 пиксела и обично је приказује на 48×48. PNG од 96×96 или SVG то лако покрива. Икона мора бити доступна роботу и не сме бити блокирана правилима robots.txt.
Може ли фавикон бити правоугаон?
Технички да, визуелно није добар избор. Сваки контекст приказа резервише квадрат: правоугаона слика се изобличава или центрира са празним тракама. Увек почните од квадрата, уз размак око симбола ако треба.