Sada ikon pro web, která funguje všude v roce 2026
Šest velikostí, jeden .ico, jeden manifest — vše, co skutečně potřebuješ k nasazení favicony, která vypadá správně v každém prohlížeči, na domovské obrazovce iOS a na hlavním panelu Windows v roce 2026.
Favicony vypadají triviálně. Nasadíš jednu a objeví se stovka hraničních případů: ikona domovské obrazovky iOS je rozmazaná, karta Android Chrome má špatnou barvu, připnuté položky Windows ukazují rozmazaný obrázek 16×16. Tato příručka se prostírá skrz všechnu zmatek a pokrývá přesně to, co potřebuješ v roce 2026 — nic více, nic méně.
Minimální životaschopná sada
Šest assetů pokrývá každou plochu, která bude zobrazovat ikonu tvého webu:
favicon.ico— kontejner s více velikostmi obsahující vnitř 16×16, 32×32, 48×48 (starší prohlížeče, Windows Explorer, připnuté záložky).favicon-16x16.png,favicon-32x32.png— moderní záložky prohlížečů.apple-touch-icon.png(180×180) — domovská obrazovka iOS, Safari seznam čtení.android-chrome-192x192.png,android-chrome-512x512.png— domovská obrazovka Android, výzvy k instalaci PWA.site.webmanifest— konfigurace PWA, která odkazuje na Android ikony a definuje barvu tématu.
To je vše. Vše ostatní (Safari připnutá záložka SVG, staré varianty Apple touch, dlaždice Windows) jsou legacy. Moderní prohlížeče se elegantně vrátí k PNG 192 nebo 512.
Proč se .ico stále posílá v roce 2026
Soubor .ico je binární kontejner, který může obsahovat více PNG obrázků v různých velikostech. Když prohlížeč požádá o /favicon.ico (což některé stále dělají ve výchozím nastavení), obdrží všechny tři velikosti v jednom požadavku. Renderer si vybere tu, která se nejlépe hodí pro aktuální plochu — 48×48 pro Windows Explorer, 16×16 pro záložku prohlížeče.
PNG přejmenovaný na .ico obsahuje pouze jednu velikost. Většinou to funguje, protože jsou prohlížeče shovívavé, ale Windows Explorer a někteří e-mailoví klienti jej buď vykreslí rozmazaně, nebo se odmítnou zobrazen. Pokud chceš konzistenci, posílej skutečný .ico.
Co dělá site.webmanifest
Když uživatel přidá tvůj web na domovskou obrazovku Android nebo jej nainstaluje jako PWA, prohlížeč čte site.webmanifest, aby věděl, jak by měla nainstalovaná aplikace vypadat. Definuje:
name/short_name— popisek pod ikonou.icons— které PNG použít v jaké velikosti.theme_color— barva stavového řádku, když je aplikace otevřena.background_color— pozadí úvodní obrazovky během spuštění.display— obvyklestandalone, aby se aplikace otevřela bez prohlížečového rozhraní.
Bez manifestu Android vrátí apple-touch-icon a zobrazí tvůj web uvnitř okna prohlížeče. S manifestem vypadá jako nativní aplikace.
Úryvek HTML
Každý soubor jde do kořene webu. Každý web potřebuje tento blok v <head>:
<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">Návrh pro 16×16
Tvé krásné detailní logo neuspěje na 16 pixelech. Pravidla pro vytvoření favicony, která se čte jasně v této velikosti:
- Jeden tvar. Kruh, čtverec nebo silný monogram. Vyhýbej se složeným formám.
- Vysoký kontrast. Popředí a pozadí musí mít alespoň WCAG AA oddělení. Jemné přechody zmizí.
- Bezpečný okraj. Ponech 10–20% výplně. Prohlížeče často přidají svůj vlastní 1px okraj.
- Text? Jedno tučné písmeno funguje lépe než celé slovo v 16px.
Generátor aukimi Favicon vytvoří všech šest souborů a úryvek HTML z jednoho obrázku nebo písmena za méně než 30 sekund. Generuje skutečný .ico s více velikostmi (podle specifikace Microsoft ICONDIR), ne přejmenované PNG. Nahraj, vyber svoje velikosti, stáhni balíček bez zipu, vlož úryvek — hotovo.
Běžné chyby
- Posílání .ico z CDN bez cache hlaviček. Prohlížeče agresivně cachují favicony. Použij verzovanou URL (
?v=2) k vynucení aktualizace po redesignu. - Různé ikony na subdoménu. Jeden
favicon.icov apex je obvykle to, co uživatelé očekávají — nefragmentuj svou identitu. - Zapomenutí
theme-colormeta. Mobile Chrome obarvuje prohlížečové rozhraní tak, aby odpovídalo této hodnotě. Vynechání jej nechá výchozí šedou.
Dobrá favicona je nudná v nejlepším smyslu — uživatelé si všimnou, když chybí nebo je špatná, nikdy když je správná. Nasaď šest souborů a jdi dál.
Líbil se vám tento článek?
Související Články
Kreativní stack se právě zhroutil: Jeden týden AI nástrojů, konec dubna 2026
Mezi 27. dubnem a 4. květnem 2026 překročily Adobe, Luma, Novi, fal, Figma, Canva, HeyGen a Anthropic stejný práh během osmi dní. Zde je, co bylo vydáno, co to znamená a kam to zanechává browserové kreativní sady, které se je snaží konsolidovat.
AI hudba a zvuky v roce 2026: Co opravdu funguje v audiodesignu indie her
Před třemi lety znamenala indie herní hudba buď licencování royalty-free knihoven (levné, generické, každá hra zní stejně) nebo najímání skladatele (skvělé, drahé). V roce 2026 AI generuje hudbu, která se vydává. Zde jsou nástroje, které fungují — a kde stále vyhrává lidský skladatel.
AI generování sítí v roce 2026: Co se opravdu používá v herních pipeline
Image-to-3D se za osmnáct měsíců posunulo z "zvláštního demíčka" na "používání v indiánských projektech". Zde je to, co Tripo, Meshy, Rodin a Hyper3D opravdu dělají v produkci — a kde 3D umělec stále vítězí.