Generator favicona iz SVG-a

Učitaj jedan SVG logotip i dobij sve što modernoj stranici treba: pravi višerezolucijski favicon.ico, PNG ikone u svakoj veličini koju preglednici i telefoni stvarno traže, i HTML <link> oznake za zalijepiti u tvoj <head>. Cijelo renderiranje odvija se u tvom pregledniku — SVG nikad ne napušta tvoj uređaj.

Što je ovaj alat?

favicon.ico nije samo mala slika — to je format spremnika koji može sadržavati nekoliko veličina iste ikone u jednoj datoteci, tako da preglednik, traka zadataka ili traka favorita mogu odabrati koja god rezolucija izgleda najoštrije na mjestu gdje se prikazuje. Preimenovanje PNG-a u favicon.ico to ne postiže: to je jedna slika koja nosi krivu ekstenziju datoteke, i dok je neki preglednici toleriraju, mnogi alati, crawleri i stariji preglednici koji čitaju sirove bajtove očekuju pravu strukturu ICO spremnika i neće uspjeti ili će se vratiti na praznu ikonu.

Ovaj alat gradi pravi ICO spremnik: renderira tvoj SVG na 16×16, 32×32 i 48×48, kodira svaki interno kao PNG, i pakira sva tri u jedan valjani favicon.ico koristeći isti PNG-u-ICO format koji svaki preglednik i OS podržava još od Windows Viste. Uz njega dobiješ zasebne PNG datoteke na 180×180 (veličina koju iOS koristi za ikonu kad netko doda tvoju stranicu na početni zaslon) i 192×192 / 512×512 (veličine koje Android i PWA upiti za instalaciju povlače iz tvog web app manifesta).

Zašto ga koristiti?

Proizvodi istinski valjan višerezolucijski favicon.ico, ne preimenovani PNG.
Pokriva svaku veličinu ikone koja treba stvarnom razvoju u jednom prolazu: 16, 32, 180, 192, 512px.
Gotov HTML za <head> — bez pogađanja rel/sizes/type atributa.
SVG-ovi koji nisu kvadratni centriraju se na prozirnom kvadratu umjesto da se razvlače.
Sve se renderira lokalno u tvom pregledniku; SVG se nikad ne prenosi.

Kako ga koristiti

Klikni okvir ili ispusti svoju SVG logotip datoteku na njega.
Alat ga automatski renderira u svakoj veličini favicona — nema postavki za konfiguriranje.
Preuzmi favicon.ico za korijen tvoje stranice, plus pojedinačne PNG ikone.
Kopiraj HTML isječak i zalijepi ga u <head> svoje stranice.

Primjer

Ulaz

logo.svg — znak tvrtke, 3 KB vektor

Izlaz

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

Jedan SVG na ulazu, svaka ikona datoteka koja treba stvarnom razvoju, na izlazu.

Koja se veličina ikone koristi gdje

Datoteka	Veličina	Koristi se za
favicon.ico	16/32/48px (kombinirano)	Kartica preglednika, traka favorita, traka zadataka
favicon-16.png / favicon-32.png	16×16 / 32×32	Rezerva za preglednike koji preferiraju PNG favikone
apple-touch-icon.png	180×180	iOS ikona početnog zaslona kad se stranica doda na Home Screen
icon-192.png	192×192	Android ikona početnog zaslona, web app manifest
icon-512.png	512×512	PWA upit za instalaciju, ikona zaslona pokretanja za Android

Zašto je SVG izvor bitan

Budući da SVG pohranjuje oblike kao matematiku, a ne kao piksele, svježe renderiranje na 16px i na 512px oboje polaze od iste točne definicije putanje — nema artefakata povećanja na velikom kraju i nema prisilnog nagađanja poravnanja piksela na malom kraju na koje bi se alat morao ograničiti. Ako imaš samo PNG logotip, ovaj isti alat ti ne može pomoći; prvo pretvori ili ponovno izradi logotip kao SVG, jer bi povećavanje malog PNG-a na 512px samo dalo mutan rezultat.

→ SVG pretvarač

Često postavljana pitanja

Zašto jednostavno ne preimenujem PNG u favicon.ico?

.ico datoteka ima vlastiti binarni format spremnika (ICONDIR zaglavlje koje opisuje koliko slika sadrži, praćeno unosom direktorija po slici) — PNG datoteka preimenovana u .ico i dalje je samo PNG s krivom ekstenzijom. Većina modernih preglednika je popustljiva i prikazat će je svejedno, ali ovaj alat gradi pravi ICO spremnik koji sadrži tri stvarne rezolucije, što je ono za što je format osmišljen i što stroži čitači očekuju.

Zašto mi trebaju PNG ikone ako već imam favicon.ico?

favicon.ico pokriva samo klasičnu upotrebu u kartici preglednika/favoritima. 180×180 PNG je ono što iOS koristi kad korisnik doda tvoju stranicu na početni zaslon (apple-touch-icon), a 192×192 / 512×512 PNG-ovi su ono što Android i PWA upiti za instalaciju povlače iz tvog web app manifesta. Bez njih, tvoja ikona na početnom zaslonu telefona vraća se na generičku snimku zaslona ili prazan kvadrat.

Moj logotip nije kvadratan — što se s njim događa?

Centrira se na prozirnom kvadratu u svakoj ciljanoj veličini umjesto razvlačenja, tako da širok ili visok logotip zadržava ispravne proporcije umjesto da se stisne u kvadrat.

Gdje stavljam preuzete datoteke?

Stavi favicon.ico, apple-touch-icon.png, icon-192.png i icon-512.png u korijensku mapu svoje stranice (pored index.html), zatim zalijepi generirane <link> oznake u <head> svoje stranice.

Prenosi li se moj SVG negdje?

Ne. SVG se renderira na lokalne <canvas> elemente, a ICO/PNG datoteke se sastavljaju u tvom pregledniku. Ništa se ne šalje na server.