Egy rendes favicon-készlet több egyetlen fájlnál: a böngészők többméretű .ico-t akarnak, az iOS 180 px-es apple-touch-icont, az Android 192 és 512 px-es PNG-ket plusz web manifestet. Ez az eszköz egyetlen képből rendereli mindet, és egy ZIP-be csomagolja őket, a <head>-be illesztendő pontos HTML-tagekkel együtt.
Az előnézet valós 16, 32 és 48 px-en mutatja az ikonodat, így még kiadás előtt ellenőrizheted, hogy apró méretben is felismerhető marad-e.
Használat
- Add hozzá a logódatA négyzetes képek működnek legjobban; a többit középre vágjuk.
- Ellenőrizd a kis méreteketA 16 px-es előnézet az, amit a legtöbb felhasználó ténylegesen lát a lapfülön.
- Töltsd le a ZIP-etfavicon.ico, hat PNG, site.webmanifest és egy beillesztésre kész html-snippet.txt.
Egy kép be, egy teljes favicon-készlet ki
Dobj be egyetlen logót vagy ikont, és ez a generátor felépíti a teljes készletet, amire egy modern oldalnak szüksége van: többméretű favicon.ico-t 16, 32 és 48 pixeles változatokkal, különálló PNG-ket 16, 32, 48 méretben, 180-at az Apple touch ikonhoz, valamint 192-t és 512-t Androidhoz és PWA-telepítésekhez, plusz egy site.webmanifest fájlt. Minden egyetlen ZIP-ben érkezik, így egyenesen a projekted gyökerébe dobhatod.
Kapsz egy azonnal beilleszthető HTML head-kódrészletet is, a helyes link- és meta-címkékkel már bekötve. Másold a sablonodba, töltsd fel a fájlokat, és a favicon megjelenik a böngészőlapokon, a könyvjelzőkben és a kezdőképernyős parancsikonokban anélkül, hogy kézzel írnál bármilyen jelölést.
Éles ikonok minden méretben
A faviconok kegyetlenül kicsik, ezért a generátor valós méretű előnézeteket renderel 16, 32 és 48 pixelen — pontosan úgy, ahogy a böngészőlap mutatja majd őket. Így még szállítás előtt elkapod azt a logót, ami 16px-en péppé válik. Ha a forrásképed nem négyzetes, az eszköz középre vágja, így az ikon kiegyensúlyozott marad, nem összenyomott.
Az egész folyamat a böngészőben fut az eredeti képedből, vagyis nagy felbontású logóból generálhatsz favicon PNG-ket és ICO-t bármilyen feltöltés vagy fiók nélkül.
Mire használják
Új oldal indítása — Generáld le a favicon.ico-t és az összes PNG-méretet egy menetben, hogy a lapok és könyvjelzők már az első napon késznek tűnjenek.
PWA-telepítési ikon hozzáadása — Exportáld a 192-es és 512-es PNG-ket plusz egy site.webmanifest fájlt, hogy az alkalmazásod rendes kezdőképernyő-ikonnal települjön.
Apple touch ikon — Készítsd el a 180x180-as apple-touch-icont, hogy az iOS-könyvjelzők és kezdőképernyők éles csempét mutassanak.
Meglévő oldal arculatváltása — Futtass át egy új logót a generátoron, és cseréld le az egész ikonkészletet egyszerre.
Átadás ügyfélnek — Adj át egyetlen ZIP-et az ico-val, PNG-kkel, manifesttel és a head-kódrészlettel, hogy a fejlesztő csak bedobja.
Kisméretű olvashatóság ellenőrzése — Használd a valós méretű 16px-es előnézetet annak megerősítésére, hogy egy részletgazdag logó ikonként is olvasható marad.
Nem négyzetes logó — Adj be egy széles szólogót, és hagyd, hogy a középre vágás kiegyensúlyozott, négyzetes faviconná alakítsa.
Statikus oldal vagy keretrendszeres projekt — Másold a generált head-címkéket a Next-, Astro- vagy sima HTML-sablonodba, és mehet is ki.
Miért az IMG.DIY
Teljes készlet
ICO + 16/32/48/180/192/512 PNG + manifest.
Másolható HTML
A pontos link-tagek szövegfájlként mellékelve.
Valós méretű előnézet
Nézd meg előbb az ikont valós 16/32/48 px-en.
Privát
A logód soha nem hagyja el a böngészőt.