Verkkosivuston kuvakkeiden merkitys ja rooli
Verkkosivuston kuvakkeet, kuten perinteinen favicon ja uudemmat laitekohtaiset kuvakkeet, ovat keskeinen osa sivuston tunnistettavuutta ja brändiä. Ne näkyvät selaimen välilehdillä, kirjanmerkeissä, hakukonetuloksissa sekä älypuhelimien ja tablettien kotinäytöillä, kun sivusto tallennetaan pikakuvakkeena. Laadukas ja oikein toteutettu kuvakepaketti varmistaa, että sivusto näyttää ammattimaiselta kaikissa käyttöympäristöissä ja laitteissa.
Nykyaikaisessa verkkokehityksessä pelkkä yksi kuvaketiedosto ei enää riitä. Eri käyttöjärjestelmät, selaimet ja laitteet vaativat erikokoisia ja -muotoisia kuvakkeita toimiakseen optimaalisesti. Favicon-generaattori ratkaisee tämän ongelman muuntamalla yhden lähdekuvan kaikiksi tarvittaviksi kuvakekoiksi ja luomalla niiden käyttöönottoon tarvittavan HTML-koodin.
Kuvaketyypit ja niiden käyttötarkoitukset
Generaattori luo automaattisesti kattavan paketin kuvakkeita, jotka on suunniteltu eri alustoille ja laitteille:
- Selaimen välilehtien kuvakkeet: Perinteinen
favicon.icosisältää 16, 32 ja 48 pikselin versiot samassa tiedostossa. Lisäksi pakettiin luodaan erilliset PNG-kuvakkeet koossa 16 ja 32 pikseliä. - Apple touch -kuvakkeet: iPhonen ja iPadin kotinäytöille luodaan 180 pikselin kokoinen PNG-kuvake.
- PWA- ja Android-kuvakkeet: Progressiivisia verkkosovelluksia (PWA) ja Android-laitteita varten luodaan suuret 192 ja 512 pikselin PNG-kuvakkeet.
- Vektorikuvake: Jos lähdetiedostona käytetään SVG-muotoa, itse vektoritiedosto sisällytetään pakettiin, mikä takaa täydellisen terävyyden kaikissa koissa.
Lähdekuvan valinta ja parhaat käytännöt
Kuvakkeiden laatu riippuu suoraan käytettävästä lähdekuvasta. Generaattori tukee PNG-, JPG- ja SVG-muotoisia kuvia, joiden tiedostokoko on enintään 50 MB.
| Kuvaformaatti | Suositeltu koko | Ominaisuudet ja edut |
|---|---|---|
| SVG | Mikä tahansa koko | Ihanteellinen valinta. Jokainen kuvake piirretään suoraan vektorista, jolloin pienetkin kuvakkeet pysyvät täysin terävinä. |
| PNG / JPG | Vähintään 512 × 512 px | Rasterikuvilla suositellaan suurta resoluutiota. Pienemmät kuvat skaalataan ylöspäin, mikä voi tehdä suurista kuvakkeista epätarkkoja. |
Jos ladattu kuva on liian pieni, työkalu näyttää varoituksen: "Pieni lähdekuva ({w} × {h} px): suuret kuvakkeet saattavat näyttää epätarkoilta. Parhaan tuloksen saat vähintään 512 × 512 kokoisella kuvalla tai SVG-tiedostolla.". Jos tiedosto ylittää kokorajoituksen, järjestelmä ilmoittaa: "Tiedosto on yli 50 Mt. Käytä pienempää lähdekuvaa.".
Ei-neliömäisten kuvien käsittely ja taustavaihtoehdot
Kuvakkeet ovat aina neliönmuotoisia. Jos lähdekuvasi ei ole neliö, työkalu tarjoaa kaksi tapaa sovittaa kuva neliön muotoon ilman, että sitä venytetään:
- Sovita (lisää reunukset): Koko kuva pysyy näkyvissä. Se keskitetään neliön sisälle, ja sen ympärille lisätään tyhjää tilaa. Tämä on työkalun oletusasetus.
- Täytä (rajaa): Kuva täyttää neliön kokonaan, ja sen yli menevät reunat rajataan pois.
Taustan osalta valittavissa on kaksi vaihtoehtoa:
- Läpinäkyvä: Oletusarvoinen taustavaihtoehto, joka sopii erinomaisesti selaimen välilehdille.
- Väri: Käyttäjän valitsema taustaväri. Läpinäkyvät taustat voivat olla ongelmallisia iPhonen ja iPadin kotinäytöillä, sillä iOS-käyttöjärjestelmä värjää läpinäkyvät alueet mustiksi. Tästä syystä kiinteä taustaväri on varmempi valinta kotinäyttökuvakkeille.
Kuvakkeiden asentaminen ja site.webmanifest
Kun kuvakkeet on luotu, ne ladataan yhtenä ZIP-pakettina. Paketti sisältää myös site.webmanifest-tiedoston, joka on pieni tekstitiedosto. Se luettelee suuret kuvakkeet ja auttaa nykyaikaisia laitteita sekä asennettavia verkkosovelluksia tunnistamaan oikeat kuvakekoot.
Asennus tapahtuu seuraavasti:
- Lataa ZIP-paketti ja pura sen sisältö.
- Sijoita kaikki puretut tiedostot verkkosivustosi juurikansioon, jotta
favicon.icoon saavutettavissa suorassa osoitteessa/favicon.ico. - Kopioi generaattorin antama HTML-koodi ja liitä se jokaisen sivun
<head>-osioon. Selaimet ja laitteet osaavat tämän koodin avulla valita automaattisesti parhaiten sopivan kuvakekoon.
Tietosuoja ja paikallinen käsittely
Tietoturvasi on varmistettu paikallisella käsittelyllä. Kuvasi muutetaan kuvakkeiksi suoraan selaimessasi. Mitään tiedostoja ei ladata BroBroGo-palvelimelle, joten kuvamateriaalisi pysyy kokonaan omassa laitteessasi.
Usein kysytyt kysymykset
Mitä tiedostoja kuvakepaketti sisältää?
Paketti sisältää favicon.ico-tiedoston (sisältää 16, 32 ja 48 pikselin versiot), PNG-kuvakkeet koossa 16, 32, 180, 192 ja 512 pikseliä sekä site.webmanifest-tiedoston, joka luettelee suuret kuvakkeet. Jos aloitat SVG-kuvasta, myös itse vektoritiedosto sisällytetään. Yksi ZIP-tiedosto sisältää kaiken.
Minkä kokoinen lähdekuvan tulisi olla?
SVG on ihanteellinen – jokainen kuvake piirretään vektorista, joten jopa 16 pikselin kuvake pysyy terävänä. PNG- tai JPG-kuvissa aloita vähintään koosta 512 × 512; pienemmät kuvat skaalataan ylöspäin ja ne voivat näyttää epätarkoilta.
Pitäisikö taustan olla läpinäkyvä vai värillinen?
Välilehtien kuvakkeet näyttävät hyviltä läpinäkyvinä. iPhonen ja iPadin kotinäytöt kuitenkin värjäävät läpinäkyvät alueet mustiksi – jos käyttäjät saattavat lisätä sivustosi kotinäytölleen, valitse taustaväri.
Mitä tapahtuu kuvalle, joka ei ole neliö?
Kuvakkeet ovat neliönmuotoisia, mutta kuvaasi ei koskaan venytetä. Oletuksena se keskitetään ja sen ympärille lisätään tyhjää tilaa; voit vaihtaa "Täytä (rajaa)" -vaihtoehtoon leikataksesi ylimääräiset reunat pois.
Mihin tiedostot sijoitetaan sivustollani?
Lataa ne sivustosi juurikansioon, jotta favicon.ico on saavutettavissa osoitteessa /favicon.ico, ja liitä sitten luodut koodirivit sivujesi -osioon. Selaimet valitsevat oikean koon automaattisesti.