Spolehlivá favicon v HTML nestojí na jedné kouzelné značce, ale na malé sadě dostupných souborů a odkazů v head. Tento postup pokrývá moderní karty, starší klienty i mobilní zástupce bez zbytečných historických variant.
Připravte soubory
Začněte čtvercovým symbolem, který je čitelný i velmi malý. Umístěte favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest a PNG odkazovaná manifestem do veřejné složky poskytované z kořene domény.
Cesta jako /favicon.svg je absolutní vůči doméně. Zůstává tedy správná na /produits i /blog/article, na rozdíl od favicon.svg, kterou může prohlížeč vyhodnotit relativně ke stránce.
Přidejte značky do head
Nejprve deklarujte SVG pomocí rel icon a typu image/svg+xml, poté ICO pomocí rel icon a sizes any. Pro iOS přidejte rel apple-touch-icon a pro instalaci webové aplikace rel manifest.
Typ musí odpovídat skutečně poskytovanému souboru. Nepřejmenovávejte PNG na .ico: obsah i hlavička souboru musí odpovídat formátu ICO.
| Použití | Vztah | Soubor |
|---|---|---|
| Moderní prohlížeč | icon | /favicon.svg |
| Kompatibilita | icon | /favicon.ico |
| Plocha iOS | apple-touch-icon | /apple-touch-icon.png |
| Webová aplikace | manifest | /site.webmanifest |
Nasaďte web bez narušení cest
Po nasazení otevřete přímo URL každého souboru. Odpovědí musí být obrázek nebo manifest se stavem úspěchu, nikoli HTML přihlašovací či chybová stránka 404 s klamavým stavovým kódem.
Pokud web běží v podadresáři, upravte cesty nebo veřejnou základní cestu. Ve vývojářských nástrojích ověřte výslednou stránku: prohlížeč musí požadovat očekávané URL bez přesměrování na jiného hostitele.
Ověřte výsledek
Znovu načtěte stránku s vypnutou mezipamětí a prohlédněte značky link ve výsledném DOM. Potom otestujte kartu, záložku a podle potřeby přidání na plochu skutečného zařízení.
Favicon ve výsledcích vyhledávání podléhá také pravidlům vyhledávače a jeho harmonogramu procházení. Ikona viditelná v prohlížeči proto nezaručuje okamžitou aktualizaci ve výsledcích.
Primární zdroje
Časté otázky
Patří značka favicon do body?
Ne. Prvky link popisující ikony a manifest patří do head dokumentu.
Stačí favicon.ico v kořenovém adresáři?
Poskytuje dobrou záložní variantu, ale nepopisuje ikonu Apple Touch ani instalační ikony manifestu. Pro tato použití deklarujte odpovídající formáty.
Proč použít cestu začínající /?
Začíná v kořeni domény a zabrání tomu, aby vnořená stránka hledala soubor ve vlastní složce.