Favicon-generátor
A böngészők többféle ikonméretet várnak: klasszikus 16 × 16 favicon.ico, 32 × 32 tab ikonok, 180 × 180 apple-touch-icon és 192 × 192 PWA ikonok. Töltsön fel egy négyzet alakú emblémát, és töltsd le a teljes készletet — helyileg generálva anélkül, hogy a márkaelemeket a szerverre küldené.
Hogyan generáljunk kedvenc ikonokat
1. Töltsön fel négyzet alakú PNG- vagy JPG-fájlt (512 × 512 vagy nagyobb ajánlott).
2. A generált méretek előnézete.
3. Töltsd le az ikoncsomagot vagy az egyes fájlokat.
4. Adjon hozzá hivatkozási címkéket a HTML-fejhez, és helyezze el a fájlokat a /public vagy a webhely gyökérkönyvtárába.
Példák a Favicon beállítására
Új statikus webhely
Hozza létre a favicon.ico plusz 32×32 PNG fájlt, és adjon hozzá szabványos link rel="icon" címkéket a layout.html fájlhoz.
PWA jegyzék
Exportáljon 192×192 és 512×512 PNG-t a manifest.json ikontömbhöz.
Rebrand csere
Cseréljen ki egy fő logót, és állítsd újra az összes méretet, hogy a lapok és a kezdőképernyőn megjelenő parancsikonok illeszkedjenek.
Mikor használd ezt az eszközt
• Amikor elindít egy webhelyet, és egyszerre minden szabványos ikonméretre van szüksége.
• Ha van raszteres logója, de nincs több méretű .ico fájlja.
• Ha helyi generálást szeretnél márkaelemek feltöltése nélkül.
Mikor válassz mást
• Ha az embléma részletes — egyszerűsítse betűjelre a 16×16-os olvashatóság érdekében.
• Amikor az SVG faviconok elegendőek a csak modern közönség számára.
• Amikor a platformboltok szigorúan meghatározott réteges PSD-forrásokat igényelnek.
HTML linkcímkék ellenőrzőlista
Tartalmazza a rel="icon" értéket a PNG-méretekhez, a rel="apple-touch-icon"-t iOS-hez, és opcionálisan a manifest.json fájlt a PWA-khoz. Helyezze el a fájlokat kiszámítható útvonalakra (a/favicon.ico még mindig segít a régi bejáróknak).
16×16-os tervezés
A favicon méretében a finom részletek eltűnnek. Használjon merész formákat, nagy kontrasztot, és kerülje a vékony vonásokat. Sok márka monogramváltozatokat használ az apró méretekhez.
Gyorsítótár-buktatás a márkaváltásnál
A böngészők agresszíven gyorsítótárazzák a kedvenc ikonokat. Nevezze át a fájlokat, vagy adjon hozzá ?v=2 lekérdezést az ikonok frissítésekor, hogy a felhasználók láthassák az új jelölést.
Gyakori kérdések
Milyen méretű legyen a forráskép?
Legalább 512 × 512 képpont négyzet. A nagyobb mesterek leskálázása jobb, mint a kis logók felskálázása.
ICO vs PNG favicon?
A modern böngészők elfogadják a PNG-t; A .ico többféle méretet is csomagol a régi Windows lapokhoz.
apple-touch-icon mérete?
180 × 180 px iOS kezdőképernyőhöz — használd a PNG-t átlátszóság nélkül a legjobb eredmény érdekében.
Transparent háttér?
PNG lapokhoz működik; Az iOS otthoni ikonjai fehér matt színűek lehetnek — tesztelje az eszközön.
Fel vannak töltve emblémák a szerverre?
Nem — az átméretezés helyileg használ vászonképet.
SVG-forrás?
Konvertálja a nagy felbontású SVG-t PNG-be.