Alakítsd a PNG-t ICO-vá éles favicon-hoz
A favicon az az apró kép, ami vizuális aláírást ad egy weboldalnak. Ott látod a böngészőfülben az oldalcím mellett, a könyvjelzőid listájában, a böngészési előzmények címsorának legördülő menüjében, és néha a keresési eredmények mellett is. Kicsi, de sok munkát végez: egy felismerhető favicon segít a felhasználóknak megtalálni a fülüket egy tucat másik közül, és jelzi, hogy egy oldal kész és gondosan felépített. A kis ikon klasszikus formátuma az ICO, és a legegyszerűbb módja egy létrehozásának, ha egy tiszta négyzet alakú PNG-ből indulsz, és azt konvertálod.
Ez az eszköz egy PNG képet ICO faviconná alakít, közvetlenül a böngésződben. A konverzió helyben, a saját eszközödön zajlik, tehát a kiválasztott kép soha nem kerül feltöltésre egy szerverre. Ez akkor számít, ha az ikonod egy logó vagy márkaelem, amit inkább nem adnál oda egy harmadik félnek. Amikor a fájl elkészült, egyszerűen letöltöd.
Mi az ICO formátum, és miért tárol több méretet
Az ICO egy ikon-konténerformátum, ami a Microsoft Windowsból ered, ahol a programok, parancsikonok és mappák ikonjait tárolja. A meghatározó tulajdonsága, és az ok, amiért a webes faviconok szabványává vált, hogy egyetlen ICO fájl egyszerre több felbontáson is tárolhatja ugyanazt a képet. Egyetlen fix bitkép helyett a fájl néhány négyzet alakú kép egy kis készletét csomagolja, és a böngésző vagy az operációs rendszer választja ki, melyik méret illik oda, ahol az ikont rajzolnia kell.
Ez valóban hasznos. Egy böngészőfülnek apró ikon kell, egy könyvjelzősáv esetleg valamivel nagyobbat használ, egy kitűzött asztali parancsikon pedig még nagyobbat kérhet. Egy több méretű ICO-val minden kontextus a hozzá illő verziót ragadja meg, így az ikonod éles marad ahelyett, hogy egy apró bitképből felnagyítva elmosódna. Az ICO az átlátszóságot is megőrzi, ami tisztán tartja egy kerek vagy szabálytalan alakú logó sarkait bármilyen fülszín mellett.
Ajánlott favicon-méretek
Egy weboldal faviconjához a három érdemes méret a 16x16, 32x32 és 48x48 pixel. A 16 pixeles verziót mutatja a legtöbb böngésző a fülön és a címsorban. A 32 pixeles verziót magasabb felbontású kijelzőkön és néhány könyvjelző- és előzménynézetben használják, tehát élesen tartja a dolgokat modern képernyőkön. A 48 pixeles verzió lefedi a nagyobb kontextusokat, mint a Windows-os oldal-parancsikonok. Mivel mindegyik egyetlen ICO fájlban él, egyetlen elemet szállítasz, és minden felület azt választja ki, amire szüksége van.
Kezdj egy négyzet alakú PNG-vel, hogy semmi ne nyúljon el. Ha a forrásképed téglalap alakú vagy túlméretezett, vágd le vagy skálázd egy tiszta négyzetté a képméretezőnkkel, majd futtasd a konverziót. Egy egyszerű, nagy kontrasztú dizájn sokkal jobban olvasható 16 pixelnél, mint egy részletes illusztráció, tehát részesítsd előnyben a merész formákat a finom szöveggel szemben.
Hogyan add hozzá a favicont az oldaladhoz
Amint megvan az ICO fájlod, töltsd fel a weboldaladra, hagyományosan az oldal gyökerébe favicon.ico néven. Sok böngésző automatikusan megtalálja ott, de a legjobb gyakorlat, ha kifejezetten deklarálod a HTML fejlécében, hogy ne kelljen találgatni. Adj hozzá egy ilyen link-taget:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Helyezd el ezt a sort az oldalaid <head> szekciójában. A rel="icon" attribútum megmondja a böngészőnek, hogy ez az erőforrás az oldal ikonja, a href pedig arra mutat, ahol a fájlt tárolod. Ha egy gyökérrelatív útvonalat használsz, mint a fenti, ugyanez a deklaráció működik az oldalad minden lapján. A telepítés után előfordulhat, hogy kemény frissítést kell végezned vagy törölnöd kell a gyorsítótárat, mielőtt az új ikon megjelenne, mivel a böngészők makacsul ragaszkodnak a faviconokhoz.
Privát konverzió a böngésződben
Minden az eszközödön történik. A kiválasztott PNG-t helyben olvassuk be, dekódoljuk, és ICO-vá kódoljuk újra, és a folyamat során semmi nem hagyja el a gépedet. Nincs fiók, nincs várólista, és nincs szerveroldali tárolás, ami ezt kényelmessé teszi akár meg nem jelent logókhoz vagy megállapodás alatt álló ügyfélmunkához is. További módokért a grafikák előkészítésére és rendbetételére böngészd a teljes képes eszköztárunkat.
Gyakran ismételt kérdések
Feltöltésre kerül valahova a képem?
Nem. A PNG teljes egészében a böngésződben, a saját eszközödön alakul ICO-vá. Semmi nem kerül szerverre, és semmi nem tárolódik, tehát a képed privát marad.
Milyen méreteket tartalmazzon a faviconom?
A leghasznosabb méretek a 16x16, 32x32 és 48x48 pixel. A 16 pixeles kép jelenik meg a böngészőfülekben, míg a nagyobbak élesen tartják az ikont magas felbontású kijelzőkön és asztali parancsikonokon.
Miért használjak ICO-t sima PNG helyett?
Az ICO a régóta bevált favicon-formátum, és egyetlen fájlban több méretet is tud tárolni. A böngészők és az operációs rendszer kiválasztják az adott kontextushoz illő felbontást, így az ikon éles marad ahelyett, hogy egyetlen bitképből lenne felskálázva.
Megőrzi az ICO az átlátszóságot a PNG-mből?
Igen. Az ICO formátum támogatja az átlátszóságot, tehát a PNG-d átlátszó területei megmaradnak, és az ikon tisztán illeszkedik bármilyen fül- vagy háttérszínhez.
Hogyan adom hozzá a favicont a weboldalamhoz?
Töltsd fel az ICO fájlt az oldaladra, általában favicon.ico néven a gyökérbe, és adj hozzá egy link-taget a HTML fejlécében, ilyesmit: link rel icon type image x-icon href per favicon.ico. Aztán töröld a böngésző gyorsítótárát, hogy lásd.
A forrásképem nem négyzet alakú. Mit tegyek?
Vágd le vagy skálázd négyzetté előbb, hogy ne nyúljon el. Használhatod a képméretezőnket egy tiszta négyzet létrehozásához, majd alakítsd azt ICO-vá a legjobban kinéző favicon érdekében.