Muunna PNG ICO-muotoon (favicon)

Favicon on pieni kuvake, jonka selaimet näyttävät välilehdessä, kirjanmerkkipalkissa ja historiassa. Tämä työkalu muuntaa PNG-kuvan oikeaoppiseksi monikokoiseksi .ico-tiedostoksi, jossa on 16, 32, 48 ja 64 pikselin versiot, ja kaikki tehdään laitteellasi ilman lähetystä palvelimelle.

Näin muunnat PNG:n ICO-muotoon

Pudota PNG-kuvasi alla olevaan työkaluun. Neliön muotoinen kuva toimii parhaiten.
Tulostusmuodoksi on jo valittu ICO (favicon).
Napsauta Suorita, niin monikokoinen .ico luodaan.
Lataa favicon.ico ja sijoita se sivustosi juurikansioon.

Mitä faviconin pitää tehdä

Favicon näytetään hyvin pienenä, usein vain 16 pikselin neliönä. Siinä koossa hienot yksityiskohdat katoavat ja ohuet viivat häviävät kokonaan. Hyvä favicon on vahva, yksinkertainen ja kontrastikas muoto: yksi kirjain, yksinkertaistettu versio logon tunnuksesta tai selkeä muoto brändin värissä. Jos koko logossasi on tekstiä, käytä vain tunnusta tai pelkkää alkukirjainta.

.ico-tiedostoissa on useita kokoja, koska yhden kuvan suurentaminen tai pienentäminen näytettäessä näyttää sumealta. Kun tarjolla on 16, 32, 48 ja 64 pikselin versiot, käyttöjärjestelmä tai selain voi näyttää pikselintarkan kuvan kussakin yhteydessä: 16 px välilehdellä, 32 px kirjanmerkkilistassa korkean tarkkuuden näytöllä, 48 px Windowsin tehtäväpalkin pikakuvakkeessa ja niin edelleen.

Lähde-PNG:n valmistelu

Tee siitä neliö. Jos logosi on leveä, sijoita se ensin läpinäkyvälle neliökankaalle tai rajaa pelkkä tunnus rajaustyökalulla.
Aloita vähintään 256 pikselistä. Pienentäminen suuresta ja siististä lähteestä antaa sileämmän tuloksen kuin pienen kuvan suurentaminen.
Pidä läpinäkyvä tausta, jos muoto on selkeä, jotta se näyttää hyvältä sekä vaaleissa että tummissa selainteemoissa. Jos muoto on ohut tai vaalea, sijoita se sen sijaan yksiväriselle neliölle.
Vältä yhtä tai kahta kirjainta pidempää tekstiä; se ei ole luettavissa 16 pikselissä.

Faviconin asentaminen

Tallenna ladattu tiedosto nimellä favicon.ico ja sijoita se sivustosi juurikansioon. Lisää sitten tämä jokaisen sivun <head>-osioon:

<link rel="icon" href="/favicon.ico" sizes="any">

Useimmissa alustoissa on sen sijaan oma asetuksensa: WordPressissä se on Sivuston kuvake kohdassa Ulkoasu, Shopifyssa ja Squarespacessa teema-asetuksissa on Favicon-kenttä, ja Webflow’ssa sellainen löytyy kohdasta Project Settings. Lähetä .ico-tiedosto palvelimelle siellä. Täydelliset ohjeet löydät oppaasta faviconin tekeminen.

Askel pidemmälle

Jotta saat kaikki kuvakkeet, joita nykyaikaiset laitteet pyytävät, tarvitset myös 180 pikselin PNG:n iOS:n kotinäytön pikakuvakkeille (apple-touch-icon) sekä 192 ja 512 pikselin PNG:t Androidia ja verkkosovelluksen manifestia varten. Ne ovat tavallisia PNG-tiedostoja, joten tee ne samasta alkuperäisestä koonmuutostyökalulla. Tämän sivun .ico kattaa selaimen välilehdet, kirjanmerkit ja Windowsin, eli paikat, joissa useimmat huomaavat puuttuvan faviconin.

Usein kysytyt kysymykset

Minkä kokoinen lähde-PNG:n pitäisi olla?

Neliö, vähintään 64 × 64 pikseliä. 256 pikselin neliönmuotoinen PNG antaa siisteimmät tulokset pienennettynä. Muut kuin neliön muotoiset kuvat keskitetään ja reunoille lisätään läpinäkyvää tilaa.

Mitä .ico-tiedoston sisällä on?

Neljä PNG-koodattua kuvaa kooissa 16, 32, 48 ja 64 pikseliä. Selaimet ja Windows valitsevat tilanteeseen parhaiten sopivan koon, joten kuvake näyttää terävältä välilehdessä, kirjanmerkissä ja työpöydän pikakuvakkeessa.

Miten lisään faviconin verkkosivustolleni?

Lähetä favicon.ico palvelimelle sivustosi juurikansioon (niin että se löytyy osoitteesta sivustosi.fi/favicon.ico) ja lisää <link rel="icon" href="/favicon.ico"> sivujesi <head>-osioon. Selaimet tallentavat faviconit sitkeästi välimuistiin, joten muutoksen näkeminen voi vaatia sivun pakotetun päivityksen.

Tarvitsenko .ico-tiedostoa vielä vuonna 2026?

Nykyaikaiset selaimet hyväksyvät PNG- ja SVG-faviconit, mutta .ico on ainoa muoto, joka toimii kaikkialla, myös vanhemmissa selaimissa, Windowsin pikakuvakkeissa ja joissakin syötteenlukijoissa. Useimmat sivustot tarjoavat molemmat.

Tiedostosi eivät koskaan poistu laitteeltasi

Jokainen Squishly Toolsin työkalu on 100 % ilmainen ja toimii kokonaan selaimessasi. Kuvasi ja asiakirjasi käsitellään omalla tietokoneellasi, eikä niitä koskaan lähetetä palvelimelle. Ei tilejä, ei vesileimoja eikä koukkuja.