Favicon formatai: ICO, PNG, SVG ir ko reikia naršyklėms

Kodėl favicon piktogramos vis dar keistai sudėtingos

Favicon atrodo kaip vienas mažas paveikslėlis, bet jis yra naršyklės sąsajos, žymių, skirtukų, prisegtų nuorodų, paieškos rezultatų, mobiliųjų pradžios ekranų ir progresyviųjų žiniatinklio programų diegimų sankirtoje. Kiekvienas kontekstas turi šiek tiek skirtingų lūkesčių.

Todėl patarimai apie favicon dažnai atrodo netvarkingi. Kai kurios komandos pateikia tik vieną favicon.ico, nes anksčiau to pakakdavo. Kitos sugeneruoja tuziną failų nežinodamos, kurie iš jų iš tikrųjų naudojami. Protingas vidurys yra mažesnis: suprasti, ką gerai daro ICO, PNG ir SVG, ir tada pateikti kompaktišką rinkinį, aprėpiantį dabartines naršykles ir įprastus įrenginių kontekstus.

Favicon nėra vieta demonstruoti vaizdų apdorojimo grandinę. Tai vieta būti nuobodiems, aiškiems ir suderinamiems.

ICO: senasis formatas, atsisakantis išnykti

ICO yra klasikinis Windows piktogramų konteineris. Jame gali būti keli skirtingų dydžių rastriniai vaizdai, dažnai 16×16, 32×32 ir 48×48 pikselių. Tai svarbu, nes favicon gali būti atvaizduojamas labai mažas naršyklės skirtuke, didesnis žymių sąraše ir dar kitaip Windows nuorodose.

Svarbi detalė: ICO yra konteineris, o ne tiesiog vienas paveikslėlis. Geras favicon.ico paprastai turi kelis rastrinius dydžius, kad naršyklė arba operacinė sistema galėtų pasirinkti artimiausią atitikmenį, užuot masteliavusi vieną mažytę rastrinę piktogramą.

ICO vis dar naudingas dėl trijų priežasčių:

• Naršyklės gali automatiškai prašyti /favicon.ico, net jei jo nesusiejate savo HTML.
• Kai kurios senesnės naršyklės ir integracijos jo tikisi.
• Tai saugus atsarginis variantas, kai naujesnės piktogramų deklaracijos ignoruojamos.

Tai nereiškia, kad ICO turėtų būti vienintelė jūsų piktograma. Jį nepatogu redaguoti, jis nėra itin draugiškas šiuolaikinėms darbo eigoms ir prastas kaip pagrindinis prekės ženklo ženklo šaltinis. Laikykite jį suderinamumo atsarginiu variantu.

Praktiškai įdėkite tikrą /favicon.ico į svetainės šaknį. Neteikite ten 404, nebent mėgstate triukšmingus žurnalus ir nereikalingus naršyklių pakartotinius bandymus.

PNG: patikimas darbinis arklys

PNG vis dar yra labiausiai nuspėjamas rastrinis formatas favicon ir lietimo piktogramoms. Jis palaiko skaidrumą, yra plačiai palaikomas ir nuosekliai veikia skirtingose naršyklėse bei platformose.

Favicon piktogramoms PNG naudingas tada, kai norite aiškių pikselinių dydžių piktogramų, pavyzdžiui, 32×32 arba 48×48. Mobiliųjų pradžios ekranų piktogramoms PNG kai kuriose aplinkose iš esmės yra privalomas. Pavyzdžiui, Apple touch icons įprastoje produkcinėje praktikoje yra pagrįstos PNG.

Padeda kelios praktinės taisyklės:

• Eksportuokite iš vektorinio šaltinio, o ne iš jau mažo rastrinio paveikslėlio.
• Pasirūpinkite, kad piktograma būtų įskaitoma 16×16 dydžiu, prieš rūpindamiesi didesniais dydžiais.
• Pridėkite pakankamai paraštės, kad ženklas neatrodytų nukirptas suapvalintuose ar maskuotuose kontekstuose.
• Venkite smulkaus teksto, plonų linijų ir detalių iliustracijų.

Dėl PNG glaudinimo favicon atveju paprastai neverta pernelyg jaudintis, nes failai yra maži. Vis dėlto nepateikite 500 KB lietimo piktogramos vien todėl, kad ji tiesiai iš dizaino eksporto. Jei jau peržiūrite platesnius vaizdų pasirinkimus, tas pats disciplinuotas mąstymas iš vaizdų formatų sprendimų šiuolaikiniame žiniatinklyje tinka ir čia: rinkitės formatą pagal užduotį, o ne todėl, kad jis madingas.

SVG: moderni, lanksti parinktis

SVG favicon patrauklūs, nes nepriklauso nuo raiškos. Vienas mažas failas gali švariai atvaizduoti daugybėje dydžių, jį galima tiesiogiai redaguoti kode arba eksportuoti iš dizaino programinės įrangos.

Šiuolaikinės Chromium, Firefox ir Safari versijos palaiko SVG favicon. Todėl SVG yra geras pagrindinis favicon formatas daugeliui svetainių, ypač kai piktograma yra paprastas logotipas, glifas ar geometrinis ženklas.

Tačiau SVG favicon turi išlygų.

Pirma, SVG turėtų būti savarankiškas. Nesiremkite išoriniais šriftais, nuotoliniais vaizdais ar skriptais. Naršyklės taiko apribojimus SVG, naudojamam kaip vaizdas, ir net jei kas nors veikia vienoje naršyklėje, kitoje gali neveikti.

Antra, išlaikykite vizualinį paprastumą. SVG stebuklingai neišsprendžia 16 pikselių problemos. Detali vektorinė iliustracija vis tiek tampa dėme, kai suspaudžiama į skirtuką.

Trečia, atsargiai elkitės su dinaminiu stiliumi. Kai kurios komandos naudoja prefers-color-scheme SVG favicon viduje, kad piktograma prisitaikytų prie tamsių ir šviesių naršyklės temų. Tai gali veikti, bet naršyklių elgsena ir podėliavimas gali būti netolygūs. Jei prekės ženklo atpažįstamumas svarbus, viena tvirta piktograma dažnai pranoksta gudrią prisitaikančią.

SVG yra geras šaltinis ir geras modernus pateikimo formatas. Tai nėra priežastis praleisti atsarginius failus.

Ko naršyklės iš tikrųjų ieško

Naršyklės favicon aptinka dviem pagrindiniais būdais: per aiškias HTML nuorodas ir numanomas užklausas į šaknį.

Numanoma elgsena yra senoji: jei naršyklei reikia piktogramos ir ji jos nerado, ji gali prašyti /favicon.ico. Todėl šakninis ICO failas išlieka naudingas net moderniose svetainėse.

Aiški elgsena naudoja <link> elementus dokumento antraštėje. Kompaktiška moderni sąranka atrodo taip:

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

Tada manifestas gali nurodyti į didesnes PNG piktogramas, naudojamas diegiamoms žiniatinklio programoms:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Tai nėra vienintelė tinkama sąranka, bet tai geras atskaitos taškas. Ji suteikia modernioms naršyklėms SVG, pateikia įprastą ICO atsarginį variantą, aprėpia iOS išsaugojimą pradžios ekrane ir palaiko programų diegimo kontekstus.

Favicon rinkinys, kurį turėtų pateikti dauguma svetainių

Įprastai rinkodaros svetainei, dokumentacijos svetainei, SaaS programai ar leidiniui šio rinkinio pakanka:

• /favicon.ico su 16×16 ir 32×32, pasirinktinai 48×48.
• /icon.svg kaip moderni mastelio keičiama favicon piktograma.
• /apple-touch-icon.png 180×180 dydžio.
• /icon-192.png ir /icon-512.png, jei turite žiniatinklio programos manifestą.

Galite pridėti daugiau dydžių, jei platforma turi konkretų reikalavimą, bet negeneruokite dešimties failų iš įpročio. Kiekvienas papildomas failas yra dar vienas dalykas, kurį reikia podėliuoti, nepamiršti, teisingai pavadinti arba neatnaujintą pašalinti po prekės ženklo keitimo.

Jei jūsų svetainė nėra diegiama ir neturi manifesto, 192 ir 512 pikselių piktogramų gali nereikėti. Jei jūsų svetainė veikia kaip programa, greičiausiai jų reikia.

Dažniausi gedimų scenarijai

Dažniausios favicon klaidos nėra meninės. Tai pateikimo problemos.

Viena jų yra agresyvus podėliavimas. Naršyklės atkakliai laiko favicon. Testuojant pakeista piktograma gali nepasirodyti, kol neatliksite priverstinio atnaujinimo, neišvalysite svetainės duomenų, nepanaudosite naujo failo pavadinimo arba netestuosite šviežiame profilyje. Produkciniams prekės ženklo keitimams /icon.svg?v=2 pakeitimas HTML gali padėti, bet šakninis /favicon.ico yra sudėtingesnis, nes naršyklės jo prašo tiesiogiai. Failo pakeitimas ir laukimas, kol podėliai pasibaigs, dažnai yra darbo dalis.

Kita dažna problema yra neteisingas MIME tipas. SVG turėtų būti pateikiamas kaip image/svg+xml, PNG kaip image/png, o ICO dažnai kaip image/x-icon arba image/vnd.microsoft.icon. Daugelis naršyklių atlaidžios, bet ne visi kontekstai. Jei kažkas neveikia tik vienoje naršyklėje, prieš perpiešdami piktogramą patikrinkite tinklo atsaką. Čia tinka tie patys įpročiai, naudojami derinant peradresavimus ir HTTP antraštes produkcijoje: žiūrėkite į faktinį atsaką, o ne į tai, ką CMS teigia pateikianti.

Trečia problema yra dizaino tankis. Logotipai, kurie puikiai veikia svetainės antraštėje, dažnai nepavyksta kaip favicon. Skirtuko piktograma yra negailestingas testas. Pašalinkite žodžius, supaprastinkite formas, padidinkite kontrastą ir testuokite realiais dydžiais. Jei piktograma yra prasminis turinys puslapio viduje, tada svarbūs prieinamumo aspektai, tokie kaip alternatyvus tekstas; pačiam favicon tai naršyklės sąsajos dekoracija, o ne puslapio turinys. Apie skirtumą skaitykite mūsų pragmatiškame vaizdų alternatyvaus teksto vadove.

<!-- tool-cta:start -->

💡 Išbandykite tai: Vienu kartu sugeneruokite ICO, PNG ir SVG variantus, kurių tikisi šiuolaikinės naršyklės, naudodami Ultimate Favicon Generator.

<!-- tool-cta:end -->

Paprastas įgyvendinimo kontrolinis sąrašas

Prieš pateikdami naudokite šį kontrolinį sąrašą:

1. Pradėkite nuo švaraus vektorinio pagrindo.
2. Patikrinkite ženklą 16×16 ir 32×32 dydžiais.
3. Eksportuokite savarankišką SVG favicon.
4. Sugeneruokite kelių dydžių ICO atsarginį variantą.
5. Eksportuokite 180×180 Apple touch icon.
6. Pridėkite 192×192 ir 512×512 PNG, jei naudojate manifestą.
7. Įdėkite /favicon.ico į svetainės šaknį.
8. Patikrinkite būsenos kodus, MIME tipus ir podėliavimo antraštes.
9. Testuokite bent vienoje Chromium naršyklėje, Firefox ir Safari, jei jūsų auditorijoje yra Apple įrenginių.

Favicon yra mažos, bet jos taip pat labai matomos. Sugedusi piktograma leidžia svetainei atrodyti neužbaigtai. Gerai sukurta piktograma ištirpsta sąsajoje, ir būtent to siekiama.