Favicon-generaattori

Mika on favicon-generaattori?

Favicon on pieni kuvake, joka naytetaan selaimen valilehdissa, kirjanmerkeissa, hakutuloksissa ja sovelluspikakuvakkeissa verkkosivustolle. Tyypillisesti 16x16 tai 32x32 pikselia, se on verkkosivustosi visuaalinen identiteetti selaimessa. Hyva favicon parantaa brandin tunnistettavuutta ja auttaa kayttajia loytamaan sivustosi useiden avoimien valilehtien joukosta.

Modernit verkkosivustot tarvitsevat useita favicon-kokoja: 16x16 ja 32x32 selaimen valilehdille, 180x180 Applen kosketuskuvakkeille, 192x192 ja 512x512 Androidin aloitusnaytolle ja aloituskuvalle (PWA-manifesti). Jokainen alusta hakee eri kokoa — yksikin puuttuva koko voi tarkoittaa sumeaa tai oletuskuvaketta.

Missä favikoni-kuvakkeet näkyvät

Favikonit näkyvät useammissa paikoissa kuin useimmat ihmiset tajuavat. Tutuin paikka on selainvälilehti — jokainen avoin sivu näyttää favikoninsa sivun otsikon vasemmalla puolella, jolloin voit tunnistaa välilehden yhdellä silmäyksellä, kun niitä on kymmeniä auki. Ne näkyvät myös selaimen kirjanmerkkirivistössä ja kirjanpainhallinnoinnissa, selaimen historialuettelossa ja osoiterivillä joissain selaimissa kirjoittaessasi URL-osoitetta.

Mobiililaitteilla, kun kävijä napauttaa Safarin tai Chromen "Lisää aloitusnäytölle"-painiketta, käyttöjärjestelmä käyttää apple-touch-icon-kuvaketta (180×180 iOS:lla) tai PWA-manifestin kuvaketta (192×192 Androidilla) sovelluksen pikakuvakkeena laitteen aloitusnäytöllä. Pöytäkoneella Chromen tai Edgen kautta asennetut progressive web -sovellukset näkyvät järjestelmän tehtäväpalkissa ja Windowsin Käynnistä-valikossa käyttäen manifestin 512×512-kuvaketta. Hakukoneet, kuten Google, näyttävät joskus sivuston favikonin hakutuloksissa sivun URL-osoitteen vieressä, jolloin kiillotettu kuvake on osa brändivaikutelmaasi jo ennen kuin käyttäjät klikkaavat.

Tyokalun kayttohje

Lataa neliokuva (mieluiten vahintaan 512x512 pikselia). Tyokalu generoi kaikki standardikokoiset faviconit ja muodot. Esikatsele jokaista kokoa ennen lataamista. Lataa ne ja lisaa annetut HTML-linkkielementit sivustosi head-osioon.

Favikoni-muodot selitettyinä

Modernit selaimet ja käyttöjärjestelmät vaativat useita erilaisia favikoni-muotoja. Kukin muoto palvelee tiettyä käyttötarkoitusta, ja yhden poisjättäminen tarkoittaa, että jotkut laitteet tai selaimet käyttävät yleistä tyhjää kuvaketta.

