# Faviconin suunnittelu: pieni kuvake, oma ilme [Canonical HTML page](https://gradiently.design/fi/guide/favicon-design) Favicon on brändisi pienin ja toistuvin osa. Sen pitää toimia 16 pikselissä vaalealla ja tummalla välilehdellä viidenkymmenen sivuston rinnalla. Näin se onnistuu. ## The short version - Favicon on pieni kuvake, joka edustaa sivustoa selaimen välilehdissä, kirjanmerkeissä, historiassa, aloitusnäytöillä ja hakutuloksissa. - Nykyinen vähimmäissarja on 32×32 favicon.ico, SVG-kuvake, 180×180 Apple touch -kuvake sekä 192×192- ja 512×512-PNG:t verkkosovelluksen manifestissa. - Google-haku näyttää sivuston faviconin tulosten vieressä ja pyytää neliökuvaketta, mieluiten suurempaa kuin 48×48 pikseliä. - Favicon toimii parhaiten yhtenä vahvana muotona tai kirjaimena hyvällä kontrastilla, sillä yksityiskohdat katoavat 16 pikselissä. - SVG-favicon voi vaihtaa väriä tummaa tilaa varten tiedoston sisäisellä mediakyselyllä. **Favicon** on pieni neliökuvake, joka edustaa sivustoasi selaimen välilehdissä, kirjanmerkeissä, historiassa, puhelimen aloitusnäytöllä ja Google-haussa. Se näkyy usein vain 16 tai 32 pikselin kokoisena, joten hyvä suunnittelu on armotonta: yksi vahva muoto tai kirjain, korkea kontrasti, ei hienoja yksityiskohtia. Teknisesti tarvitset vain muutaman tiedoston, 32×32-ICO:n, SVG:n, 180×180 Apple touch -kuvakkeen ja kaksi manifesti-PNG:tä, sekä muutaman rivin HTML:ää. ## Faviconin koot ja todella tarvittavat tiedostot Vanhat oppaat listaavat kaksikymmentä kokoa. Nykyselaimet skaalaavat hyvin, joten lyhyt sarja kattaa kaikki käyttöpaikat. Tämä noudattaa [web.devin](https://web.dev/articles/add-manifest) manifestisuositusta ja muuten selainten nykyistä toimintaa. | Tiedosto | Koko | Käyttäjä | | --- | --- | --- | | `favicon.ico` | 32×32 | Vanhat selaimet ja kaikki, jotka pyytävät suoraan `/favicon.ico`-tiedostoa | | `icon.svg` | Skaalautuva | SVG-faviconeja tukevat nykyselaimet, voi mukautua tummaan tilaan | | `apple-touch-icon.png` | 180×180 | iPhonen ja iPadin aloitusnäytöt sekä Safarin kirjanmerkit | | `icon-192.png` | 192×192 | Androidin aloitusnäyttö verkkosovelluksen manifestin kautta | | `icon-512.png` | 512×512 | Androidin käynnistysnäytöt ja sovellusasennukset manifestin kautta | Viisi tiedostoa. Sijoita ne sivuston juureen tai muualle, kunhan HTML osoittaa niihin. Google-haku näyttää faviconit myös hakutulosten vieressä. Sen [favicon-ohjeet](https://support.google.com/webmasters/answer/9290858) pyytävät neliökuvaketta, suosittelevat yli 48×48 pikselin kokoa ja edellyttävät brändiä edustavaa ilmettä. Sekä 192- että 512-PNG sopivat. Tarkista ohje ennen julkaisua, sillä Google päivittää sitä. ## Näin lisäät faviconin sivustolle ```html ``` Lisää jokaisen sivun `head`-osaan. SVG:tä ymmärtävät selaimet suosivat sitä, muut käyttävät ICO:a. ```json { "name": "Studio Nine", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" } ] } ``` Pieni `manifest.webmanifest`. Mukautuvasti rajattava kuvake on valinnainen ja antaa Androidin rajata sen omiin muotoihinsa. > **Rajattava kuvake tarvitsee väljyyttä** Android voi rajata kuvakkeen ympyräksi, superellipsiksi tai pyöristetyksi neliöksi. Pidä tärkein osa keskimmäisessä ympyrässä, noin 80 prosentissa leveydestä, ja täytä loput taustavärillä. ## Suunnittele 16 pikselissä erottuva favicon 16 pikselissä käytössä on 256 pistettä. Koko nimilogo muuttuu harmaaksi tahraksi, ohuet viivat katoavat ja kaksi läheistä väriä sulautuvat. Heti tunnistettavat faviconit ovat lähes aina yhtä kolmesta: yksi kirjain, yksinkertainen symboli tai tasainen muoto erottuvalla värillä. Neliömäinen sovelluskuvake, jossa vahva N-kirjain liukuväritaustalla Yksi vahva kirjain selkeällä taustalla. Se erottuu yhä selaimen pienentäessä sen 16 pikseliin. Neliökuvake, jossa kolmen sanan studion nimi on liian yksityiskohtainen faviconiksi Koko nimi näyttää hyvältä 512 pikselissä mutta muuttuu lukukelvottomaksi tekstuuriksi 16 pikselissä. Säästä se itse sivulle. ### Vältä - Koko logoa nimilogoineen - Hiusviivoja ja pieniä kirjainten sisätiloja - Kahta läheistä väriä, jotka sekoittuvat - Yksityiskohtia aivan reunoihin asti - Läpinäkyvää kuvaketta, joka katoaa tummilla välilehdillä ### Tee näin - Yksi kirjain, monogrammi tai symboli - Vähintään 2 pikselin viivat 32×32-koossa - Vahva kontrasti muodon ja taustan välille - Täytä valtaosa neliöstä, jätä hieman väljyyttä - Testaa selaimen vaalea ja tumma teema ## Väri ja liukuvärit pienessä kuvakkeessa Tässä koossa väri tekee muotoa enemmän, sillä sitä etsitään välilehtirivistä. Tunnistettava brändiväri voittaa ovelan symbolin. Liukuväri toimii, kun se on vahva ja yksinkertainen: kaksi selvästi eri vaaleusasteen väriä näyttää valaistulta pinnalta, hienovarainen monen väripisteen sekoitus vain samealta 16 pikselissä. - Indigosta pinkkiin: erottuu: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)` - Sinivihreästä limeen: erottuu: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)` - Vaaleat harmaat: katoaa: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)` Faviconin tausta tarvitsee selvän vaaleuseron ja varman sävyn. Viimeinen katoaa vaaleaan välilehtipalkkiin. Jos brändilläsi on jo tunnusomainen tausta, sen rajaus voi tehdä erottuvan faviconin. Gradientlyn Markit sopivat tähän: julkaisujesi tausta voi toistua yhden kirjaimen takana 512×512-koossa, jolloin välilehti ja syöte tuntuvat samalta brändiltä. Varmista kirjaimen vahva kontrasti, kuten [logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background) neuvoo. ## Tumman tilan favicon SVG:llä Musta kuvake katoaa tummaan välilehtipalkkiin ja valkoinen vaaleaan. Koska SVG-favicon on pieni asiakirja, se voi sisältää oman mediakyselynsä ja vaihtaa värit selaimen teeman mukaan. ```html ``` Tallenna nimellä `icon.svg`. Pyöristetty ruutu ja N-kirjain vaihtavat värinsä tummassa tilassa. Tasainen taustaruutu symbolin takana on helpoin varmistus: se erottuu kaikilla taustoilla ilman mediakyselyn varaan jäämistä. [SVG ja PNG](https://gradiently.design/fi/guide/svg-vs-png) kertoo, miksi vektoritiedosto kannattaa säilyttää. ## Nopea faviconin tarkistuslista 1. **Aloita logon yksinkertaisimmasta osasta** Monogrammi, alkukirjain tai pelkkä symboli. [Logovariaatiot](https://gradiently.design/fi/guide/logo-variations) kertoo tarkoituksella tehdystä pienversiosta. 2. **Piirrä ensin koossa 32×32** Suunnittele pienessä ruudukossa ja suurenna, älä päinvastoin. Paksut viivat ja reilut välit. 3. **Vie viisi tiedostoa** ICO koossa 32×32, SVG, 180×180 Apple touch -kuvake sekä 192- ja 512-manifesti-PNG:t. 4. **Testaa oikeilla välilehdillä** Avaa sivustosi kymmenen muun viereen vaaleassa ja tummassa teemassa. Jos et löydä välilehteäsi sekunnissa, yksinkertaista. Favicon on [Open Graph -kuvan](https://gradiently.design/fi/guide/open-graph-image-size) ja someprofiilikuvien rinnalla brändin pieni jatkuva signaali. Pidä ne yhtenäisinä ja katso koko sarja oppaasta [logokoot](https://gradiently.design/fi/guide/logo-sizes). ## FAQ ### Minkä kokoinen faviconin tulee olla? Tarjoa 32×32 favicon.ico, SVG, 180×180 Apple touch -kuvake sekä 192×192- ja 512×512-PNG:t manifestissa. Selaimet valitsevat ja skaalaavat niistä sopivan. ### Miten lisään faviconin sivustolleni? Lataa kuvaketiedostot ja lisää jokaisen sivun `head`-osaan `link rel="icon"`- ja `link rel="apple-touch-icon"`-tagit sekä manifestilinkki Androidille. ### Miksi faviconini ei näy Googlessa? Google tarvitsee neliöfaviconin, mieluiten yli 48×48 pikseliä, johon etusivu linkittää ja jonka se voi indeksoida. Muutoksen päivittyminen voi kestää. ### Voiko favicon olla SVG? Kyllä, SVG-faviconeja tukevat nykyselaimet käyttävät sitä, ja se pysyy terävänä kaikissa ko’oissa. Säilytä favicon.ico varavaihtoehtona. ### Kannattaako faviconina käyttää koko logoa? Yleensä ei. Käytä yhtä kirjainta, monogrammia tai logon symbolia, sillä koko nimilogo ei ole luettavissa 16 pikselissä.