Mitkä favicon-tiedostot sivustolle tarvitaan ja mihin kokoon

Sivusto tarvitsee pienen joukon kuvaketiedostoja, ja useimmat päätökset koskevat kokoa. Laita sivuston juureen favicon.ico, jossa on 16, 32 ja 48 pikselin kuvat selaimen välilehtiä ja Windowsia varten. Lisää 180 pikselin Apple touch -kuvake iPhonen ja iPadin aloitusnäyttöä varten sekä 192 ja 512 pikselin PNG-kuvakkeet, jotka on lueteltu web-sovelluksen manifestissa. Favicon-generaattori tekee kaikki yhdestä logosta ja kirjoittaa HTML-rivit, jotka liität sivuillesi.

Tiedostot ja niiden koot

Generaattorin lataama ZIP-tiedosto sisältää kaikki seitsemän tiedostoa. Favicon.ico-tiedosto koostuu kolmesta PNG-kuvasta, joiden koot ovat 16, 32 ja 48 pikseliä, ja ne on tallennettu yhteen tiedostoon. Jokainen kuvake on sama logo piirrettynä pienemmäksi. Generaattori työskentelee 512 pikselin version kuvastasi ja tekee jokaisen koon siitä.

HTML-rivit

Generaattori kirjoittaa neljä riviä sivun head-osioon:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Ensimmäinen rivi osoittaa favicon.ico-tiedostoon ja ilmoittaa sen kooksi 48 × 48. Toinen antaa 32 pikselin PNG-kuvan. Kolmas nimeää Apple touch -kuvakkeen, ja neljäs osoittaa manifestiin, jossa 192 ja 512 pikselin kuvakkeet on lueteltu. 16 pikselin PNG on ZIP-tiedostossa, mutta ei näissä riveissä. Selaimet etsivät myös /favicon.ico-tiedostoa itsenäisesti, joten tiedosto löytyy silloinkin, jos ensimmäinen rivi puuttuu. Säilytä polut kirjoitetussa muodossa, ellei tiedostojasi ole tallennettu muualle.

Miksi pienet koot tarvitsevat yksinkertaisia muotoja

16 × 16 pikselin kuvakkeessa on yhteensä 256 pikseliä. 48 pikselin kuvakkeessa niitä on 2 304 ja 512 pikselin lähdekuvassa 262 144. Suurin osa logon yksityiskohdista katoaa jo 16 pikselin kohdalla, joten ohut viiva tai pieni sana muuttuu sumuksi. Käytä yksinkertaista merkkiä tai yhtä tai kahta kirjainta, joissa on vahva kontrasti.

Kirjainvaihtoehto hyväksyy yhden tai kaksi merkkiä ja piirtää ne suurina kuvakkeen keskelle. Jos ne ovat liian leveitä, ne pienenevät. Muotoja ovat Neliö, Pyöreäkulmainen ja Ympyrä. Esikatselu näyttää 16, 32, 48, 180 ja 512 pikselin tulokset rinnakkain sekä vaalean ja tumman välilehden, joten voit arvioida pienet koot ennen latausta. Esikatselu päivittyy, kun vaihdat muotoa, täytettä tai taustaa, joten voit kokeilla kutakin asetusta ensin.

Täyte, tausta ja Apple-kuvake

Täytteellä on kolme asetusta: Ei täytettä, Pieni ja Suuri. Pieni jättää 10 prosenttia kuvakkeen reunoista tyhjäksi kummaltakin puolelta, ja Suuri 20 prosenttia. Kuvatilassa Ei täytettä rajaa kuvan keskiruudun, joten leveän logon reunat menetetään. Täytetyt asetukset sovittavat koko kuvan neliön sisään.

Taustavaihtoehdot ovat Läpinäkyvä, Valkoinen ja Mukautettu, ja oletus on Läpinäkyvä. Apple touch -kuvake on aina läpinäkymätön. Kuvatilassa sen läpinäkyvät alueet saavat valitun taustan, tai valkoisen, jos tausta on Läpinäkyvä. Kirjaintilassa ne saavat kirjaimen taustavärin. Apple touch -kuvakkeen läpinäkyvät alueet voivat näkyä iPhonen ja iPadin näytöllä mustina, joten generaattori täyttää ne. Muut koot säilyttävät valitsemasi läpinäkyvyyden. Miksi läpinäkyvä PNG muuttuu mustaksi selittää syyn.

Favicon on neliö, joten leveä logo tarvitsee ensin neliön kehyksen. Neliökuvan tekijä sovittaa koko kuvan 1:1-kehykseen sumennetulla, valkoisella, mustalla tai mukautetulla reunalla, joten mitään ei leikata pois. Muuta kuvan kokoa asettaa tarkat pikselit. Kun Säilytä mittasuhteet on päällä ja molemmat sivut on täytetty, kuva sopii laatikkoon vääristymättä. Kuvasuhteet selitettynä käsittelee yleisimmät muodot.

Muutokset, jotka näkyvät hitaasti

Selaimet tallentavat favicon-kuvakkeet välimuistiin. Muutettu tiedosto samassa osoitteessa voi näyttää vanhaa kuvaketta jonkin aikaa, joten tavallinen päivitys ei usein riitä. Avaa kuvakkeen osoite suoraan varmistaaksesi, että uusi tiedosto on palvelimella, ja lataa sitten sivu ohittaen välimuisti. Jos vanha kuvake näkyy yhä, anna uudelle tiedostolle eri nimi ja päivitä linkki osoittamaan siihen.

Näin teet sen fixmintillä

1. Valitse Kuva ja pudota logosi laatikkoon tai valitse Kirjain ja kirjoita yksi tai kaksi merkkiä.
2. Aseta Täyte arvoon Ei täytettä, Pieni tai Suuri ja Tausta arvoon Läpinäkyvä, Valkoinen tai Mukautettu väri.
3. Tarkista 16, 32 ja 48 px kuvakkeet vaalealla ja tummalla välilehdellä sekä 180 ja 512 px esikatselut.
4. Paina Lataa ZIP saadaksesi kaikki seitsemän tiedostoa tai Lataa favicon.ico saadaksesi vain sen yhden tiedoston.
5. Paina Kopioi HTML ja liitä rivit kohdasta HTML head-osiolle jokaisen sivun head-osioon.

Erikoistapaukset

• Kuvasi pysyy laitteellasi. Generaattori tekee kuvakkeet selaimessasi, eikä mitään ladata palvelimelle.
• Kaksi merkkiä kirjaimina. Kaksi merkkiä hyväksytään, ja ne piirretään pienemmiksi, jotta molemmat mahtuvat. Siksi ne ovat vaikeampia lukea 16 pikselissä kuin yksi kirjain.
• Tiedostonimet. Säilytä HTML:n käyttämät nimet, koska linkit osoittavat niihin.
• Lukukelvottomat tiedostot. Jos kuvaa ei voi muuttaa kuvakkeiksi, generaattori näyttää viestin „Kuvakkeita ei voitu luoda tästä syötteestä. Kokeile toista kuvaa.” ja tyhjentää tulosteet. Kokeile toista tiedostoa tai tallenna kuva uudelleen yleisessä muodossa.