• favicon.ico — Alkuperäinen favikoni-muoto. ICO-tiedosto on säilö, joka voi sisältää useita kuvaresoluutioita (tyypillisesti 16×16, 32×32 ja 48×48) yhdessä tiedostossa. Sijoita se sivustosi juurihakemistoon nimellä /favicon.ico. Selaimet hakevat tämän polun automaattisesti, jopa ilman <link>-tunnistetta, varmistaen yhteensopivuuden vanhojen selainten ja syötteenlukijoiden kanssa.
• PNG-favikonit (32×32) — Modernit selaimet suosivat PNG:tä. 32×32 PNG on standardin mukainen yleiskäyttöinen favikoni selainvälilehdille korkean DPI:n näytöillä. Ilmoita se näin: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• apple-touch-icon (180×180) — Apple-laitteet käyttävät tätä, kun kävijä tallentaa sivustosi iOS- tai iPadOS-aloitusnäytölle. Ilman sitä iOS ottaa kuvakaappauksen sivustasi. Ilmoita se näin: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Älä käytä läpinäkyvää taustaa tässä — Apple lisää kuvakkeen valkoiselle neliölle, mikä saa läpinäkyvät alueet näyttämään virheellisiltä.
• PWA-manifestin kuvakkeet (192×192 ja 512×512) — Progressive web -sovellukset ilmoittavat kuvakkeet JSON-manifesti-tiedostossa. 192×192-kuvaketta käytetään aloitusnäytön pikakuvakkeisiin Androidilla, ja 512×512-kuvaketta käytetään latauksen aikana näkyvässä aloitusnäytössä. Viittaa manifestiin näin: <link rel="manifest" href="/site.webmanifest">
• SVG-favikoni — Modernit selaimet (Chrome 80+, Firefox 41+ ja Safari 16+) tukevat SVG-favikoneja ilmoitettuna näin: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG-favikonit ovat resoluutioriippumattomia ja voivat sisältää SVG:n sisällä prefers-color-scheme-mediahaun vaihtaakseen automaattisesti vaalean ja tumman version välillä. Listaa SVG-tunniste ennen PNG-varaversiota, jotta kykenevät selaimet käyttävät vektoria, kun taas vanhemmat selaimet siirtyvät PNG:hen.

Tarvitsemasi HTML-link-tunnisteet

Kopioi nämä tunnisteet jokaisen sivustosi sivun <head>-osioon. Järjestyksellä on merkitystä — laita SVG ensin, sitten PNG, sitten ICO. Selaimet valitsevat ensimmäisen tukemansa muodon.

Site.webmanifest-tiedostosi tulisi sisältää vähintään nimi, lyhyt_nimi, kuvakeluettelo (192×192 ja 512×512 merkinnöillä), teemaväri, taustaväri ja näyttötila asetettu standalone-tilaan asennettaville PWA:ille.

Tarvittavat favicon-koot

• 16x16 — selaimen valilehtikuvake (klassinen favicon-koko).
• 32x32 — tehtavapalkin pikakuvake, korkean DPI:n selaimen valilehdet.
• 180x180 — Apple Touch Icon iOS-aloitusnaytolle.
• 192x192 ja 512x512 — Androidin aloitusnaytto ja aloituskuva (PWA-manifesti).

Favicon-suunnitteluvinkkeja

Faviconien on oltava tunnistettavia pienissa koissa. Kayta rohkeita muotoja, yksinkertaista geometriaa ja korkeaa kontrastia. Teksti toimii harvoin alle 32 pikselin koossa. Verkkotunnuksen ensimmainen kirjain tuotevaarissa on turvallinen vaihtoehto. Testaa aina todellisissa selainvalehdissa — mika nayattaa hyvalta 512-pikselisena, voi olla tunnistamaton 16-pikselisena.

Käytä korkeaa kontrastia

Favikonit näytetään selaimen käyttöliittymää vasten, joka vaihtelee vaaleanharmaan ja lähes mustan välillä käyttäjän järjestelmäteeman mukaan. Suunnitelma, joka näyttää selkeältä valkoisella taustalla, voi kadota tummassa välilehtipalkissa. Pyri vähintään 4,5:1 kontrastisuhteeseen kuvakkeen etualatason ja taustan välillä. Tumma kuvake eläväisellä taustalla tai vaalea kuvake tummalla taustalla, molemmat toimivat hyvin.

Suunnittele siluettitunnistuksen varaan

16×16 pikselin koossa kuvakkeessasi on vain 256 pikseliä yhteensä. Aivot lukevat favikoneja enemmän muodon kuin yksityiskohtien perusteella. Selkeä siluetti — yksittäinen kirjain, geometrinen merkki, tunnistettava symboli — toimii paljon paremmin kuin yksityiskohtainen kuvitus. Logot, joissa yrityksen koko nimi on kirjoitettuna, ovat lähes lukukelvottomia favikonikoossa. Eristä brändisi yksi tunnistettavin elementti ja keskitä se runsaalla täytteellä, jottei se leikkaudu.

