A webhely gyökérkönyvtárában továbbra is az .ico az elvárt formátum, de a legtöbb online átalakító szerverre töltteti fel a képet. Így készíthetsz PNG-ből helyes, többméretű favicon.ico fájlt feltöltés nélkül.
Az .ico nem egyszerűen átnevezett kép
Nem elég a logo.png fájlt favicon.ico névre átnevezni. Az ICO saját fejléccel rendelkező tárolóformátum: leírja a benne lévő képek számát, méretét és a fájlon belüli kezdőhelyét. Az átnevezett PNG-ben nincs ilyen fejléc, ezért a szigorúbb böngészők nem jelenítik meg.
A helyes ICO ugyanazon ikon több felbontását tartalmazza. A böngésző beolvassa a fejlécet, kiválasztja a szükséges mérethez legközelebbi változatot, és nem nagyít fel semmit.
PNG átalakítása ICO-vá három lépésben
Első lépés a forrás előkészítése. A legalább 512×512 képpontos, négyzetes PNG adja a legjobb eredményt, mert minden méret kicsinyítéssel készül. Átlátszó háttérnél már most döntsd el, megtartod-e: böngészőfülhöz ideális, de az iOS és az Android feketével helyettesíti.
Második lépés a felbontások előállítása. A fájl legalább 16×16, 32×32 és 48×48 méretet tartalmazzon. Az átméretezéshez jó minőségű újramintavételező szűrő kell, különben a kis változatok olvashatatlanná válnak.
Harmadik lépés a csomagolás. A három kép egyetlen ICO-tárolóba kerül, minden bejegyzést leíró fejléccel. Az eredményt favicon.ico néven a webhely gyökerébe kell tenni, ahol a böngészők HTML-címke nélkül is megtalálják.
Miért számít a helyi átalakítás?
A legtöbb PNG–ICO átalakító szerverre tölti fel a fájlt, ott feldolgozza, majd visszaküldi. A logód – gyakran még a nyilvános bemutatása előtt – olyan gépre kerül, amelyet nem te kezelsz, és olyan adatmegőrzési szabályok alá, amelyeket nem olvastál el.
Pedig egy modern böngésző önállóan is képes mindenre: PNG-dekódolásra, vásznon történő átméretezésre, a méretek újrakódolására és az ICO összeállítására. Az LFFavicon így működik. Egyetlen hálózati kérés sem viszi el a képedet, és a fül bezárása mindent töröl.
Az előny gyakorlati is: az átalakítás azonnali, az oldal betöltése után internet nélkül is működik, és nincs várakozási sor vagy napi korlát.
Az .ico önmagában már nem elég
A PNG ICO-vá alakítása lefedi a füleket és a régi klienseket, de három környezet kimarad: a minden méretben éles SVG-t kedvelő modern böngészők, a nem átlátszó 180×180-as PNG-t igénylő iOS-kezdőképernyő és a webes jegyzéket olvasó Android.
Ha már feldolgozod a képet, készítsd el egy menetben a teljes készletet. A generátor ezt teszi: egy forrásból készül az .ico, az SVG, az Apple Touch ikon és a jegyzékikonok, letöltés előtt minden környezet előnézetével.
Elsődleges források
Gyakori kérdések
Mekkora PNG kell az ICO elkészítéséhez?
Legalább 512×512 képpontos négyzet. 128×128 alatt a csomag nagyobb méreteit fel kell nagyítani, ami elmosódott eredményt ad. Az SVG még jobb, mert nincs felbontáskorlátja.
Megmarad az átlátszóság az .ico fájlban?
Igen, az ICO teljes alfa-csatornát támogat, így az átlátszó PNG a böngészőfülön is átlátszó marad. Az iOS-ikonra azonban figyelj: a rendszer feketével tölti ki az átlátszó részeket, ezért adj neki hátteret.
Hová kerüljön a favicon.ico fájl?
A domain gyökérkönyvtárába, a https://yoursite.com/favicon.ico címen elérhetően. A böngészők és keresőrobotok megállapodás szerint pontosan ezt kérik, akkor is, ha nincs rá link címke.