Miért fontos a favicon?
A favicon a weboldalad „arca”: megjelenik a böngészőfülön, a könyvjelzők között, a mobilok kezdőképernyőjén és a Google keresési találatai mellett is. Egy hiányzó vagy pixeles favicon azonnal „hobbiprojekt” érzetét kelti — egy éles, tiszta ikon viszont profizmust sugároz, és bizonyítottan magasabb kattintási arányt eredményez a keresőben.
Mi az az ICO-fájl pontosan?
Az ICO nem egy hagyományos, egyszerű kép, hanem egy konténerformátum: egyetlen fájl több különböző méretű (16×16, 32×32, 48×48 stb.) változatot tartalmaz. A böngésző vagy az operációs rendszer ezek közül mindig a legmegfelelőbbet (legélesebbet) választja ki.
Pontosan ezért fontos, hogy a konvertáló szoftver több méretet is beépítsen a fájlba. A legtöbb ingyenes eszköz csak egyetlen méretet ment el, ami miatt az ikon bizonyos felbontásokon elmosódottnak vagy homályosnak tűnhet.
Lépésről lépésre: így készíts favicont
- Készítsd el a forrásképet négyzetes arányban: Ideálisan egy 256×256 vagy 512×512 pixel méretű, átlátszó hátterű PNG fájlt használj. A PNG a legjobb bemeneti formátum, mivel veszteségmentes.
- Nyisd meg a PNG ICO-ra konvertálót.
- Húzd be a képet: A konvertáló automatikusan átméretezi a fájlt a szabványos favicon méretekre.
- Töltsd le az elkészült
.icofájlt, és nevezd átfavicon.ico-ra. - Másold be a fájlt a weboldalad gyökérkönyvtárába, és hivatkozz rá a HTML-kód
<head>részében:<link rel="icon" href="/favicon.ico" sizes="any" /> - Ne feledkezz meg az Apple eszközökről sem! Adj hozzá egy 180×180 pixeles PNG fájlt is (apple-touch-icon), mivel az iOS nem az ICO formátumot használja:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Tervezési tippek a tökéletes faviconhoz
- Egyszerű forma: 16×16 pixeles méretben egy összetett logó csak egy felismerhetetlen folt. A jó favicon maximum 1–2 letisztult elemet vagy betűt tartalmaz.
- Kerüld a finom részleteket: Az 1 pixel vastag vonalak teljesen eltűnnek ekkora méretben. Használj vastag kontúrokat és erős kontrasztot.
- Átlátszó háttér: A kerek vagy finoman lekerekített alakzatok sokkal modernebb hatást keltenek; a teljes felületet kitöltő, négyzetes háttér már kissé elavult (2005-ös) dizájnra utal.
- Sötét és világos mód kompatibilitás: Egy jól megtervezett, átlátszó hátterű ikon világos és sötét (dark mode) témák esetén is tökéletesen mutat.
Milyen méretekre van szükség egy ICO-n belül?
- Böngésző ikon (favicon): 16×16 (és 32×32 a Retina/nagy felbontású kijelzőkön)
- Könyvjelzők: 32×32
- Windows ikonok: 32×32, 48×48
- Android/Chrome web app ikon: 192×192 (ide külön PNG fájl kell)
Éppen ezért érdemes az ICO-fájlba a 16, 32, 48 és 64 pixeles méreteket is beletenni — a mi eszközünk ezt mind megoldja egyetlen konvertálással.
GYIK
Lehet JPG-ből ICO-t készíteni?
Igen, lehetséges, de a JPG formátum nem támogatja az átlátszóságot (a háttered fehér vagy színes blokk marad). Érdemes a JPG-t előbb PNG-re konvertálni, eltávolítani a hátteret, és utána elkészíteni az ICO fájlt.
Megegyezik az .ico és az .icns formátum?
Nem. Az .ico a Windows és a web szabványos formátuma, míg az .icns a macOS rendszerek saját ikonformátuma. Ha egy .icns fájlból szeretnél ikont készíteni, érdemes előbb PNG-re alakítani, majd abból legenerálni az ICO-t.
Elég egyetlen méretet csomagolni az ICO-ba?
Technikailag igen, de nem ajánlott. Ha a böngészőnek kell átméreteznie az ikont, a végeredmény gyakran elmosódott és pixeles lesz. Több méret (pl. 16, 32, 48px) beágyazása sokkal biztonságosabb és profibb megoldás.
A kész ICO-dal ha vissza is kell jutnod raszteres formátumba — például szerkesztéshez —, arra a ICO PNG-re konvertáló szolgál.