Használata
- Válassza a Betűk lehetőséget, és írjon be egy vagy két karaktert a színeivel, vagy válassza a Kép lehetőséget, és adjon meg egy logót (ideális esetben négyzet alakú, legalább 512 px).
- Ellenőrizze az összes méret előnézetét, különösen a 16 és 32 px-es méretet, amelyek a böngészőlapokon jelennek meg.
- Töltse le a ZIP-fájlt, és töltse fel a benne lévő fájlokat a webhelye gyökerébe.
- Illessze be a HTML-tageket az oldalak head szakaszába, és szükség esetén igazítsa ki a nevet a site.webmanifest fájlban.
Hogyan működik
A böngészők és eszközök különböző helyeken keresik az ikonokat. Az itt előállított csomag a gyakori eseteket fedi le: favicon.ico 16, 32 és 48 px-es képekkel a böngészőlapokhoz, könyvjelzőkhöz és a régebbi szoftverekhez, amelyek automatikusan kérik a /favicon.ico fájlt; 16 és 32 px-es PNG fájlok link elemekből hivatkozva; 180 × 180-as apple-touch-icon, amely akkor jelenik meg, amikor valaki iPhone vagy iPad kezdőképernyőjéhez adja a webhelyet; valamint 192 és 512 px-es ikonok a site.webmanifestből hivatkozva Android kezdőképernyőhöz és telepíthető webalkalmazásokhoz.
A favicon.ico fájl az ikonokat PNG-képként tárolja egy ICO tárolóban, amelyet minden jelenlegi böngésző és a Windows Vista vagy újabb verziók olvasni tudnak. Az ICO és ZIP fájlokat az ezen az oldalon futó kód állítja össze; semmi sem kerül szerverre.
Kis méretekben egyszerű kialakításra van szükség: 16 × 16 pixelen a vékony vonalak és a kis szöveg eltűnnek, ezért egy félkövér betű vagy egyszerűsített logó jobban működik, mint egy teljes, szavakat is tartalmazó logó. A kép több jó minőségű lépésben lesz kicsinyítve. Az apple-touch-icon mindig egyszínű hátteret kap, mert az iOS feketével tölti ki az átlátszó területeket, és a sarkokat maga kerekíti.
Új ikonok feltöltése után a böngészők egy ideig még a régi favicont jeleníthetik meg, mert erősen gyorsítótárazzák. Általában segít a gyorsítótár megkerülésével végzett frissítés vagy a /favicon.ico közvetlen megnyitása.
Példák
Betűikon új projekthez
A „TG” felirat fehér betűkkel egy sötétzöld, lekerekített sarkú négyzeten tiszta ikont ad, amely 16 × 16 px méretben is olvasható marad a böngészőlapon, anélkül hogy tervezett logóra lenne szükség.
Ikon meglévő logóból
Egy 1024 × 1024 px-es, átlátszó hátterű PNG logó a „Teljes kép illesztése” beállítással átlátszó lapikonokat és a márkaszínű apple-touch-icon ikont eredményez.
Széles logó
Egy 1200 × 300-as szöveges logónál a középső rész kivágása csak a középső betűket tartja meg. A teljes kép illesztése mindent megtart, de apró lesz; egy külön négyzet alakú logójel általában jobban mutat.
Gyakori kérdések
Kell-e még a favicon.ico?
Még mindig hasznos. Egyes böngészők, hírcsatorna-olvasók és eszközök akkor is a /favicon.ico fájlt kérik a webhely gyökeréből, ha nincs link tag. A modern böngészők a HTML-ben hivatkozott PNG-ikonokat is használják.
Hová tegyem a fájlokat?
Töltse fel őket a webhelye gyökérkönyvtárába, a kezdőlap mellé, hogy a /favicon.ico és a HTML-ben szereplő többi útvonal működjön. Ha almappát használ, módosítsa az útvonalakat a link tagekben és a site.webmanifest fájlban.
Miért látszik még mindig a régi favicon?
A böngészők a faviconokat külön és hosszú ideig gyorsítótárazzák. Próbáljon meg egy teljes frissítést, nyissa meg a /favicon.ico fájlt új lapon, vagy ellenőrizze privát ablakban. A fájlok átnevezése, például favicon-v2.ico névre, szintén újratöltést kényszerít ki.
Készít-e az eszköz SVG-favicont?
Nem. PNG- és ICO-fájlokat hoz létre, amelyek mindenhol működnek. Ha már van SVG-logója, a fájlok mellett saját maga is hozzáadhatja egy image/svg+xml típusú link taggel.
Adatvédelem
Az ikonok, az ICO-fájl és a ZIP a böngészőjében jönnek létre. A képet és a szöveget nem töltjük fel, nem tároljuk, és nem használjuk elemzésekhez.