1. Lataa kuva
Vedä ja pudota tiedosto merkittyyn alueeseen tai valitse se laitteeltasi. Neliömäinen kuva toimii parhaiten.
Luo favicon.ico verkkosivullesi yhdestä kuvasta
Lataa kuva, ja työkalu luo favicon.ico-tiedoston ja täydellisen PNG-kuvakesarjan selaimille, mobiililaitteille ja Lighthouselle.
MAINOS
MAINOS
Loading tool editor...
Tämä työkalu toimii suuremmalla näytöllä
Käytä tätä työkalua mukavasti avaamalla se kannettavalla tietokoneella, pöytäkoneella tai tabletilla vaakatilassa.
Vinkki
Jos käytät tablettia, vaihda vaakatilaan – kun ikkunan leveys on riittävä, työkalu latautuu automaattisesti.
Mikä on favicon ja miksi se on tärkeä?
Favicon on pieni kuvake, joka näkyy selaimen välilehdessä, kirjanmerkkipalkkissa ja puhelimen aloitusnäytöllä. Se on yksi ensimmäisistä elementeistä, jotka käyttäjä näkee – jo ennen sivun täydellistä latautumista.
Ammattimainen favicon rakentaa brändin tunnistettavuutta ja helpottaa käyttäjää löytämään sivun monien avoimien välilehtien joukosta. Faviconin puuttuminen voi antaa epäammattimaisen vaikutelman ja vähentää kävijöiden luottamusta.
Näin käytät favicon-generaattoria
Faviconin luominen kestää vain muutaman minuutin:
2. Rajaa ja säädä
Säädä rajausaluetta valitaksesi kuvan sopivan osan. Katso, miltä se näyttää eri ko'oissa.3. Lataa kuvakkeet
Lataa favicon.ico ja täydellinen PNG-kuvakesarja ZIP-tiedostona. Kaikki kuvakkeet ovat valmiita käytettäviksi.
Mitkä kuvakkeet generaattori luo?
Jokaisella koolla on oma käyttötarkoituksensa:
favicon.ico (32×32)
Klassinen muoto, jonka kaikki selaimet tunnistavat. Näkyy selaimen välilehdessä.
16×16 ja 32×32 PNG
Vakiokoot nykyaikaisille selaimille. Näkyvät välilehdissä ja kirjanmerkeissä.
180×180 PNG (apple-touch-icon)
Kuvake Apple-laitteille (iPhone, iPad). Näkyy aloitusnäytöllä, kun sivu lisätään.
192×192 ja 512×512 PNG
Kuvakkeet verkkosovelluksille (PWA). Manifestin vaatimia ja sovelluskauppojen käyttämiä.
Jos et rakenna PWA:ta, riittävät: favicon.ico, 32×32 PNG ja 180×180 PNG. Nämä kolme tiedostoa kattavat useimmat käyttötapausten.
Mikä tekee tästä favicon-generaattorista erityisen?
Paikallinen käsittely selaimessa
Kuvaa ei ladata palvelimelle. Kaikki käsittely tapahtuu laitteellasi.Täyttää Lighthouse-vaatimukset
Luodut kuvakkeet täyttävät Google Lighthosen koko- ja muotovaatimukset.Kuvakkeet kaikille laitteille
Yksi tiedostosarja kattaa kaikki selaimet, iOS:n, Androidin ja Windowsin.Ilman rajoituksia, ilman rekisteröitymistä
Luo niin monta faviconia kuin tarvitset. Ilman rekisteröitymistä, ilman maksuja.
Miten favicon-generaattoria käytetään?
Generaattori ohjaa sinut koko prosessin läpi vaihe vaiheelta:
1. Lisää lähdekuva
Vedä tiedosto merkitylle alueelle tai valitse kuva tietokoneeltasi.
Tuetut muodot: PNG, JPG, SVG. Yksinkertainen logo tai kuvake vähintään 512×512 pikseliä toimii parhaiten.
2. Valitse kuvakekoot
Valitse tarvitsemasi kuvakekoot.
Voit valita kaikki tai vain osan. Tavalliselle verkkosivulle riittää: favicon.ico, 32×32 ja 180×180.
3. Aseta luontiasetukset
Määritä lisäasetukset:
- Tausta – läpinäkyvä tai valittu väri
- Manifesti – PWA-konfiguraatiotiedosto
- Automaattinen lataus – tiedostot ladataan heti luonnin jälkeen
4. Luo ja lataa tiedostot
Luonnin jälkeen työkalu käsittelee kuvan paikallisesti – mitään ei lähetetä palvelimelle.
Lataa kaikki tiedostot ZIP-arkistona tai lataa yksittäiset kuvakkeet erikseen.
PNG-koot
16x1632x32180x180
Läpinäkyvä tausta (PNG/ICO)
Taustaväri:
Luontiasetukset – mitä kukin tekee?
Tausta (läpinäkyvä tai väri)
Oletusarvoisesti generaattori säilyttää läpinäkyvyyden. Voit myös valita tietyn taustavärin.
Luo manifesti (site.webmanifest)
JSON-konfiguraatiotiedosto verkkosovelluksille (PWA). Jos et luo PWA:ta, tämä asetus ei ole tarpeen.
MAINOS
Miten luodut tiedostot ladataan?
Kuvakkeiden luonnin jälkeen sinulla on useita latausvaihtoehtoja:
Lataa kaikki ZIP-tiedostona
Lataa kaikki -painike pakkaa kaikki luodut tiedostot yhteen ZIP-arkistoon. Kätevin vaihtoehto, kun tarvitset täydellisen kuvakesarjan.Lataa yksittäiset tiedostot
Jokaisella luodulla kuvakkeella on oma latauspainike – voit ladata yksittäisen tiedoston ilman koko sarjan latausta. Hyödyllinen yhden koon päivittämiseen.
Minne ja miten favicon ladataan?
WordPress
Useimmissa WordPress-teemoissa on sisäänrakennettu sivustokuvakkeen asetusmahdollisuus. Löydät sen hallintapaneelista:
Ulkoasu → Muokkaa → Sivuston identiteetti → Sivustokuvake
Lataa 512×512-tiedosto – WordPress luo automaattisesti pienemmät koot. Täyttä hallintaa varten voit myös ladata tiedostot suoraan juurihakemistoon FTP:n kautta.
Mikä lähdekuva toimii parhaiten?
Favicon on hyvin pieni grafiikka – jopa 16×16 pikseliä. Siksi kaikki kuvat eivät sovellu lähteeksi:
Yksinkertaiset muodot ja luettavat symbolit
Yksinkertaiset logot, yksittäiset kirjaimet tai symbolit toimivat parhaiten. Vältä monimutkaisia grafiikoita, joissa on paljon yksityiskohtia.Neliömuoto
Favicon on neliö. Jos lähdekuvalla on muu kuvasuhde kuin 1:1, se rajataan tai venytetään.Riittävä koko
Suosittelemme lähdekuvaa, jonka koko on vähintään 512×512 pikseliä. Pienemmät kuvat suurennetaan.SVG ihanteellisena lähteenä
SVG skaalautuu ilman laadun heikkenemistä, joten kuvakkeet ovat teräviä kaikissa koissa.
Favicon Googlen hakutuloksissa
Google näyttää faviconit verkkosivuston URL-osoitteen vieressä hakutuloksissa. Mobiilihakutulokset ovat näyttäneet faviconeja vuodesta 2019. Työpöytätulokset seurasivat tammikuussa 2020. Favicon on siten näkyvä brändielementti jokaisessa Google-haussa.
Google asettaa tarkat vaatimukset faviconien näyttämiselle. Kuvakkeen on oltava vähintään 48×48 pikseliä. Sen on oltava neliö. Kuvan on oltava selkeästi näkyvä valkoisella taustalla. Google hylkää kuvakkeet, joissa on sopimatonta tai tyhjää sisältöä.
Googlebot indeksoi faviconit sivun sisällöstä riippumatta. Faviconin päivitys hakutuloksissa voi kestää useista päivistä viikkoihin. Favicon-tiedostoa ei saa estää robots.txt-tiedostossa - muuten Google ei voi hakea uutta versiota.
Bing näyttää myös faviconeja hakutuloksissaan. DuckDuckGo näyttää sivustokuvakkeet jokaisen tuloslinkin vieressä. Täydellinen favicon-kokoelma varmistaa yhtenäisen brändi-ilmeen kaikissa suurissa hakukoneissa. Käyttäjät tunnistavat tutut faviconit nopeammin, mikä edistää korkeampaa klikkausprosenttia.
Favicon ja brändi-identiteetti Suomessa
Suomalainen muotoiluperinne arvostaa selkeyttä ja toiminnallisuutta. Yksinkertainen favicon sopii tähän estetiikkaan ja vahvistaa tunnistettavuutta välilehdissä, kirjanmerkeissä ja puhelimen aloitusnäytössä. Kun käyttäjällä on kymmenen tai enemmän välilehteä auki, favicon on ainoa näkyvä elementti, joka tunnistaa verkkosivuston.
Visuaalinen yhdenmukaisuus faviconin ja logon välillä parantaa brändin muistamista. Yksinkertaistettu versio logosta tai sen ensimmäinen kirjain toimii parhaiten pienissä pikselikokoissa. Faviconin värien tulisi vastata yrityksen graafista ohjeistoa.
Verkkokauppa-alustoja kuten Vilkas, MyCashflow ja WooCommerce käytetään laajasti Suomessa. Favicon asetetaan teeman asetuksissa. Ammattimaisella faviconilla varustetut verkkokaupat viestivät luotettavuutta ja erottuvat hintavertailusivuilla.
Saavutettavuuslaki (Laki digitaalisten palvelujen tarjoamisesta) edellyttää riittävää kontrastia kaikissa visuaalisissa elementeissä julkisten organisaatioiden verkkosivuilla. Favicon on oltava luettavissa sekä vaaleassa että tummassa tilassa. Kontrastiset värit ja yksinkertaiset muodot täyttävät tämän vaatimuksen luotettavasti.
Favicon PWA:lle ja mobiililaitteille
Progressive Web Apps vaativat lisäkuvakkeita standardifaviconin lisäksi. Manifest.json-tiedoston on sisällettävä kuvakejoukko kokoina 192×192 ja 512×512 pikseliä PNG-muodossa.
Maskable-kuvakkeet ovat erityinen kuvaketyyppi Android-laitteille. Käyttöjärjestelmä rajaa maskable-kuvakkeet eri muotoihin - ympyröiksi, pyöristetyiksi neliöiksi tai pisaroiksi. Turvavyöhyke kattaa kuvan sisemmät 80 prosenttia. Kaikkien olennaisten graafisten elementtien on sijaittava tämän vyöhykkeen sisällä rajauksen välttämiseksi.
Apple vaatii erillisen apple-touch-icon-tiedoston kooltaan 180×180 pikseliä. Tämä tiedosto on ilmoitettava HTML-head-osiossa - iOS ei lue sitä manifest-tiedostosta.
Suomessa älypuhelinten käyttöaste on Euroopan korkeimpia. Suomalaiset pankit kuten OP ja Nordea tarjoavat sovelluksen kaltaisia kokemuksia selaimen kautta. PWA-teknologia mahdollistaa nopean pääsyn puhelimen aloitusnäytöltä ilman asennusta sovelluskaupasta.
Lighthouse-tarkastus Chrome DevToolsissa varmistaa faviconin ja PWA-kuvakkeiden olemassaolon ja oikeellisuuden. Puuttuva tai virheellinen favicon aiheuttaa varoituksen PWA-kategoriassa.
MAINOS
Usein kysytyt kysymykset favicon-generaattorista
Mikä kuva on paras faviconiksi?
Neliömäinen kuva (vähintään 512×512 px) yksinkertaisella taustalla on paras. Logot, nimikirjaimet tai yksinkertaiset kuvakkeet tuottavat parhaat tulokset. Paljon yksityiskohtia sisältävät kuvat voivat näyttää huonoilta pienessä koossa (16×16 px).
Mikä on ero favicon.ico:n ja PNG:n välillä?
ICO-tiedosto voi sisältää useita kokoja yhdessä tiedostossa, ja kaikki selaimet tukevat sitä, mukaan lukien vanhemmat. PNG-tiedostot tarjoavat korkeamman laadun, mutta vaativat erillisen HTML-tunnisteen jokaiselle koolle. Molempien käyttöä suositellaan.
Lähetetäänkö kuva palvelimelle?
Ei. Kaikki käsittely tapahtuu selaimessasi. Kuvaa ei tallenneta eikä lähetetä mihinkään.
Miten favicon lisätään verkkosivulle?
Sijoita kuvaketiedostot verkkosivuston juurikansioon ja lisää asianmukaiset HTML-tunnisteet sivun <head>-osioon. Ladattu ZIP-tiedosto sisältää käyttöönotto-ohjeet.
Auta meitä parantamaan työkalujamme
Onko sinulla idea uudelle ominaisuudelle, löysitkö virheen tai haluatko ehdottaa toista työkalua, joka helpottaisi työtäsi? Kirjoita meille – vastaamme 24 tunnin kuluessa.