Spoľahlivý favicon v HTML nestojí na zázračnej značke, ale na malej sade dostupných súborov a odkazov v head. Tento postup pokrýva moderné karty, staršie klienty a mobilné odkazy bez množstva historických variantov.
Pripravte súbory
Začnite štvorcovým symbolom čitateľným aj vo veľmi malej veľkosti. Umiestnite favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest a PNG uvedené v manifeste do verejného priečinka poskytovaného v koreňovom adresári domény.
Cesta ako /favicon.svg je absolútna vzhľadom na doménu. Zostáva správna aj na /produits alebo /blog/article, na rozdiel od favicon.svg, ktorá sa môže vyhodnotiť relatívne k stránke.
Pridajte značky do head
Najprv deklarujte SVG s rel icon a typom image/svg+xml, potom ICO s rel icon a sizes any. Pridajte rel apple-touch-icon pre iOS a rel manifest pre inštaláciu webovej aplikácie.
Typ musí zodpovedať skutočne poskytovanému súboru. Nepremenúvajte PNG na .ico: obsah aj hlavička súboru musia zodpovedať formátu ICO.
| Použitie | Vzťah | Súbor |
|---|---|---|
| Moderný prehliadač | icon | /favicon.svg |
| Kompatibilita | icon | /favicon.ico |
| Obrazovka iOS | apple-touch-icon | /apple-touch-icon.png |
| Webová aplikácia | manifest | /site.webmanifest |
Nasaďte web bez poškodenia ciest
Po nasadení otvorte priamo každú URL súboru. Odpoveď musí obsahovať obrázok alebo manifest s úspešným stavom, nie prihlasovaciu HTML stránku alebo stránku 404 s klamlivým stavovým kódom.
Ak web beží v podpriečinku, upravte cesty alebo verejnú základnú cestu. Vo vývojárskych nástrojoch overte výslednú stránku: prehliadač musí žiadať očakávané URL bez presmerovania na iný server.
Overte výsledok
Obnovte stránku s vypnutou vyrovnávacou pamäťou a skontrolujte značky link vo výslednom DOM. Potom otestujte kartu, záložku a podľa potreby pridanie na domovskú obrazovku skutočného zariadenia.
Favicon vo výsledkoch vyhľadávania podlieha aj pravidlám vyhľadávača a jeho harmonogramu prehľadávania. Viditeľná ikona v prehliadači preto nezaručuje okamžitú aktualizáciu výsledkov.
Primárne zdroje
Časté otázky
Patrí značka faviconu do body?
Nie. Prvky link opisujúce ikony a manifest patria do head dokumentu.
Stačí favicon.ico v koreňovom adresári?
Poskytuje dobrú zálohu, ale neopisuje ikonu Apple Touch ani inštalovateľné ikony manifestu. Deklarujte formáty určené pre tieto použitia.
Prečo používať cestu začínajúcu na /?
Vychádza z koreňového adresára domény a zabraňuje vnorenej stránke hľadať súbor vo vlastnom priečinku.