Yleisiä favikoni-virheitä

• Tarjotaan vain 16×16 PNG — tämä näyttää sumealta retina- ja korkean DPI:n näytöillä. Sisällytä aina vähintään 32×32 PNG.
• Apple-touch-iconin unohtaminen — iOS luo näyttökaappauksen, jolloin tuloksena on lukukelvoton pieni versio koko sivustasi.
• Läpinäkyvä tausta apple-touch-iconissa — Apple renderöi läpinäkyvät alueet mustaksi, pilaaten suunnittelun. Käytä kiinteää taustaväriä 180×180-kuvakkeelle.
• Monimutkaiseen, yksityiskohtaiseen logoon turvautuminen — hienot yksityiskohdat häviävät alle 64×64 pikselin koossa. Pelkistä suunnitelma ydinmerkkiinsä.
• Välimuistintyhjennyksen lisäämisen laiminlyönti päivityksen jälkeen — selaimet tallentavat favikonit aggressiivisesti. Lisää versiokyselymerkkijono (?v=2) href-attribuuttiin pakottaaksesi selaimet hakemaan uuden tiedoston uudelleen.

Asiakaspuolen generointi ja yksityisyys

Tämä favikoni-generaattori toimii kokonaan selaimessasi käyttäen HTML Canvas API:a. Kirjoittamasi teksti, värit ja kulman pyöristysasetukset eivät lähde koskaan palvelimelle. Suunnitelmasi pysyy laitteellasi ja lataat generoidut tiedostot suoraan tietokoneellesi. Tämä tarkoittaa, että työkalu toimii offline-tilassa, kun sivu on kerran ladattu, eikä vaadi tiliä tai rekisteröitymistä.

Usein kysytyt kysymykset

Mika on ero favicon.ico- ja PNG-faviconien valilla?

ICO-muoto voi sisaltaa useita kokoja yhdessa tiedostossa ja on kaikkien selainten tukema, mukaan lukien erittain vanhat. PNG on modernimpi, pienempi ja riittaa useimpiin nykyisiin selaimiin. Kaytannossa tarjoa sekae ICO (taaksepain yhteensopivuus) etta PNG (modernit selaimet). SVG-faviconit kasvavat ilman laadun heikkenemista mutta eivat toimi viela kaikissa selaimissa.

Miksi faviconini ei nay?

Yleisia syyja: selain on valimuistittanut vanhan faviconin (kokeile tyhjentaa valimuisti tai ladata yksityisessa ikkunassa), tiedostopolku on vaara HTML:ssa, palvelin palauttaa 404-virheen favicon-pyynnolle tai kuva ei ole nelio. Tarkista selaimen kehittajatyokalujen verkkovalehdelta mahdolliset favicon-virhepyynnot.

Tarvitsenko vielä favicon.ico-tiedoston?

Kyllä, toistaiseksi. Jotkut vanhemmat selaimet, sähköpostiohjelmat, RSS-lukijat ja verkkosivustonnoutajat hakevat edelleen /favicon.ico-tiedostoa verkkotunnuksesi juuressa lukematta lainkaan HTML-link-tunnisteita. Pitämällä 32×32 favicon.ico-tiedosto juurihakemistossasi vie minimaalisen tilan ja kattaa nämä reunatapaukset. Modernit selaimet suosivat <link>-tunnisteissa ilmoitettuja SVG- tai PNG-versioita ICO-varaversion sijaan.

Voinko käyttää emojia favikonina?

Kyllä — SVG-favikonien avulla. Voit ilmoittaa emojin sisältävän inline-SVG:n tekstielementtinä, ja modernit selaimet renderöivät sen täydellisesti missä tahansa resoluutiossa. SVG-lähestymistapa tukee myös tummaa tilaa: kääri erilaiset täytöt prefers-color-scheme-mediahakuun SVG-tiedoston sisällä. Tämä generaattori antaa sinun kirjoittaa minkä tahansa emojimerkin tai -merkistön tekstikenttään ja viedä sen SVG-favikonina käyttövalmiina.