Favicon-oppaat
Käytännön vastauksia faviconin luomisessa herääviin kysymyksiin: oikeat koot, tiedostomuodot ja liitettävä koodi.
Favicon-koot: tiedostomuodot ja käyttötarkoitukset
Favicon-kokoja etsiessä vastaan tulee yhä viidentoista tiedoston luetteloita vuodelta 2014. Nykyään kuusi kokoa riittää välilehtiin, hakutuloksiin, iOS:ään, Androidiin ja PWA-sovelluksiin. Tässä tarvittavat koot ja niiden tarkoitukset.
Lue opasMuunna PNG ICO-muotoon ilmaiseksi
.ico on yhä sivuston juuresta odotettava tiedostomuoto, ja useimmat verkkopalvelut pyytävät lähettämään kuvan palvelimelleen. Näin teet PNG-kuvasta kelvollisen monikokoisen favicon.ico-tiedoston lähettämättä mitään verkkoon.
Lue opasApple Touch -kuvake: koko, muoto ja koodi
Apple Touch -kuvake määrittää kuvan, jota käytetään, kun kävijä lisää sivustosi iPhonen aloitusnäytölle. Se on erillinen välilehden faviconista ja verkkomanifestissa määritetyistä kuvakkeista.
Lue opasTummaa tilaa tukeva SVG-favicon
Musta logo läpinäkyvällä taustalla sopii vaaleaan välilehteen mutta katoaa tummalle. ICO ei osaa mukautua, mutta SVG-favicon osaa: sen sisältämä CSS-sääntö vaihtaa värit selaimen teeman mukaan.
Lue opasLisää favicon HTML-sivulle
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.
Lue opasFavicon puuttuu tai ei päivity
Kun favicon puuttuu, vika ei aina ole tiedostossa. Selain, CDN, service worker ja hakukone voivat säilyttää kukin eri version. Järjestelmällinen vianmääritys auttaa välttämään usean asian muuttamista yhtä aikaa.
Lue opasFaviconit Next.js App Routerissa
App Router voi tuottaa kuvaketunnisteet nimeämiskäytäntöjä noudattavista tiedostoista tai metadata-oliosta. Molemmat tavat toimivat, mutta niiden sekoittaminen ilman selkeää sääntöä luo helposti kilpailevia määrityksiä.
Lue opasSVG-faviconin opas
SVG pitää reunat tarkkoina kaikilla pikselitiheyksillä ja voi mukauttaa värit teemaan. Joustavuus tuo yhden vaatimuksen: tiedoston on pysyttävä itsenäisenä, yksinkertaisena ja luettavana hyvin pienessä tilassa.
Lue opas