Pouzdan HTML favicon ne ovisi o jednoj čarobnoj oznaci. Koristi mali skup dostupnih datoteka i poveznica u elementu head. Ovaj postupak pokriva suvremene kartice, starije klijente i mobilne prečace bez gomilanja povijesnih inačica.
Pripremite datoteke
Krenite od kvadratnog simbola koji ostaje čitljiv i vrlo malen. Smjestite favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest i PNG datoteke na koje manifest upućuje u javnu mapu dostupnu u korijenu domene.
Putanja poput /favicon.svg apsolutna je u odnosu na domenu. Zato ostaje ispravna na /products ili /blog/article, za razliku od favicon.svg koji se može razriješiti u odnosu na stranicu.
Dodajte elemente u head
Najprije deklarirajte SVG s rel icon i type image/svg+xml, a zatim ICO s rel icon i sizes any. Dodajte rel apple-touch-icon za iOS i rel manifest za instalaciju web aplikacije.
Vrsta mora odgovarati stvarno posluženoj datoteci. Nemojte preimenovati PNG u .ico: sadržaj i zaglavlje moraju koristiti ICO format.
| Namjena | Odnos | Datoteka |
|---|---|---|
| Suvremeni preglednik | icon | /favicon.svg |
| Kompatibilnost | icon | /favicon.ico |
| Početni zaslon iOS-a | apple-touch-icon | /apple-touch-icon.png |
| Web aplikacija | manifest | /site.webmanifest |
Objavite bez narušavanja putanja
Nakon objave izravno otvorite URL svake datoteke. Odgovor mora biti slika ili manifest s uspješnim statusom, a ne HTML stranica prijave ili pogreške 404 vraćena uz zavaravajući status.
Ako se stranica nalazi u podmapi, prilagodite putanje ili javnu osnovnu putanju. Pregledajte konačnu stranicu u razvojnim alatima: preglednik treba tražiti očekivane URL-ove bez preusmjeravanja na drugo računalo.
Provjerite rezultat
Ponovno učitajte stranicu uz isključenu predmemoriju i pregledajte elemente link u nastalom DOM-u. Zatim testirajte karticu, oznaku i, kada je relevantno, dodavanje stranice na početni zaslon stvarnog uređaja.
Favicon u rezultatima pretraživanja slijedi i pravila tražilice te raspored indeksiranja. Ikona vidljiva u pregledniku stoga ne jamči trenutačno ažuriranje rezultata pretraživanja.
Primarni izvori
Česta pitanja
Ide li element favicona u body?
Ne. Elementi link koji opisuju ikone i manifest pripadaju elementu head dokumenta.
Je li dovoljan favicon.ico u korijenu?
Koristan je kao zamjena, ali ne opisuje ikonu Apple Touch ni ikone manifesta za instalaciju. Deklarirajte formate za te namjene.
Zašto koristiti putanju koja počinje znakom /?
Počinje u korijenu domene i sprječava ugniježđenu stranicu da traži datoteku u vlastitoj mapi.