Lyhyesti
- 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ä.
Tällä sivulla
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 manifestisuositusta ja muuten selainten nykyistä toimintaa.
favicon.icoKoko
Käyttäjä
/favicon.ico-tiedostoaicon.svgKoko
Käyttäjä
apple-touch-icon.pngKoko
Käyttäjä
icon-192.pngKoko
Käyttäjä
icon-512.pngKoko
Käyttäjä
Google-haku näyttää faviconit myös hakutulosten vieressä. Sen favicon-ohjeet 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
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">head-osaan. SVG:tä ymmärtävät selaimet suosivat sitä, muut käyttävät ICO:a.{
"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" }
]
}manifest.webmanifest. Mukautuvasti rajattava kuvake on valinnainen ja antaa Androidin rajata sen omiin muotoihinsa.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ä.
Yksi vahva kirjain selkeällä taustalla. Se erottuu yhä selaimen pienentäessä sen 16 pikseliin.
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ä.
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 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.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #1e1b4b; }
path { fill: #ffffff; }
@media (prefers-color-scheme: dark) {
rect { fill: #e0e7ff; }
path { fill: #1e1b4b; }
}
</style>
<rect width="32" height="32" rx="7"/>
<path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>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 kertoo, miksi vektoritiedosto kannattaa säilyttää.
Nopea faviconin tarkistuslista
- 1
Aloita logon yksinkertaisimmasta osasta
Monogrammi, alkukirjain tai pelkkä symboli. Logovariaatiot 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 ja someprofiilikuvien rinnalla brändin pieni jatkuva signaali. Pidä ne yhtenäisinä ja katso koko sarja oppaasta logokoot.
Usein kysyttyä
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ä.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme