CodeKitHubMikä tämä työkalu on?
Favicon.ico ei ole pelkkä pieni kuva — se on säiliömuoto, joka voi sisältää useita saman ikonin kokoja yhdessä tiedostossa, jotta selain, tehtäväpalkki tai kirjanmerkkipalkki voi valita sen näyttöpaikkaan parhaiten sopivan resoluution. PNG:n nimeäminen uudelleen favicon.ico:ksi ei tuota tätä: se on yksittäinen kuva, jolla on väärä tiedostopääte, ja vaikka jotkin selaimet sietävät sitä, monet työkalut, hakurobotit ja vanhemmat selaimet, jotka lukevat raakadataa, odottavat aitoa ICO-säiliörakennetta ja epäonnistuvat tai palaavat tyhjään ikoniin.
Tämä työkalu rakentaa aidon ICO-säiliön: se renderöi SVG:si kokoina 16×16, 32×32 ja 48×48, koodaa jokaisen sisäisesti PNG:ksi ja pakkaa kaikki kolme yhteen kelvolliseen favicon.ico-tiedostoon samalla PNG-in-ICO-formaatilla, jota jokainen selain ja käyttöjärjestelmä on tukenut Windows Vistasta lähtien. Tämän lisäksi saat erilliset PNG-tiedostot koossa 180×180 (koko, jota iOS käyttää ikonille, kun sivustosi lisätään aloitusnäytölle) sekä 192×192 / 512×512 (koot, joita Android ja PWA-asennuskehotteet noutavat verkkosovelluksesi manifestista).
Miksi käyttää sitä?
- Tuottaa aidosti kelvollisen moniresoluutioisen favicon.ico-tiedoston, ei uudelleennimettyä PNG:tä.
- Kattaa yhdellä kertaa jokaisen ikonikoon, jota oikea käyttöönotto tarvitsee: 16, 32, 180, 192, 512px.
- Valmiiksi liitettävä <head>-HTML — ei tarvitse arvailla rel/sizes/type-attribuutteja.
- Ei-neliömäiset SVG:t keskitetään läpinäkyvälle neliölle venyttämisen sijaan.
- Kaikki renderöityy paikallisesti selaimessasi; SVG:tä ei koskaan ladata palvelimelle.
Käyttöohje
- Klikkaa laatikkoa tai pudota SVG-logotiedostosi siihen.
- Työkalu renderöi sen automaattisesti jokaisessa favicon-koossa — ei asetuksia säädettäväksi.
- Lataa favicon.ico sivustosi juureen sekä yksittäiset PNG-ikonit.
- Kopioi HTML-katkelma ja liitä se sivusi <head>-osioon.
Esimerkki
Syöte
logo.svg — yrityksen merkki, 3 kt vektoriTuloste
favicon.ico (16/32/48px yhdistettynä), sekä favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngYksi SVG sisään, jokainen ikonitiedosto, jota oikea käyttöönotto tarvitsee, ulos.
Mitä ikonikokoa käytetään missäkin
| Tiedosto | Koko | Käyttötarkoitus |
|---|---|---|
| favicon.ico | 16/32/48px (yhdistettynä) | Selainvälilehti, kirjanmerkkipalkki, tehtäväpalkki |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Varajärjestely selaimille, jotka suosivat PNG-favicoineita |
| apple-touch-icon.png | 180×180 | iOS-aloitusnäytön ikoni, kun sivusto lisätään aloitusnäytölle |
| icon-192.png | 192×192 | Android-aloitusnäytön ikoni, verkkosovelluksen manifesti |
| icon-512.png | 512×512 | PWA-asennuskehote, Android-käynnistysnäytön ikoni |
Miksi SVG-lähde on tärkeä
Koska SVG tallentaa muodot matematiikkana pikselien sijaan, sen tuore renderöinti sekä 16px:nä että 512px:nä lähtee samasta tarkasta polkudatasta — suurella puolella ei ole suurennusartefakteja, eikä pienellä puolella pakotettua pikselikohdistuksen arvailua, johon työkalun pitäisi tinkiä. Jos sinulla on vain PNG-logo, tämä sama työkalu ei auta; muunna tai luo logo ensin SVG-muotoon, koska pienen PNG:n suurentaminen 512px:ään tuottaisi vain epätarkan tuloksen.
Usein kysytyt kysymykset
Miksei vain nimetä PNG:tä uudelleen favicon.ico:ksi?
.ico-tiedostolla on oma binäärinen säiliömuoto (ICONDIR-otsikko, joka kertoo, kuinka monta kuvaa se sisältää, ja hakemistomerkintä jokaiselle kuvalle) — .ico:ksi uudelleennimetty PNG-tiedosto on edelleen vain PNG väärällä päätteellä. Useimmat nykyaikaiset selaimet ovat armollisia ja renderöivät sen silti, mutta tämä työkalu rakentaa aidon ICO-säiliön, joka sisältää kolme oikeaa resoluutiota — juuri sitä varten muoto on suunniteltu ja mitä tiukemmat lukijat odottavat.
Miksi tarvitsen PNG-ikoneita, jos minulla on jo favicon.ico?
Favicon.ico kattaa vain klassisen selainvälilehti/kirjanmerkki-käyttötapauksen. 180×180-PNG on se, mitä iOS käyttää, kun käyttäjä lisää sivustosi aloitusnäytölle (apple-touch-icon), ja 192×192 / 512×512 PNG:t ovat se, mitä Android ja PWA-asennuskehotteet noutavat verkkosovelluksesi manifestista. Ilman niitä ikonisi puhelimen aloitusnäytöllä palautuu geneeriseen kuvakaappaukseen tai tyhjään neliöön.
Logoni ei ole neliö — mitä sille tapahtuu?
Se keskitetään läpinäkyvälle neliölle jokaisessa kohdekoossa venyttämisen sijaan, joten leveä tai korkea logo säilyttää oikeat mittasuhteensa sen sijaan, että se puristuisi neliöksi.
Mihin laitan ladatut tiedostot?
Sijoita favicon.ico, apple-touch-icon.png, icon-192.png ja icon-512.png sivustosi juurikansioon (index.html:n viereen), ja liitä sitten luodut <link>-tagit sivusi <head>-osioon.
Ladataanko SVG:ni jonnekin?
Ei. SVG renderöidään paikallisille <canvas>-elementeille ja ICO/PNG-tiedostot kootaan selaimessasi. Mitään ei lähetetä palvelimelle.