Teemaväri ja sovelluskuvakkeet

Manifestin theme_color määrittää värin, kun sovellusta käytetään asennettuna PWA:na (erillisen ikkunan otsikkopalkissa). Yhdenmukaisuuden vuoksi sovittakaa se sivun sisäiseen theme-color-metatunnisteeseen — selaimessa ja asennettuna käytettäessä visuaalinen ilme säilyy samana.

<link rel="icon" href="/favicon.ico"> on ajaton selaimen välilehden kuvake. Nimestään huolimatta nykyaikaiset selaimet suosivat ICO:n sijaan PNG- tai SVG-kuvakkeita. Tarjotkaa 32x32-kokoinen PNG käyttämällä <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">-määritystä, jotta kuva näkyy terävämmin.

Nykyaikaiset selaimet hyväksyvät SVG-faviconit: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Ne ovat teräviä kaikissa ko'oissa ja tiedostokooltaan pieniä. Käyttäkää niitä vektorilogoihin ja tarjotkaa lisäksi PNG-varakuva selaimille, jotka eivät tue SVG-faviconeita.

iOS:n aloitusnäytössä käytetään apple-touch-icon-kuvaketta: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Tarjotkaa 180x180-kokoinen PNG. iOS ei lue web-manifestin kuvakkeita aloitusnäytölle asennettaessa, joten apple-touch-icon-linkitys vaaditaan.

Android-asennukset lukevat kuvakkeet manifestin icons-taulukosta. Sisällyttäkää 192x192-kokoinen PNG aloitusnäyttöä varten ja 512x512-kokoinen PNG aloitusnäyttöä, splash-näyttöä ja sovellusvalikkoa varten. Lisätkää myös "maskable" purpose -kopio, jotta Android voi sovittaa kuvakkeen aloitusnäytön kuvakkeen muotoon (ympyrä, squircle tai neliö).

Maskable-kuvakkeiden tärkeän sisällön tulisi mahtua keskelle 80 %:n turva-alueelle — ulompi 20 % voidaan rajata pois laitteen käyttämän maskin muodosta riippuen. Käyttäkää suunnittelun aikana esimerkiksi maskable.app-palvelua esikatsellaksenne kuvaketta eri maskimuodoissa.

Windows 8/10:een kiinnitettyä ruutua varten: <meta name="msapplication-TileImage" content="/tile.png"> ja <meta name="msapplication-TileColor" content="#1f2937">. Näiden merkitys on nykyään muita alustoja vähäisempi, mutta Windows-käyttäjät, jotka kiinnittävät sivustoja, arvostavat niitä edelleen.

Vanha IE/Edge: <meta name="msapplication-config" content="/browserconfig.xml"> osoittaa XML-tiedostoon, joka sisältää erikokoisia ruutukuvakkeita. Tiedosto on nykyään suurelta osin tarpeeton, joten uudet sivustot voivat jättää browserconfig.xml-tiedoston pois ilman seurauksia.

macOS:n Safariin kiinnitettyä välilehteä varten: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. SVG:n tulisi olla yksivärinen kuvake, sillä color-attribuutti määrittää värin uudelleen. Ominaisuutta käytetään vain macOS Safarin kiinnitetyn välilehden toiminnossa.

Käyttäkää realfavicongenerator.net-palvelua kaikkien kuvakeversioiden luomiseen yhdestä lähteestä. Testatkaa oikealla iOS-laitteella (lisätkää sivusto aloitusnäyttöön) ja Androidilla (asentakaa sovellus selaimen valikosta), jotta voitte varmistaa kuvakkeiden rajautuvan oikein eivätkä ne näy pikselöityneinä.

theme-color (media query -versioineen) sävyttää osoiteriviä, kun taas manifestin theme_color sävyttää asennetun sovelluksen otsikkopalkkia. Kuvakkeisiin kuuluvat faviconit (SVG + PNG), apple-touch-icon (iOS, 180x180), manifestin kuvakkeet (Android, 192 + 512 + maskable), Safarin mask-icon (yksivärinen SVG) ja msapplication-TileImage (Windowsin kiinnitetyt ruudut). Käyttäkää realfavicongenerator.net-palvelua kaikkien versioiden luomiseen yhdestä lähteestä.