SVG-st lemmikikooni generaator

Lae üles üks SVG logo ja saad kõik, mida tänapäevane sait vajab: korralik mitmeresolutsiooniline favicon.ico, PNG ikoonid igas suuruses, mida brauserid ja telefonid tegelikult küsivad, ning HTML <link> sildid, mis kleepida oma <head> sisse. Kogu renderdamine toimub sinu brauseris — SVG ei lahku kunagi sinu seadmest.

Mis see tööriist on?

favicon.ico pole lihtsalt väike pilt — see on konteinerformaat, mis mahutab ühte faili mitu sama ikooni suurust, nii et brauser, tegumiriba või järjehoidjariba saab valida just selle eraldusvõime, mis konkreetses kohas kõige teravam välja näeb. PNG faili ümbernimetamine favicon.ico-ks sellist tulemust ei anna: see on üksainus pilt vale faililaiendiga, ja kuigi mõned brauserid seda taluvad, ootavad paljud tööriistad, roomajad ja vanemad brauserid, kes loevad toorbaite, tõelist ICO konteinerstruktuuri ning nurjuvad või langevad tagasi tühjale ikoonile.

See tööriist ehitab tõelise ICO konteineri: renderdab sinu SVG-st suurused 16×16, 32×32 ja 48×48, kodeerib igaühe sisemiselt PNG-ks ja pakib kõik kolm ühte kehtivasse favicon.ico faili, kasutades sama PNG-ICO-s formaati, mida iga brauser ja OS on toetanud alates Windows Vistast. Lisaks saad eraldi PNG-failid suuruses 180×180 (mida iOS kasutab ikoonina, kui keegi lisab sinu saidi kodukuvale) ja 192×192 / 512×512 (suurused, mida Android ja PWA paigalduspakkumised võtavad sinu veebirakenduse manifestist).

Miks seda kasutada?

Loob päriselt kehtiva mitmeresolutsioonilise favicon.ico faili, mitte ümbernimetatud PNG-d.
Katab ühe käiguga iga ikoonisuuruse, mida tegelik juurutus vajab: 16, 32, 180, 192, 512px.
Kopeerimiseks valmis <head> HTML — pole vaja rel/sizes/type atribuute ise arvata.
Ebaruudukujulised SVG-d tsentreeritakse läbipaistval ruudul, mitte ei venitata neid.
Kõik renderdub kohapeal sinu brauseris; SVG ei laadita kunagi üles.

Kuidas kasutada

Klõpsa kastil või lohista sellele oma SVG logofail.
Tööriist renderdab selle automaatselt igas lemmikikooni suuruses — sätteid pole vaja seadistada.
Laadi alla favicon.ico oma saidi juurkataloogi jaoks ning üksikud PNG ikoonid.
Kopeeri HTML koodijupp ja kleebi see oma lehe <head> sisse.

Näide

Sisend

logo.svg — ettevõtte märk, 3 KB vektor

Tulemus

favicon.ico (16/32/48px koos), pluss favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.png

Üks SVG sisse, kõik tegeliku juurutuse vajalikud ikoonifailid välja.

Millist ikoonisuurust kus kasutatakse

Fail	Suurus	Kasutatakse
favicon.ico	16/32/48px (koos)	Brauserisakk, järjehoidjariba, tegumiriba
favicon-16.png / favicon-32.png	16×16 / 32×32	Varulahendus brauseritele, mis eelistavad PNG lemmikikoone
apple-touch-icon.png	180×180	iOS-i kodukuva ikoon, kui sait lisatakse kodukuvale
icon-192.png	192×192	Androidi kodukuva ikoon, veebirakenduse manifest
icon-512.png	512×512	PWA paigalduspakkumine, Androidi käivituskuva ikoon

Miks SVG lähtefail on oluline

Kuna SVG salvestab kujundeid pikslite asemel matemaatikana, algab selle värske renderdamine nii 16px kui ka 512px juures samast täpsest tee-andmestikust — suures otsas pole suurendusartefakte ega väikeses otsas ka sunnitud piksli-lukustamise kompromissi. Kui sul on ainult PNG-logo, ei saa see tööriist aidata; teisenda või loo logo enne SVG-na uuesti, sest väikese PNG suurendamine 512px-ni annaks lihtsalt hägusa tulemuse.

→ SVG teisendaja

Korduma kippuvad küsimused

Miks mitte lihtsalt nimetada PNG ümber favicon.ico-ks?

.ico fail kasutab oma binaarset konteinerformaati (ICONDIR päis, mis kirjeldab, mitu pilti see sisaldab, järgnetuna kataloogikirjega iga pildi kohta) — .ico laiendiga ümbernimetatud PNG on siiski lihtsalt PNG vale laiendiga. Enamik tänapäevaseid brausereid on leebed ja renderdavad selle ikkagi, kuid see tööriist ehitab tõelise ICO konteineri kolme päris eraldusvõimega, mis on täpselt see, milleks formaat loodi ja mida rangemad lugejad ootavad.

Miks mul on vaja PNG ikoone, kui mul on juba favicon.ico?

favicon.ico katab ainult klassikalise brauserisakas/järjehoidjas kasutuse. 180×180 PNG on see, mida iOS kasutab, kui kasutaja lisab su saidi kodukuvale (apple-touch-icon), ning 192×192 / 512×512 PNG-d on need, mida Android ja PWA paigalduspakkumised sinu veebirakenduse manifestist võtavad. Ilma nendeta langeb sinu ikoon telefoni kodukuval tagasi üldisele ekraanipildile või tühjale ruudule.

Mu logo pole ruudukujuline — mis sellega juhtub?

See tsentreeritakse igal sihtsuurusel läbipaistvale ruudule, mitte ei venitata seda, nii et lai või kõrge logo säilitab õiged proportsioonid ega pigistu ruuduks.

Kuhu panen allalaaditud failid?

Pane favicon.ico, apple-touch-icon.png, icon-192.png ja icon-512.png oma saidi juurkataloogi (index.html kõrvale) ning kleebi seejärel loodud <link> sildid oma lehe <head> sisse.

Kas mu SVG laaditakse kuhugi üles?

Ei. SVG renderdatakse kohalikele <canvas> elementidele ning ICO/PNG failid pannakse kokku sinu brauseris. Midagi ei saadeta serverisse.