Luotettava HTML-favicon ei perustu yhteen taikatunnisteeseen, vaan pieneen joukkoon saatavilla olevia tiedostoja ja head-osan linkkejä. Näin katat nykyaikaiset välilehdet, vanhemmat ohjelmat ja mobiilipikakuvakkeet ilman lukuisia vanhoja muunnelmia.
Valmistele tiedostot
Aloita neliömäisestä symbolista, joka erottuu hyvin pienenä. Sijoita favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest ja manifestin PNG-kuvat julkiseen kansioon, joka palvellaan verkkotunnuksen juuresta.
Polku kuten /favicon.svg on absoluuttinen verkkotunnuksen suhteen. Se toimii siksi myös sivuilla /produits ja /blog/article, toisin kuin favicon.svg, joka voidaan tulkita suhteessa sivun sijaintiin.
Lisää tunnisteet head-osaan
Määritä ensin SVG arvoilla rel icon ja type image/svg+xml ja sitten ICO arvoilla rel icon ja sizes any. Lisää iOS:lle rel apple-touch-icon ja verkkosovelluksen asennusta varten rel manifest.
Tyypin on vastattava todella tarjottua tiedostoa. Älä nimeä PNG:tä .ico-tiedostoksi: sisällön ja otsakkeen on oltava ICO-muodossa.
| Käyttötarkoitus | Suhde | Tiedosto |
|---|---|---|
| Nykyaikainen selain | icon | /favicon.svg |
| Yhteensopivuus | icon | /favicon.ico |
| iOS:n aloitusnäyttö | apple-touch-icon | /apple-touch-icon.png |
| Verkkosovellus | manifest | /site.webmanifest |
Julkaise rikkomatta polkuja
Avaa jokaisen tiedoston URL suoraan julkaisun jälkeen. Vastauksen on oltava kuva tai manifesti onnistumista osoittavalla tilakoodilla, ei kirjautumis- tai 404-HTML-sivu harhaanjohtavalla tilakoodilla.
Jos sivusto sijaitsee alihakemistossa, mukauta polut tai julkinen peruspolku. Tarkista lopullinen sivu kehittäjätyökaluilla: selaimen on pyydettävä odotettuja URL-osoitteita ilman ohjausta toiselle palvelimelle.
Tarkista tulos
Lataa sivu uudelleen välimuisti poistettuna käytöstä ja tarkista syntyneen DOM:n link-elementit. Testaa sitten välilehti, kirjanmerkki ja tarvittaessa lisäys aloitusnäytölle oikealla laitteella.
Hakutuloksen favicon noudattaa myös hakukoneen sääntöjä ja omaa indeksointiaikatauluaan. Selaimessa näkyvä kuvake ei siis takaa välitöntä päivitystä hakutuloksissa.
Alkuperäislähteet
Usein kysytyt kysymykset
Tuleeko favicon-tunniste body-osaan?
Ei. Kuvakkeita ja manifestia kuvaavat link-elementit kuuluvat dokumentin head-osaan.
Riittääkö favicon.ico sivuston juuressa?
Se on hyödyllinen varavaihtoehto, mutta ei määritä Apple Touch -kuvaketta eikä manifestin asennuskuvakkeita. Määritä näihin käyttötarkoituksiin sopivat muodot.
Miksi käyttää /-merkillä alkavaa polkua?
Se alkaa verkkotunnuksen juuresta ja estää sisäkkäistä sivua etsimästä tiedostoa omasta kansiostaan.