Favicon-csomag generátor
Teljes favicon-csomag képből: favicon.ico, multi-méretű PNG-k, apple-touch-icon, site.webmanifest és a beillesztendő HTML kód. ZIP-ben, böngészőben.
Miről szól ez az eszköz?
A favicon-csomag generátor egyetlen képből legenerálja a teljes, modern favicon-készletet: a klasszikus favicon.ico fájlt (16/32/48 px), a különböző méretű PNG-ket, az apple-touch-icon ikont, a site.webmanifest fájlt és a HTML kódot, amit be kell illesztened az oldal fejlécébe. Mindezt egy letölthető ZIP-ben. Webfejlesztőknek, akik gyorsan, kézi méretezgetés nélkül szeretnének teljes favicon-támogatást.
Hogyan használd a(z) Favicon-csomag generátor-t?
-
Kép feltöltése
Tölts fel egy négyzetes forrásképet, ideálisan 512×512 px méretben.
-
Generálás
Kattints a gombra – az eszköz legenerálja az összes méretet és fájlt.
-
ZIP letöltése
Töltsd le a teljes favicon-csomagot egyetlen ZIP archívumban.
-
Beillesztés
Másold a fájlokat a gyökérmappába, a HTML kódot pedig a <head>-be.
Mikor van rá szükséged?
-
Új weboldal
Teljes favicon-támogatás beállítása egy projekt indításakor, percek alatt.
-
PWA / mobil
A site.webmanifest és a nagy ikonok a kezdőképernyőre mentett webalkalmazáshoz.
-
Apple eszközök
Az apple-touch-icon biztosítja az éles ikont iPhone/iPad könyvjelzőhöz.
-
Márkamegjelenés
Egységes, éles ikon a böngészőfülön és a könyvjelzők között.
Mi az a favicon, és miért kell több méret?
A favicon az a kis ikon, amely a böngészőfülön, a könyvjelzők között és a kezdőképernyőn jelenik meg a weboldalad mellett. Régen elég volt egyetlen favicon.ico fájl, ma azonban a böngészők, az operációs rendszerek és a mobil platformok különböző méretű és formátumú ikonokat várnak el a különféle helyeken.
Ezért készít ez az eszköz egy teljes csomagot: a klasszikus, maximálisan kompatibilis favicon.ico-t (több méret egy fájlban), külön PNG-ket a modern böngészőkhöz, egy nagyobb apple-touch-icon-t az iOS kezdőképernyőhöz, és egy site.webmanifest fájlt, amely a progresszív webalkalmazásokhoz (PWA) szükséges. A mellékelt HTML kóddal mindezt egy lépésben bekötheted.
Hasznos tippek
-
Használj négyzetes forrásképet – a nem négyzetes kép torzulhat a kicsinyítésnél.
-
Az ikon kis méretben is felismerhető legyen: kerüld a sok apró részletet és a vékony vonalakat.
-
A generálás a böngésződben fut – a forráskép nem kerül szerverre.
Gyakori kérdések
- favicon.ico (16/32/48), külön PNG-k (16, 32, 48, 192, 512 px), apple-touch-icon (180 px), site.webmanifest és egy head-snippet.html a beillesztendő <link> tagekkel.
- Egy négyzetes, lehetőleg 512×512 px-es PNG-t a legjobb minőséghez – az eszköz ebből készíti az összes méretet.
- A PNG-ket, az ICO-t és a manifestet általában a weboldal gyökérmappájába; a HTML <link> tageket pedig az oldal <head> részébe kell beilleszteni.
- A böngészők, az operációs rendszerek és a mobil eszközök különböző méretű ikonokat használnak (böngészőfül, könyvjelző, kezdőképernyő). A teljes csomag mindenhol éles ikont biztosít.
- Nem, a teljes generálás a böngésződben történik – a forráskép nem hagyja el a gépedet.