Ilmainen · Ei rekisteröitymistä · Selaimessa

Favicon-generaattori

Pudota logosi favicon-generaattoriin, niin saat kaikki kuvaketiedostot 16 pikselin välilehtikuvakkeesta 512 pikselin sovelluskuvakkeeseen sekä liitettävän HTML-koodin. Kaikki tehdään selaimessasi, eikä kuvaa lähetetä palvelimelle.

Pudota logosi tähän

PNG, JPG, WebP tai SVG. Neliönmuotoinen kuva, vähintään 512 px, toimii parhaiten.

Luodaan selaimessasi. Kuvaa ei lähetetä palvelimelle.

Kokeile esimerkkilogoamme

Mikä favicon on ja missä se näkyy

Favicon on pieni neliönmuotoinen kuvake, joka edustaa verkkosivustoasi. Nimi on lyhenne englannin sanoista ”favorite icon”, suosikkikuvake. Ensimmäinen sitä käyttänyt selain näytti kuvakkeen suosikeiksi kutsumiensa kirjanmerkkien vieressä.

Se näkyy selaimen välilehdessä sivun otsikon vieressä, tavallisesti 16 tai tarkalla näytöllä 32 pikselin levyisenä. Se merkitsee sivustosi myös kirjanmerkeissä ja selaushistoriassa. Kun sivusto tallennetaan puhelimen aloitusnäytölle, siitä tulee sovelluskuvake. Google näyttää sen hakutuloksissa sivustosi nimen vieressä.

Sen tehtävä on kaikkialla sama: auttaa tunnistamaan sivustosi yhdellä vilkaisulla muiden kuvakkeiden joukosta.

Miksi yhdestä faviconista tulee monta tiedostoa

Eri käyttökohteet ovat syntyneet eri aikoina ja tarvitsevat omat tiedostonsa. Yllä oleva favicon-generaattori luo ne kaikki yhdestä kuvasta.

Välilehdet, kirjanmerkit ja selaushistoria käyttävät favicon.ico-tiedostoa, jossa ovat 16, 32 ja 48 pikselin versiot. Se on vanhin muoto: jos sivu ei määritä kuvaketta, selain etsii yhä favicon.ico-tiedostoa sivuston juurikansiosta.

Jos aloitat SVG:stä, saat myös favicon.svg-tiedoston. SVG-kuvakkeita tukevat selaimet voivat käyttää sitä. SVG koostuu pikselien sijaan muodoista, joten se pysyy tarkkana kaikilla näytöillä.

Kun sivusto lisätään iPhonen tai iPadin aloitusnäytölle, laite käyttää 180 pikselin neliönmuotoista apple-touch-icon.png-tiedostoa. iPhone täyttää läpinäkyvät kohdat mustalla, joten kuvakkeelle lisätään aina tasainen tausta: valitsemasi väri tai valkoinen, jos valitsit läpinäkyvän.

Android-puhelimet ja selaimesta sovelluksiksi asennetut sivustot käyttävät icon-192.png- ja icon-512.png-tiedostoja. Ne löytyvät site.webmanifest-tiedoston avulla. Tämä pieni tekstitiedosto kertoo selaimelle sivustosi nimen, jos annoit sen työkalussa, sekä suurten kuvakkeiden sijainnit.

Erilliset 16–48 pikselin PNG-kuvat ovat varalla palveluja varten, jotka tarvitsevat PNG:n. Google lukee hakutulosten kuvakelinkit etusivusi HTML-koodista.

Favicon-tiedostojen lisääminen sivustolle

Jos sinä tai kehittäjäsi muokkaatte sivuston tiedostoja, siihen tarvitaan kaksi vaihetta.

Pura ensin ladattu zip-tiedosto ja siirrä tiedostot sivuston juurikansioon, ylimpään kansioon, jossa etusivu sijaitsee. Tarkista toiminta lisäämällä sivustosi osoitteen loppuun /favicon.ico: kuvakkeen pitäisi avautua.

Liitä sitten README-tiedoston HTML-rivit sivujesi head-osioon, HTML-koodin alun osaan, jossa on myös sivun otsikko. Rivit näkyvät myös työkalussa. ICO-tiedostolle, Applen aloitusnäyttökuvakkeelle ja manifestille on omat rivinsä, samoin SVG:lle, jos sellainen on.

Sivut käyttävät yleensä yhteistä mallipohjaa, joten koodi tarvitsee liittää vain kerran. Poista ensin vanhat kuvakerivit, jotta selain ei jatka vanhan kuvakkeen käyttöä.

Jos käytät verkkosivukonetta, voit ohittaa molemmat vaiheet: lataa icon-512.png sivuston kuvakeasetukseen. Verkkosivukone lisää HTML-koodin puolestasi.

Näin logo toimii 16 pikselin koossa

Kun koko on 16 × 16, koko kuvake koostuu 256 pienestä värillisestä neliöstä. Useimpia logoja ei ole suunniteltu siihen.

Aloita symbolista nimen sijaan. Jos kahdeksankirjaiminen nimi mahdutetaan 16 pikseliin, yhdelle kirjaimelle jää vain kaksi pikseliä leveyttä. Jos symbolia ei ole, käytä ensimmäistä kirjainta suurena ja lihavoituna. Paksut kirjaimet säilyvät pienennettäessä luettavina ohuita pidempään.

