CodeKitHubKaj je to orodje?
favicon.ico ni le majhna slika — je vsebniška oblika zapisa, ki lahko v eni datoteki hrani več velikosti iste ikone, tako da lahko brskalnik, opravilna vrstica ali vrstica z zaznamki izbere ločljivost, ki je najbolj ostra za mesto, kjer jo prikazuje. Preimenovanje PNG datoteke v favicon.ico tega ne omogoča: gre za eno samo sliko z napačno pripono, in čeprav to nekateri brskalniki tolerirajo, veliko orodij, pajkov in starejših brskalnikov, ki berejo surove bajte, pričakuje pravo strukturo ICO vsebnika in bo odpovedalo ali prikazalo prazno ikono.
To orodje ustvari pravi ICO vsebnik: tvoj SVG upodobi pri 16×16, 32×32 in 48×48, vsako velikost interno zakodira kot PNG in vse tri zapakira v eno veljavno datoteko favicon.ico, z uporabo iste oblike zapisa PNG-v-ICO, ki jo podpira vsak brskalnik in operacijski sistem od Windows Vista naprej. Poleg tega dobiš ločene PNG datoteke pri 180×180 (velikost, ki jo iOS uporabi za ikono, ko nekdo tvoje spletno mesto doda na domači zaslon) ter 192×192 / 512×512 (velikosti, ki jih Android in pozivi za namestitev PWA vlečejo iz manifesta tvoje spletne aplikacije).
Zakaj ga uporabiti?
- Ustvari resnično veljaven večločljivostni favicon.ico, ne preimenovanega PNG-ja.
- V enem koraku pokrije vsako velikost ikone, ki jo potrebuje resnična objava: 16, 32, 180, 192, 512 px.
- HTML koda za <head>, pripravljena za prilepitev — brez ugibanja atributov rel/sizes/type.
- Nekvadratni SVG-ji so centrirani na prosojnem kvadratu namesto raztegnjeni.
- Vse se upodobi lokalno v tvojem brskalniku; SVG se nikoli ne naloži na strežnik.
Kako ga uporabljati
- Klikni okvir ali nanj povleci svojo SVG datoteko z logotipom.
- Orodje ga samodejno upodobi pri vsaki velikosti favicona — brez nastavitev.
- Prenesi favicon.ico za koren svojega spletnega mesta ter posamezne PNG ikone.
- Kopiraj HTML kodo in jo prilepi v <head> svoje strani.
Primer
Vnos
logo.svg — znamka podjetja, 3 KB vektorRezultat
favicon.ico (16/32/48 px v enem), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180 px), icon-192.png, icon-512.pngEn SVG na vhodu, vsaka datoteka ikone, ki jo resnična objava potrebuje, na izhodu.
Katera velikost ikone se uporablja kje
| Datoteka | Velikost | Uporablja se za |
|---|---|---|
| favicon.ico | 16/32/48 px (v enem) | Zavihek brskalnika, vrstica zaznamkov, opravilna vrstica |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Nadomestilo za brskalnike, ki raje uporabljajo PNG favicone |
| apple-touch-icon.png | 180×180 | Ikona iOS domačega zaslona, ko je spletno mesto dodano na domači zaslon |
| icon-192.png | 192×192 | Ikona Android domačega zaslona, manifest spletne aplikacije |
| icon-512.png | 512×512 | Poziv za namestitev PWA, ikona zagonskega zaslona Android |
Zakaj je izvorni SVG pomemben
Ker SVG shranjuje oblike kot matematiko in ne kot piksle, upodobitev na novo pri 16 px in pri 512 px vedno izhaja iz istih natančnih podatkov o poti — na velikem koncu ni artefaktov povečave, na majhnem koncu pa orodju ni treba sklepati kompromisov glede zaokroževanja pikslov. Če imaš samo PNG logotip, ti to isto orodje ne more pomagati; najprej pretvori ali na novo ustvari logotip kot SVG, saj bi povečava majhnega PNG-ja na 512 px preprosto dala zamegljen rezultat.
Pogosta vprašanja
Zakaj ne preprosto preimenujem PNG-ja v favicon.ico?
Datoteka .ico ima svojo lastno binarno strukturo vsebnika (glava ICONDIR, ki opisuje, koliko slik vsebuje, sledi pa ji vnos v imeniku za vsako sliko) — PNG datoteka, preimenovana v .ico, je še vedno le PNG z napačno pripono. Večina sodobnih brskalnikov je prizanesljiva in jo bo vseeno upodobila, a to orodje ustvari pravi ICO vsebnik s tremi dejanskimi ločljivostmi, kar je natanko to, za kar je bila oblika zapisa zasnovana in kar pričakujejo strožji čitalniki.
Zakaj potrebujem PNG ikone, če že imam favicon.ico?
favicon.ico pokriva le klasično uporabo v zavihku brskalnika/zaznamkih. PNG velikosti 180×180 je tisti, ki ga iOS uporabi, ko uporabnik tvoje spletno mesto doda na domači zaslon (apple-touch-icon), PNG-ja 192×192 / 512×512 pa Android in pozivi za namestitev PWA vlečeta iz manifesta tvoje spletne aplikacije. Brez njih se tvoja ikona na domačem zaslonu telefona povrne na splošni posnetek zaslona ali prazen kvadrat.
Moj logotip ni kvadraten — kaj se zgodi z njim?
Pri vsaki ciljni velikosti je centriran na prosojnem kvadratu, namesto da bi bil raztegnjen, tako da širok ali visok logotip ohrani pravilna razmerja namesto stiskanja v kvadrat.
Kam naj namestim prenesene datoteke?
Postavi favicon.ico, apple-touch-icon.png, icon-192.png in icon-512.png v korensko mapo svojega spletnega mesta (poleg index.html), nato pa ustvarjene oznake <link> prilepi v <head> svoje strani.
Ali se moj SVG kam naloži?
Ne. SVG se upodobi na lokalnih elementih <canvas>, datoteki ICO/PNG pa se sestavita v tvojem brskalniku. Nič se ne pošilja na strežnik.