Melyik favicon-fájlokra van szükség egy weboldalhoz, és mekkora méretben

Egy weboldalnak kevés ikonfájlra van szüksége, és a legtöbb döntés a méretről szól. Az oldal gyökerébe tegyél egy favicon.ico fájlt 16, 32 és 48 pixeles képpel a böngészőfülekhez és Windowshoz. Adj hozzá egy 180 pixeles Apple touch icon-t az iPhone és iPad kezdőképernyőjéhez, valamint 192 és 512 pixeles PNG ikonokat, amelyeket egy webalkalmazás-manifestben sorolsz fel. A favicon-generátor mindezt elkészíti egyetlen logóból, és megírja az oldalaidba illeszthető HTML-sorokat.

A fájlok és méretük

A generátor által letöltött ZIP-ben hét fájl van. A favicon.ico három PNG képből készül, 16, 32 és 48 pixelesből, amelyek egyetlen fájlba kerülnek. Minden ikon ugyanaz a logó, csak kisebbre rajzolva. A generátor a kép 512 pixeles változatából dolgozik, és ebből készíti el az egyes méreteket.

A HTML-sorok

A generátor négy sort ír az oldalak fejlécébe:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Az első sor a favicon.ico fájlra mutat, és 48 × 48-asnak jelöli. A második a 32 pixeles PNG-t adja meg. A harmadik az Apple touch icon-t nevezi meg, a negyedik pedig a manifestre mutat, ahol a 192 és 512 pixeles ikonok szerepelnek. A 16 pixeles PNG benne van a ZIP-ben, de ezekben a sorokban nincs rá hivatkozás. A böngészők a /favicon.ico útvonalat maguktól is megkeresik, így a fájl akkor is megtalálható, ha az első sor hiányzik. Hagyd meg az útvonalakat úgy, ahogy vannak, kivéve, ha a fájljaid máshol vannak.

Miért kell kis méretnél egyszerű forma

16 × 16 pixelen egy ikon összesen 256 pixelből áll. Egy 48 pixeles ikonban 2304 pixel van, az 512 pixeles forrásban pedig 262 144. A logó részleteinek nagy része 16 pixelnél már elvész, ezért a vékony vonal vagy a kis szöveg elmosódik. Használj egyszerű jelet, vagy egy-két betűt erős kontraszttal.

A betű opció egy vagy két karaktert fogad el, és nagyban, középre rajzolja az ikonra. Ha túl széles, kisebbre zsugorítja. Formái a Négyzet, a Lekerekített és a Kör. Az előnézet a 16, 32, 48, 180 és 512 pixeles eredményt egymás mellett mutatja, a világos és sötét fülön is, így letöltés előtt megítélheted a kis méreteket. Az előnézet a forma, a margó vagy a háttér módosításakor azonnal frissül, így minden beállítást kipróbálhatsz.

Margó, háttér és az Apple-ikon

A margónak három beállítása van: Nincs margó, Kicsi és Nagy. A Kicsi 10 százalékot hagy üresen az ikon mindkét oldalán, a Nagy 20 százalékot. Képmódban a Nincs margó a kép középső négyzetére vágja a képet, így egy széles logó szélei elvesznek. A margós beállítások ehelyett a teljes képet a négyzetbe illesztik.

A háttér lehet Átlátszó, Fehér vagy Egyéni, az alapértelmezett az Átlátszó. Az Apple touch icon mindig átlátszatlan. Képmódban az átlátszó részek a kiválasztott háttérszínt kapják, ha pedig a háttér Átlátszó, akkor fehéret. Betűmódban a betű háttérszínét. Az Apple touch icon átlátszó részei iPhone-on és iPaden feketének látszódhatnak, ezért a generátor kitölti őket. A többi méret megtartja az általad választott átlátszóságot. Miért fekete egy átlátszó PNG háttere elmagyarázza az okát.

A favicon négyzet alakú, ezért egy széles logóhoz először négyzetes keret kell. A négyzetes fotókészítő az egész képet 1:1 keretbe illeszti, elmosott, fehér, fekete vagy egyéni szegéllyel, így semmi nem vágódik le. A kép átméretezése pontos pixelméretet állít be. Ha a Méretarány megtartása be van kapcsolva, és mindkét oldalt kitöltöd, a kép torzítás nélkül illeszkedik a dobozba. A fotók képarányai a gyakori formákat tárgyalják.

Változások, amelyek időbe telnek

A böngészők a faviconokat gyorsítótárban tárolják. Egy megváltoztatott fájl ugyanazon a címen még egy ideig a régi ikont mutathatja, ezért egy egyszerű újratöltés gyakran nem elég. Nyisd meg közvetlenül az ikon címét, hogy lásd, az új fájl feltöltődött-e a szerverre, majd töltsd újra az oldalt a gyorsítótár megkerülésével. Ha a régi ikon még mindig látszik, adj az új fájlnak másik nevet, és a hivatkozást írd át rá.

Hogyan csináld fixmint-tel

1. Válaszd az Kép lehetőséget, és húzd a logódat a dobozba, vagy válaszd a Betű lehetőséget, és írj be egy-két karaktert.
2. Állítsd a Margó beállítását Nincs, Kicsi vagy Nagy értékre, a Háttér beállítását pedig Átlátszó, Fehér vagy Egyéni színre.
3. Ellenőrizd a 16, 32 és 48 pixeles ikonokat a világos és sötét fülön, valamint a 180 és 512 pixeles előnézetet.
4. Nyomd meg a ZIP letöltése gombot mind a hét fájlhoz, vagy a favicon.ico letöltése gombot csak ahhoz az egy fájlhoz.
5. Nyomd meg a HTML másolása gombot, és a HTML a fejlécedhez részből illeszd be a sorokat minden oldal fejlécébe.

Speciális esetek

• A képed a eszközön marad. A generátor az ikonokat a böngészőben készíti el, semmi nem töltődik fel.
• Két karakteres betűk. Két karakter megadható, de kisebbre rajzolódnak, hogy mindkettő férjen el. Emiatt 16 pixelen nehezebb olvasni őket, mint egyetlen betűt.
• Fájlnevek. Tartsd meg a HTML által használt neveket, mert a hivatkozások ezekre mutatnak.
• Nem olvasható fájlok. Ha a képből nem lehet ikonokat készíteni, a generátor ezt az üzenetet jeleníti meg: „Ebből a bemenetből nem sikerült ikonokat készíteni. Próbálj másik képet.”, és törli a kimeneteket. Próbálj másik fájlt, vagy mentsd újra a képet egy elterjedt formátumban.