Karsi sitten yksityiskohtia. Ohuet viivat ja pienet välit sekoittuvat ympäristöönsä, ja iskulause muuttuu tahraksi.

Ratkaisevaa on vaalean ja tumman ero, ei väri itsessään. Välilehdet ovat teemasta riippuen vaaleita tai tummia, ja laivastonsininen kuvake katoaa tummalle välilehtipalkille. Jos symbolisi on tumma, anna sille työkalussa vaalea tausta, tai päinvastoin.

Reunatila on logon ja neliön reunan väliin jäävä alue. Jos sitä on liikaa, logo näkyy välilehdessä pienenä. Jos sitä on liian vähän, aloitusnäytön kuvakkeiden kulmat pyöristävä iPhone leikkaa logon kulmia.

Katso lopuksi yllä olevia vaalean ja tumman välilehden esikatseluja todellisessa koossa, suurentamatta. Ilmainen logon tarkistustyökalumme tutkii vielä enemmän: se pienentää logosi 32 pikseliin ja mittaa, kuinka paljon yksityiskohdista säilyy.

Milloin symboli kannattaa piirtää uudelleen pienentämisen sijaan

Joskus säätö ei auta. Yksityiskohtaisessa kuvituksessa tai varjoihin perustuvassa 3D-ilmeessä yksityiskohdat ovat osa itse ideaa, ja 16 pikselin koossa ne katoavat. Tämä työkalu muuttaa logosi kokoa, mutta ei piirrä sitä uudelleen.

Se ei tee logosta huonoa, vaan suurempiin käyttökohteisiin suunnitellun. Tee pienestä versiosta oma kokonaisuutensa: pelkistetty symboli tai alkukirjain brändisi fontilla. Säilytä värit ja jokin muodon piirre, niin yhteys pysyy tunnistettavana. Valitsisimme aina selkeän alkukirjaimen sumean pienoiskuvan sijaan.

Tarvitsetko uuden symbolin? Tekoälylogotyökalumme suunnittelee sen brändisi nimen ja halutessasi lyhyen kuvauksen pohjalta. Logomalleistamme tehdyissä logoissa symbolin saa erillisenä tiedostona, kun mallissa on sellainen. Jokainen meiltä ostettu logo sisältää myös favicon-tiedostot.

FAQ

Kysymyksiä faviconeista

Työkalu on ilmainen, eikä rekisteröitymistä tarvita tai vesileimaa lisätä. Myös kuva pysyy sinulla. Kaikki tehdään selaimessasi: eri koot ja zip-tiedosto luodaan suoraan laitteellasi, eikä kuvaa lähetetä palvelimillemme. Voit siis käyttää työkalua logoon, jota et ole vielä näyttänyt kenellekään.

Neliönmuotoinen ja vähintään 512 pikseliä joka sivulta. Paketin suurin kuvake on 512 pikseliä, joten pienempää PNG-, JPG- tai WebP-kuvaa joudutaan suurentamaan ja isot kuvakkeet jäävät epätarkoiksi. Työkalu ilmoittaa siitä. SVG:llä ei ole tätä rajoitusta: se koostuu muodoista eikä pikseleistä ja pysyy tarkkana kaikissa ko’oissa. Leveä logo täyttää neliöstä vain kapean kaistaleen, joten aloita symbolista tai alkukirjaimesta.

Tarvitset kaikki, sillä eri selaimet ja puhelimet käyttävät eri tiedostoja. Työkalun HTML-koodi kertoo niille oikean tiedoston. Kaikki selaimet ymmärtävät ICO:n. PNG:t ovat puhelimia ja asennettuja sovelluksia varten, pienet koot varatiedostoina. Kun aloitat SVG:stä, saat myös SVG-kuvakkeen, joka pysyy tarkkana sitä tukevissa selaimissa.

Selain näyttää todennäköisesti tallennetun kopion. Se säilyttää faviconia paljon pidempään kuin sivun muita osia, joten vanha kuvake voi näkyä uusien tiedostojen julkaisemisen jälkeenkin. Kokeile sivun lataamista välimuistin ohi: Windowsissa Ctrl+Shift+R, Macissa Cmd+Shift+R ja Safarissa Option+Cmd+R. Jos se ei auta, avaa sivustosi osoitteen perässä /favicon.ico ja päivitä se tai katso sivustoa yksityisessä ikkunassa. Muiden käyttäjien selaimet päivittyvät aikanaan.

Verkkosivukoneen asetuksiin, eivät kansioon. Useimmissa verkkosivukoneissa ja verkkokauppa-alustoissa on sivuston kuvake- tai favicon-asetus, johon ladataan yksi neliönmuotoinen PNG. Valitse zipin suurin tiedosto, icon-512.png, jotta pienempien kokojen tekemiseen riittää yksityiskohtia. Jos asetuksessa pyydetään tiettyä kokoa, valitse vastaava tiedosto. Verkkosivukone lisää HTML-koodin, joten voit ohittaa README-ohjeen.

Google poimii uuden faviconin, kun sen sivustoja lukeva indeksointirobotti käy seuraavan kerran etusivullasi. Siihen ei ole kiinteää aikataulua. Google tarvitsee neliönmuotoisen kuvan ja kuvakelinkin etusivun HTML-koodiin, joten tarkista ne molemmat. Sen jälkeen Google päättää itse, mitä näyttää ja milloin.