Vytvořte favicon.ico pro svůj web z jednoho obrázku

Favicon je malá ikona, která se zobrazuje v záložce prohlížeče, v seznamu záložek a na domovské obrazovce telefonu. Je to jeden z prvních prvků, které uživatel uvidí – ještě před načtením stránky.

Profesionální favicon buduje rozpoznatelnost značky a usnadňuje uživateli najít vaši stránku mezi mnoha otevřenými záložkami. Absence favicon může působit neprofesionálně a snížit důvěru návštěvníků.

Kaźdá velikost má své využití:

Pokud nevytváříte PWA, stačí vám: favicon.ico, 32×32 PNG a 180×180 PNG. Tyto tři soubory pokryjí většinu případů použití.

Google zobrazuje favicony vedle URL adresy webu ve výsledcích vyhledávání. Mobilní výsledky ukazují favicony od roku 2019. Desktopové výsledky následovaly v lednu 2020. Favicon je viditelným prvkem značky v každém vyhledávání na Googlu.

Google stanovuje konkrétní požadavky na zobrazení faviconů. Ikona musí mít rozměry alespoň 48×48 pixelů. Musí být čtvercová. Obrázek musí zůstat zřetelně viditelný na bílém pozadí. Google odmítá ikony s nevhodným nebo prázdným obsahem.

Googlebot prochází a indexuje favicony nezávisle na obsahu stránky. Aktualizace faviconu ve výsledcích může trvat několik dní až týdnů. Soubor favicon nesmí být zablokován v robots.txt - jinak Google nemůže získat novou verzi.

Seznam.cz - český vyhledávač s podílem na trhu kolem 25 % - rovněž zobrazuje favicony v seznamu výsledků. Profesionální favicon zvyšuje rozpoznatelnost značky v obou vyhledávačích současně. Bing a DuckDuckGo také ukazují favicony vedle každého odkazu ve výsledcích.

Vizuální konzistence mezi faviconem a logotypem posiluje zapamatovatelnost značky. Ikona se zobrazuje v kartách prohlížeče, v záložkách, v historii prohlížení a na domovské obrazovce telefonu. Když má uživatel deset nebo více karet otevřených, favicon zůstává jediným viditelným prvkem identifikujícím web.

V českém e-commerce se favicon zobrazuje u výsledků srovnávačů cen. Na Heureka.cz a Zboží.cz odlišuje obchod od konkurence a signalizuje profesionalitu. Shoptet - nejrozšířenější český e-shopový systém - umožňuje nastavení faviconu v administraci v sekci vzhled šablony. WooCommerce a PrestaShop nabízejí stejnou možnost.

Zákon o přístupnosti webových stránek veřejných institucí vyžaduje dostatečný kontrast pro vizuální prvky. Favicon musí být čitelný v světlém i tmavém režimu. Kontrastní barvy a jednoduché tvary tento požadavek spolehlivě splňují.

Firmy poskytující služby - od advokátních kanceláří po zubní ordinace - budují důvěru klientů již na úrovni ikony v kartě prohlížeče. Absence faviconu nebo výchozí ikona prohlížeče může naznačovat nízkou úroveň profesionality.

Progressive Web Apps vyžadují další ikony nad rámec standardního faviconu. Soubor manifest.json musí obsahovat pole ikon s rozměry 192×192 a 512×512 pixelů ve formátu PNG.

Maskable ikony jsou speciální typ ikony pro zařízení s Androidem. Operační systém ořezává maskable ikony do různých tvarů - kruhů, zaoblených čtverců nebo kapek. Bezpečná zóna pokrývá vnitřních 80 % plochy obrázku. Všechny podstatné grafické prvky musí být uvnitř této zóny, aby nedošlo k oříznutí.

Apple vyžaduje samostatný soubor apple-touch-icon o rozměrech 180×180 pixelů. Tento soubor musí být deklarován v sekci head dokumentu HTML - iOS ho nečte ze souboru manifest.

Česko má vysokou penetraci chytrých telefonů. České banky jako Česká spořitelna a ČSOB a e-shopy využívají technologii PWA pro rychlý přístup z domovské obrazovky telefonu bez instalace z obchodu s aplikacemi.

Audit Lighthouse v nástrojích pro vývojáře Chrome ověřuje přítomnost a platnost faviconu a ikon PWA. Chybějící nebo neplatný favicon generuje varování v kategorii PWA auditu.