SVG-ből Favicon Generátor

Tölts fel egy SVG logót, és megkapsz mindent, amire egy modern weboldalnak szüksége van: egy valódi, több felbontású favicon.ico fájlt, PNG ikonokat minden méretben, amit a böngészők és telefonok ténylegesen kérnek, és a HTML <link> tageket, amiket a <head> szekcióba illeszthetsz. Minden renderelés a böngésződben történik — az SVG sosem hagyja el az eszközödet.

Mi ez az eszköz?

A favicon.ico nem csupán egy kis kép — ez egy konténerformátum, amely ugyanannak az ikonnak több méretét tárolhatja egyetlen fájlban, így a böngésző, a tálca vagy a könyvjelzősáv kiválaszthatja, melyik felbontás néz ki a legélesebben az adott helyen. Egy PNG átnevezése favicon.ico-vá nem hoz létre ilyet: az csupán egy kép, rossz fájlkiterjesztéssel, és bár néhány böngésző elnézi ezt, számos eszköz, keresőrobot és régebbi böngésző, amely a nyers bájtokat olvassa, a valódi ICO konténerstruktúrát várja, és hibázik, vagy üres ikonra vált vissza.

Ez az eszköz egy valódi ICO konténert épít: az SVG-det 16×16, 32×32 és 48×48 méretben rendereli, mindegyiket belsőleg PNG-ként kódolja, majd mindhármat egyetlen érvényes favicon.ico fájlba csomagolja, ugyanazzal a PNG-in-ICO formátummal, amit minden böngésző és operációs rendszer támogat a Windows Vista óta. Emellett külön PNG fájlokat is kapsz 180×180 méretben (ezt használja az iOS az ikonhoz, amikor valaki hozzáadja az oldaladat a kezdőképernyőhöz) és 192×192 / 512×512 méretben (ezeket az Android és a PWA telepítési felkérések húzzák le a webalkalmazás-manifesztből).

Miért érdemes használni?

Valóban érvényes, több felbontású favicon.ico-t hoz létre, nem egy átnevezett PNG-t.
Egy menetben lefedi minden méretet, amire egy valós telepítéshez szükség van: 16, 32, 180, 192, 512 px.
Bemásolható <head> HTML — nem kell találgatni a rel/sizes/type attribútumokat.
A nem négyzet alakú SVG-ket átlátszó négyzetre középre igazítja, nyújtás helyett.
Minden helyileg, a böngésződben renderelődik; az SVG sosem kerül feltöltésre.

Használati útmutató

Kattints a dobozra, vagy húzd bele az SVG logófájlodat.
Az eszköz automatikusan rendereli minden favicon méretben — nincs beállítandó paraméter.
Töltsd le a favicon.ico fájlt az oldalad gyökérkönyvtárához, plusz az egyedi PNG ikonokat.
Másold ki a HTML kódrészletet, és illeszd be az oldalad <head> szekciójába.

Példa

Bemenet

logo.svg — egy cégjel, 3 KB-os vektor

Kimenet

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

Egyetlen SVG bemenet, minden ikonfájl, amire egy valós telepítéshez szükség van, a kimenet.

Melyik ikonméretet hol használják

Fájl	Méret	Felhasználás
favicon.ico	16/32/48 px (egyben)	Böngészőfül, könyvjelzősáv, tálca
favicon-16.png / favicon-32.png	16×16 / 32×32	Tartalék azoknak a böngészőknek, amelyek PNG favicont preferálnak
apple-touch-icon.png	180×180	iOS kezdőképernyő-ikon, amikor az oldalt hozzáadják a kezdőképernyőhöz
icon-192.png	192×192	Android kezdőképernyő-ikon, webalkalmazás-manifeszt
icon-512.png	512×512	PWA telepítési felkérés, Android indítóképernyő-ikon

Miért számít az SVG forrás

Mivel az SVG matematikaként tárolja az alakzatokat, nem pixelekként, a 16 pixeles és az 512 pixeles friss renderelés is ugyanabból a pontos útvonaladatból indul ki — nincs felnagyítási torzítás a nagy méretnél, és nincs kényszerű pixelillesztési kompromisszum a kicsinél. Ha csak PNG logód van, ez az eszköz nem tud segíteni; előbb alakítsd át vagy hozd létre újra a logót SVG-ként, mivel egy kis PNG 512 pixelre nagyítása csak elmosódott eredményt adna.

→ SVG Konverter

Gyakori kérdések

Miért ne nevezzek csak át egy PNG-t favicon.ico-vá?

Az .ico fájlnak saját bináris konténerformátuma van (egy ICONDIR fejléc, amely leírja, hány képet tartalmaz, majd egy könyvtárbejegyzés minden képhez) — egy .ico-vá átnevezett PNG fájl belül továbbra is csak egy PNG, rossz kiterjesztéssel. A legtöbb modern böngésző elnéző, és így is megjeleníti, de ez az eszköz egy valódi ICO konténert épít, amely három tényleges felbontást tartalmaz, ami pontosan az, amire a formátumot tervezték, és amit a szigorúbb olvasók elvárnak.

Miért van szükségem PNG ikonokra, ha már van favicon.ico-m?

A favicon.ico csak a klasszikus böngészőfül/könyvjelző felhasználást fedi le. A 180×180 pixeles PNG-t az iOS használja, amikor egy felhasználó hozzáadja az oldaladat a kezdőképernyőhöz (apple-touch-icon), a 192×192 / 512×512 pixeles PNG-ket pedig az Android és a PWA telepítési felkérések húzzák le a webalkalmazás-manifesztből. Ezek nélkül az ikonod a telefon kezdőképernyőjén egy általános képernyőképre vagy üres négyzetre esik vissza.

A logóm nem négyzet alakú — mi történik vele?

Minden célméretnél átlátszó négyzetre középre igazítjuk, nyújtás helyett, így egy széles vagy magas logó megtartja a helyes arányait ahelyett, hogy négyzetbe préselődne.

Hova kell tennem a letöltött fájlokat?

Helyezd a favicon.ico, apple-touch-icon.png, icon-192.png és icon-512.png fájlokat az oldalad gyökérkönyvtárába (az index.html mellé), majd illeszd be a generált <link> tageket az oldalad <head> szekciójába.

Feltöltésre kerül valahova az SVG-m?

Nem. Az SVG helyi <canvas> elemekre renderelődik, és az ICO/PNG fájlok a böngésződben állnak össze. Semmi nem kerül elküldésre egy szerverre.