Favicon-generaattori — ICO, PNG ja Apple Touch Icon
Muunna yksi kuva täydelliseksi favicon-sarjaksi: favicon.ico, PNG-kuvakkeet, apple-touch-icon ja web-sovelluksen manifesti.
Apple-touch-icon on aina läpinäkymätön. Kun sovelluksen nimi on tyhjä, manifesti käyttää kuvatiedoston nimeä.
Esikatselu
Tiedostot ZIP:ssä
Näin teet faviconin
- Valitse neliömäinen kuva, mieluiten vähintään 512 x 512 pikseliä, PNG-, JPG-, WebP- tai SVG-muodossa.
- Valitse, miten ei-neliömäiset kuvat sovitetaan: contain täyttää ne taustavärillä, cover rajaa ne keskeltä.
- Aseta tausta- ja teemaväri, sisämarginaali ja se, säilyttävätkö pienet kuvakkeet läpinäkyvän taustan.
- Kirjoita sovelluksen nimi ja lyhyt nimi, jotka web-sovelluksen manifestin tulee sisältää, ja tarkista reaaliaikaiset esikatselut.
- Lataa ZIP, jossa on kaikki tiedostot, tai nappaa favicon.ico ja apple-touch-icon.png erikseen, ja kopioi HTML-katkelma.
Milloin tästä on hyötyä
- Uuden verkkosivuston faviconin tekeminen avaamatta kuvankäsittelyohjelmaa.
- Puuttuvan tai sumean faviconin korvaaminen, joka näkyy tyhjänä sivukuvakkeena välilehdissä.
- Apple-touch-iconin lisääminen, jotta sivusto näyttää oikealta tallennettuna iPhonen aloitusnäytölle.
- Android-kuvakkeiden ja manifestin valmistelu progressiiviselle web-sovellukselle.
- Logon muuntaminen siistiksi kuvakesarjaksi, jossa on tasainen sisämarginaali joka koossa.
Usein kysytyt kysymykset
Minkä kokoisia kuvakkeita generaattori tuottaa?
Se kirjoittaa favicon.ico-tiedoston, jossa on 16, 32 ja 48 pikselin kuvat, erilliset favicon-16x16.png- ja favicon-32x32.png-tiedostot, apple-touch-icon.png-tiedoston 180 x 180 pikseliä sekä Android-kuvakkeet 192 ja 512 pikseliä.
Miksi apple-touch-icon on aina läpinäkymätön?
iOS ei näytä läpinäkyvyyttä aloitusnäytön kuvakkeessa, joten läpinäkyvä PNG tulisi mustalla tai valkoisella lohkolla taustalla. Generaattori täyttää tämän tiedoston taustavärilläsi ja jättää pienet favicon-koot läpinäkyviksi, jos haluat.
Mitä manifestiin pitäisi laittaa?
Käytä sivuston tai sovelluksen koko nimeä ja noin kahdentoista merkin lyhyttä nimeä, koska lyhyt nimi näkyy kuvakkeen alla puhelimessa. Teemaväri sävyttää selaimen palkin ja taustaväri täyttää käynnistysnäytön.
Voinko käyttää SVG-logoa?
Kyllä. SVG rasteroidaan 512 pikselin leveydelle ja sen kuvasuhde otetaan width- ja height-attribuuteista tai viewBoxista, joten neliömäinen logo pysyy neliömäisenä.
Minne tiedostot laitetaan palvelimellani?
Laita ne sivuston juureen index.html-tiedoston viereen, jotta katkelman polut, kuten /favicon.ico ja /site.webmanifest, toimivat. Jos pidät ne alikansiossa, muokkaa katkelman href-arvoja vastaamaan.
Lähetetäänkö kuvani minnekään?
Ei. Kuva puretaan ja piirretään piirtoalustalle selaimessasi, ja ZIP kootaan muistiin, joten mitään ei lähetetä palvelimelle.