PNG to ICO átalakítás (favicon készítő)

Az ICO a Windows ikonformátuma, és a weboldalak hagyományos favicon-formátuma. Különlegessége, hogy egyetlen fájlban több méretet tárol: a rendszer vagy a böngésző mindig azt választja ki, amelyik épp kell. A böngészőfülön 16 pixeles, a könyvjelzőknél és a nagy felbontású kijelzőn 32 pixeles, a Windows Asztalon és a Fájlkezelőben akár 256 pixeles ikon jelenik meg.

A PNG to ICO átalakító a PNG-képedből elkészíti ezeket a méreteket, és egy ICO-fájlba csomagolja. Minden méret PNG-tömörítéssel és teljes átlátszósággal kerül a fájlba – ezt a Windows Vista óta minden rendszer és minden mai böngésző kezeli.

Tegyük fel, hogy a logód egy 512 × 512 pixeles, átlátszó hátterű PNG. Az alapbeállítással (16, 32, 48 és 256 pixel) az átalakító négy kicsinyített változatot készít, mindegyiket PNG-ként tömöríti, és egy fejléccel egy fájlba fűzi. A fejléc 6 bájt plusz méretenként 16 bájt, azaz 6 + 4 × 16 = 70 bájt; a fájl többi része a négy PNG. Egy egyszerű logónál a kész ICO jellemzően 10–40 KB, ebből a legnagyobb rész a 256 pixeles kép.

Ha csak böngészőre kell, elég a 16, 32 és 48 pixeles méret: a fájl így tized akkora is lehet. Ha Windows-alkalmazás vagy parancsikon ikonja lesz, tartsd meg a 256 pixelest is, különben a nagy ikonok elmosódottak lesznek.

A weboldalba így tedd be: másold a favicon.ico fájlt a webhely gyökérkönyvtárába (a böngészők alapból ott keresik), és a HTML fejlécében hivatkozz rá egy rel="icon" típusú link elemmel. A legtöbb tartalomkezelőben ehhez nem kell kódot írnod: a WordPressben például a Testreszabás menü webhelyikon-beállításánál töltheted fel a képet.

Az ikonok négyzetesek. Ha a PNG nem az, az átalakító a kép közepéből vág ki egy négyzetet, a rövidebb oldal hosszában. Egy 1200 × 600-as, fekvő logónál ez a középső 600 × 600 pixeles rész lesz: a bal és a jobb oldali 300–300 pixeles sáv, vagyis a kép fele lemarad. Ha a logód felirata széles, előbb tedd egy négyzetes vászonra (átlátszó háttérrel), vagy használd a logó jelét a felirat nélkül.

Négyzetre vágáshoz a képvágó 1:1-es aránnyal pontosan ki tudja jelölni a kívánt részt.

• Túl részletes logó. 16 × 16 pixelen egy felirat vagy egy vékony vonalas rajz olvashatatlan pacává válik. Faviconnak a logó jele vagy egy-két betűs monogram való, vastag vonalakkal, erős kontraszttal.
• Kicsi kiindulókép. Ha a PNG csak 64 × 64 pixeles, a 256 pixeles ikon felnagyítva elmosódott lesz. Legalább 256 × 256-os képből indulj; ha a logó SVG-ben van meg, előbb alakítsd 512 pixeles PNG-vé az SVG to PNG eszközzel.
• A régi favicon gyorsítótárban. A böngészők sokáig megjegyzik a faviconokat. Ha nem látod az újat, frissítsd az oldalt a gyorsítótár ürítésével (Ctrl+F5), vagy nyisd meg privát ablakban.
• Fehér háttér sötét módban. Ha a PNG-nek fehér háttere van, sötét böngészőtémánál fehér négyzetként fog látszani. Átlátszó hátterű PNG-ből készíts ikont.

A mai böngészők PNG- és SVG-favicont is elfogadnak, az ICO mégis a legbiztosabb: minden böngésző, a régiek is, és a Windows is kezeli, és a böngészők a gyökérkönyvtárban lévő favicon.ico-t hivatkozás nélkül is megtalálják. Gyakori megoldás, hogy az oldal egy ICO-t és egy nagyobb PNG-t (például 180 × 180-asat az Apple-eszközök kezdőképernyőjéhez) is megad. Az átalakítás a böngésződben fut, a kép nem kerül fel szerverre.

Az ICO nemcsak weboldalhoz jó. Windowson egy mappa ikonját így cserélheted: jobb klikk a mappán → Tulajdonságok → Testreszabás → Más ikon, majd tallózd be a kész ICO-fájlt. Parancsikonnál ugyanez a Tulajdonságok → Parancsikon → Más ikon útvonalon érhető el. Ehhez mindenképp tedd bele a 256 pixeles méretet, mert a Fájlkezelő nagy ikonos nézete ezt használja; nélküle a rendszer a 48 pixelest nagyítja fel, és az ikon elmosódik.