Käyttöohje
- Valitse Kirjaimet ja kirjoita yksi tai kaksi merkkiä omilla väreilläsi tai valitse Kuva ja valitse logo (mieluiten neliönmuotoinen, vähintään 512 px).
- Tarkista kaikkien kokojen esikatselut, erityisesti 16 ja 32 px, jotka näkyvät selaimen välilehdissä.
- Lataa ZIP-tiedosto ja lähetä sen tiedostot verkkosivustosi juurikansioon.
- Liitä HTML-tagit sivujesi head-osioon ja muokkaa tarvittaessa nimi site.webmanifest-tiedostossa.
Näin se toimii
Selaimet ja laitteet etsivät kuvakkeita eri paikoista. Tässä tuotettu sarja kattaa yleisimmät tapaukset: favicon.ico, jossa on 16, 32 ja 48 px:n kuvat selaimen välilehtiä, kirjanmerkkejä ja vanhempia ohjelmia varten, jotka pyytävät /favicon.ico:ta automaattisesti; link-tageissa viitatut 16 ja 32 px:n PNG-tiedostot; 180 × 180 apple-touch-icon, jota käytetään, kun joku lisää sivustosi iPhonen tai iPadin aloitusnäyttöön; sekä 192 ja 512 px:n kuvakkeet, joihin viitataan site.webmanifestissa Androidin aloitusnäyttöä ja asennettavia verkkosovelluksia varten.
favicon.ico-tiedosto tallentaa kuvakkeet PNG-kuvina ICO-säilössä, jota kaikki nykyiset selaimet ja Windows Vista tai uudempi voivat lukea. ICO- ja ZIP-tiedostot kootaan tämän sivun koodilla; mitään ei lähetetä palvelimelle.
Pienet koot vaativat yksinkertaisen suunnittelun: 16 × 16 pikselissä ohuet viivat ja pieni teksti katoavat, joten lihavoitu kirjain tai yksinkertaistettu logomerkki toimii paremmin kuin koko logo sanoineen. Kuva pienennetään useassa korkealaatuisessa vaiheessa. apple-touch-iconille annetaan aina yhtenäinen taustaväri, koska iOS täyttää läpinäkyvät alueet mustalla ja pyöristää kulmat itse.
Uusien kuvakkeiden lataamisen jälkeen selaimet saattavat näyttää vanhaa faviconia vielä jonkin aikaa, koska ne tallentavat sen aggressiivisesti välimuistiin. Pakotettu päivitys tai /favicon.ico-tiedoston avaaminen suoraan yleensä auttaa.
Esimerkit
Kirjainkuvake uudelle projektille
Kirjoittamalla "TG" valkoisin kirjaimin tummanvihreälle pyöristetylle neliölle saat selkeän kuvakkeen, joka pysyy luettavana 16 × 16 px:n koossa selaimen välilehdessä ilman erikseen suunniteltua logoa.
Kuvake olemassa olevasta logosta
1024 × 1024 PNG -logo, jossa on läpinäkyvä tausta ja asetuksena Koko kuvan sovittaminen, tuottaa läpinäkyvät välilehtikuvakkeet ja apple-touch-iconin brändivärilläsi.
Leveä logo
1200 × 300 -kokoisessa logotekstissä keskikohdan rajaus säilyttää vain keskimmäiset kirjaimet. Koko kuvan sovittaminen säilyttää kaiken mutta tekee siitä pienen; erillinen neliönmuotoinen logomerkki näyttää yleensä paremmalta.
Usein kysytyt kysymykset
Tarvitaanko favicon.ico-tiedostoa edelleen?
Se on edelleen hyödyllinen. Jotkin selaimet, syötteenlukijat ja työkalut pyytävät /favicon.ico-tiedostoa sivuston juuresta myös ilman linkkitagia. Nykyaikaiset selaimet käyttävät myös HTML:ssä viitattuja PNG-kuvakkeita.
Mihin tiedostot laitetaan?
Lähetä ne verkkosivustosi juurikansioon etusivun viereen, jotta /favicon.ico ja muut HTML:ssä olevat polut toimivat. Jos käytät alikansiota, muuta polut linkkitageissa ja site.webmanifest-tiedostossa.
Miksi vanha favicon näkyy edelleen?
Selaimet tallentavat faviconit välimuistiin erikseen ja pitkäksi aikaa. Kokeile pakotettua päivitystä, avaa /favicon.ico uudessa välilehdessä tai tarkista yksityisessä ikkunassa. Tiedostojen uudelleennimeäminen, esimerkiksi favicon-v2.ico, pakottaa myös lataamaan ne uudelleen.
Luoko tämä SVG-faviconin?
Ei. Se luo PNG- ja ICO-tiedostot, jotka toimivat kaikkialla. Jos sinulla on jo SVG-logo, voit lisätä sen itse linkkitagilla, jonka tyyppi on image/svg+xml, näiden tiedostojen lisäksi.
Tietosuoja
Kuvakkeet, ICO-tiedosto ja ZIP-tiedosto luodaan selaimessasi. Kuvaasi ja tekstiäsi ei lähetetä palvelimelle, tallenneta eikä sisällytetä analytiikkaan.