.ico vis dar yra svetainės šakniniame kataloge laukiamas formatas, o dauguma internetinių keitiklių prašo įkelti vaizdą į jų serverį. Štai kaip iš PNG gauti tinkamą kelių dydžių favicon.ico nieko neįkeliant.
.ico nėra tiesiog pervadintas vaizdas
Pervadinti logo.png į favicon.ico nepakanka. ICO yra konteinerio formatas su atskira antrašte: ji nurodo vaizdų skaičių, kiekvieno matmenis ir pradžios vietą faile. Pervadintas PNG tokios antraštės neturi, todėl griežčiau tikrinančios naršyklės jo nerodo.
Tinkamas ICO talpina kelias tos pačios piktogramos raiškas. Naršyklė perskaito antraštę, pasirenka artimiausią reikalingam dydžiui versiją ir nieko nedidina.
PNG keitimas į ICO trimis žingsniais
Pirmas žingsnis – paruošti šaltinį. Kvadratinis bent 512×512 pikselių PNG duoda geriausią rezultatą, nes visi dydžiai kuriami mažinant. Jei fonas skaidrus, dabar nuspręskite, ar jį palikti: kortelei jis puikiai tinka, tačiau iOS ir Android jį pakeis juodu.
Antras žingsnis – sukurti skirtingas raiškas. Faile turi būti bent 16×16, 32×32 ir 48×48. Dydį reikia keisti kokybišku perskaičiavimo filtru, kitaip maži vaizdai taps neįskaitomi.
Trečias žingsnis – supakuoti. Trys vaizdai sujungiami į vieną ICO konteinerį, o antraštėje aprašomas kiekvienas įrašas. Rezultatas įkeliamas į svetainės šakninį katalogą pavadinimu favicon.ico, kur naršyklės jį randa net be HTML žymos.
Kodėl svarbu konvertuoti vietoje
Dauguma PNG į ICO keitiklių įkelia failą į serverį, jį apdoroja ir grąžina rezultatą. Jūsų logotipas, dažnai dar prieš viešą pristatymą, atsiduria jūsų nevaldomame kompiuteryje ir jam taikoma duomenų saugojimo politika, kurios neskaitėte.
Tačiau šiuolaikinė naršyklė visa tai atlieka pati: iškoduoja PNG, keičia dydį canvas drobėje, iš naujo užkoduoja kiekvieną dydį ir surenka ICO konteinerį. Taip veikia LFFavicon. Jokia užklausa nesiunčia jūsų vaizdo, o užvėrus kortelę viskas išvaloma.
Nauda nėra vien teorinė: keitimas vyksta iškart, įkėlus puslapį veikia ir be interneto, nėra eilės ar dienos limito.
Vien .ico jau nepakanka
Pakeitus PNG į ICO, pasirūpinama kortelėmis ir senesnėmis programomis, tačiau lieka trys aplinkos: naujos naršyklės, kurios renkasi bet kokio dydžio ryškų SVG, iOS pradžios ekranas, kuriam reikia neskaidraus 180×180 PNG, ir Android, skaitantis žiniatinklio manifestą.
Kadangi vaizdą vis tiek apdorojate, sukurkite visą rinkinį vienu kartu. Taip veikia generatorius: vienas šaltinis naudojamas .ico, SVG, Apple Touch bei manifesto piktogramoms, o kiekvienos aplinkos peržiūra rodoma dar prieš atsisiunčiant.
Pirminiai šaltiniai
Dažniausi klausimai
Kokio dydžio PNG reikia ICO sukurti?
Bent 512×512 pikselių kvadrato. Jei vaizdas mažesnis nei 128×128, didesnes rinkinio versijas tenka didinti ir rezultatas būna neryškus. SVG dar geresnis, nes neturi raiškos ribos.
Ar .ico išsaugo skaidrumą?
Taip, ICO formatas palaiko pilną alfa kanalą, todėl skaidrus PNG kortelėje lieka skaidrus. Tačiau atkreipkite dėmesį į iOS piktogramą: sistema skaidrias sritis užpildo juodai, todėl jai pridėkite foną.
Kur dėti favicon.ico failą?
Domeno šakniniame kataloge, pasiekiamą adresu https://yoursite.com/favicon.ico. Naršyklės ir paieškos robotai pagal nusistovėjusią tvarką užklausia būtent šio adreso, net jei nėra jį nurodančios link žymos.