Favicon generátor — ICO, PNG és Apple Touch Icon
Alakíts egyetlen képet teljes favicon készletté: favicon.ico, PNG ikonok, apple-touch-icon és web app manifest.
Az apple-touch-icon mindig átlátszatlan. Ha az alkalmazás neve üres, a manifest a képfájl nevét használja.
Előnézet
Fájlok a ZIP-ben
Hogyan készíts favicont
- Válassz négyzet alakú képet, ideálisan legalább 512 × 512 pixelest, PNG, JPG, WebP vagy SVG formátumban.
- Válaszd ki, hogyan illeszkedjenek a nem négyzet alakú képek: a contain háttérszínnel tölti ki őket, a cover középről vágja.
- Állítsd be a háttér- és témaszínt, a belső margót, és azt, hogy a kis ikonok megtartsák-e az átlátszó hátteret.
- Írd be az alkalmazás nevét és rövid nevét, amelyeket a web app manifest hordozzon, majd ellenőrizd az élő előnézeteket.
- Töltsd le a ZIP-et az összes fájllal, vagy szerezd meg külön a favicon.ico-t és az apple-touch-icon.png-t, és másold ki a HTML részletet.
Mikor segít
- Új weboldal faviconnal való ellátása képszerkesztő megnyitása nélkül.
- Hiányzó vagy elmosódott favicon lecserélése, amely üres oldalikonként jelenik meg a lapokon.
- Apple-touch-icon hozzáadása, hogy az oldal jól nézzen ki iPhone kezdőképernyőre mentve.
- Android ikonok és manifest előkészítése progresszív webalkalmazáshoz.
- Logó átalakítása rendezett ikonkészletté, egyenletes margóval minden méretben.
Gyakran ismételt kérdések
Milyen méreteket állít elő a generátor?
favicon.ico-t ír 16, 32 és 48 pixeles képekkel, külön favicon-16x16.png és favicon-32x32.png fájlokat, egy 180 × 180-as apple-touch-icon.png-t, valamint 192 és 512 pixeles Android ikonokat.
Miért mindig átlátszatlan az apple-touch-icon?
Az iOS nem mutat átlátszóságot a kezdőképernyő ikonján, így az átlátszó PNG mögött fekete vagy fehér folt jelenne meg. A generátor ezt a fájlt a háttérszíneddel tölti ki, és az apró favicon méreteket átlátszóan hagyja, ha szeretnéd.
Mit írjak a manifestbe?
Használd a teljes oldal- vagy alkalmazásnevet és egy körülbelül tizenkét karakteres rövid nevet, mert a rövid név jelenik meg az ikon alatt a telefonon. A témaszín a böngészősávot színezi, a háttérszín pedig a nyitóképernyőt tölti ki.
Használhatok SVG logót?
Igen. Az SVG 512 pixel szélesre raszterizálódik, és a képarányát a width és height attribútumokból vagy a viewBox-ból veszi, így a négyzet alakú logó négyzet alakú marad.
Hová kerüljenek a fájlok a szerveremen?
Tedd őket az oldal gyökérkönyvtárába az index.html mellé, hogy a részletben szereplő útvonalak, például a /favicon.ico és a /site.webmanifest működjenek. Ha alkönyvtárban tartod őket, szerkeszd a részlet href értékeit, hogy egyezzenek.
Feltöltődik a képem bárhová?
Nem. A kép a böngésződben, egy canvasen dekódolódik és rajzolódik, a ZIP pedig a memóriában áll össze, így semmi nem kerül szerverre.