Egy Favicon Set, amely mindenhol működik 2026-ban
Hat méret, egy .ico, egy manifest — mindaz, amire valóban szükséged van ahhoz, hogy egy favicont szállíts, amely megfelelően néz ki minden böngészőben, iOS kezdőképernyőn és Windows tálcán 2026-ban.
A favicon-ok triviálisnak tűnnek. Szállíts egyet, és száz peremeset jelenik meg: az iOS kezdőképernyő ikon homályos, az Android chrome lap rossz szín, a Windows rögzítések homályos 16×16. Ez az útmutató tisztázza a zűrzavart és pontosan azt ismerteti, amire szükséged van 2026-ban — nem többre, nem kevesebbre.
A minimális működőképes set
Hat eszköz minden felületet lefed, amely az oldal ikonját megjeleníti:
favicon.ico— több méretű tároló 16×16, 32×32, 48×48 benne (örökölt böngészők, Windows Explorer, rögzített lapok).favicon-16x16.png,favicon-32x32.png— modern böngésző lapok.apple-touch-icon.png(180×180) — iOS kezdőképernyő, Safari olvasási lista.android-chrome-192x192.png,android-chrome-512x512.png— Android kezdőképernyő, PWA telepítési promptok.site.webmanifest— a PWA konfiguráció, amely az Android ikonokra mutat és definiálja a témaszínt.
Ez az egész. Minden más (Safari rögzített lap SVG, régi Apple touch variánsok, Windows csempe képek) örökség. A modern böngészők pontosan visszaesnek a 192 vagy 512 PNG-re.
Miért szállít még mindig .ico 2026-ban
A .ico fájl egy bináris tároló, amely több PNG képet tartalmazhat különböző méretekben. Ha egy böngésző /favicon.ico fájlt kér (amit néhányan alapértelmezésben még mindig megtesznek), az összes három méretet egy kérésben kapja meg. A renderer kiválasztja az aktuális felületre legmegfelelőt — egy 48×48-at a Windows Explorerhez, egy 16×16-ot egy böngésző laphoz.
Az átnevezett PNG .ico csak egy méretet tartalmaz. Többnyire működik, mert a böngészők elnézőek, de a Windows Explorer és néhány e-mail kliens vagy homályosan jeleníti meg, vagy megtagadja a megjelenítést. Szállíts egy valós .ico-t, ha konzisztenciát akarsz.
Mit csinál a site.webmanifest
Amikor egy felhasználó hozzáadja az oldaladat az Android kezdőképernyőhöz, vagy PWA-ként telepíti, a böngésző a site.webmanifest fájlt olvassa, hogy tudja, hogyan kell kinéznie a telepített alkalmazásnak. Definiálja:
name/short_name— az ikon alatti címke.icons— mely PNG-eket kell használni mely méretben.theme_color— az állapotsor szín, amikor az alkalmazás nyitva van.background_color— splash képernyő háttér indítás alatt.display— általábanstandalone, hogy az alkalmazás böngésző chrome nélkül nyíljon meg.
Manifest nélkül az Android visszaesik az apple-touch-icon fájlra, és az oldaladat egy böngésző ablakban jeleníti meg. Eggyel azt jelenti, hogy natív alkalmazásnak tűnik.
A HTML kódrészlet
Minden fájl a web gyökérben van. Minden oldal szüksége van erre a blokkra a <head> tagban:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Tervezés 16×16 pixelhez
Az előnyed szép részletes logó meghal a 16 pixelnél. Az olyan favicon tervezésének szabályai, amely tisztán olvasható ezen a méretben:
- Egy forma. Egy kör, egy négyzet vagy egy erős monogram. Kerüld az összetett formákat.
- Magas kontraszt. Az előtér és háttér között legalább WCAG AA szeparáció szükséges. A finom gradiensek eltűnnek.
- Biztonságos margó. Hagyj 10–20%-os kitöltést. A böngészők gyakran hozzáadnak saját 1px-es szegélyt.
- Szöveg? Egy egyetlen félkövér betű jobban működik, mint egy teljes szó 16 pixelben.
Az aukimi Favicon Generator az összes hat fájlt és a HTML kódrészletet egy képből vagy egy betűből 30 másodperc alatt előállítja. Egy valós többméretű .ico fájlt (a Microsoft ICONDIR specifikáció szerint) állít elő, nem egy átnevezett PNG-t. Töltsd fel, válaszd ki a méreteket, töltsd le a zip nélküli csomagot, illeszd be a kódrészletet — kész.
Gyakori hibák
.icofájl szállítása CDN-ből cache fejlécek nélkül. A böngészők agresszívan gyorsítótáraznak favicont. Egy verziót jelölő URL-t (?v=2) használj, hogy kényszerítsd a frissítést egy redesign után.- Eltérő ikonok régiónként. Az apex-ben egy egyetlen
favicon.icoáltalában az, amit a felhasználók várnak — ne fragmentáld az identitásodat. - A
theme-colormeta elfelejtése. A mobil Chrome az e-mail chrome-ot erre az értékre színezi. Az alapértelmezett szürke marad.
A jó favicon unalmas a legjobb értelemben — a felhasználók észreveszik, amikor hiányzik vagy rossz, soha nem, ha jó. Szállítsd a hat fájlt és menj tovább.
Tetszett a cikk?
Kapcsolódó Cikkek
A kreatív stack összeomlott: Egy hét AI eszközök, április vége 2026
2026. április 27. és május 4. között az Adobe, Luma, Novi, fal, Figma, Canva, HeyGen és Anthropic nyolc nap alatt ugyanazt a küszöböt lépte át. Íme, mit adtak ki, mit jelent ez, és hova kerültek a böngészőalapú kreatív suitek, amelyek mindent összpontosítani próbálnak.
AI zene és hangeffektek 2026-ban: Mi működik valójában az indie játékaudio-ban
Három évvel ezelőtt az indie játékaudio két helyről származott: royalty-free könyvtárakból (olcsó, generikus, minden játék egyforma) vagy zeneszerzőtől (jó, drága). 2026-ban az AI generál olyan partitúrákat, amelyeket szállítani lehet. Íme, mely eszközök működnek — és hol nyer még egy emberi zeneszerző.
AI Mesh Generálás 2026-ban: Mi Szállítanak Valóban a Game Pipelineokba
Az Image-to-3D tizennyolc hónap alatt "kísértetiesről" "indie projektek szállítási szintjére" fejlődött. Íme, amit a Tripo, Meshy, Rodin és Hyper3D valóban csinál a produkciós munkafolyamatban — és hol veri meg őket az igazi 3D művész minden alkalommal.