PWA-kuvakegeneraattori
Luo yhdestä kuvasta ne kuvakkeet, joita asennettava verkkosovellus tarvitsee — 192- ja 512-pikseliset PNG-kuvat sekä site.webmanifest — kokonaan selaimessasi.
Yksityisyys edellä: jokainen kuva käsitellään paikallisesti selaimessasi. Mitään ei ladata palvelimelle, tallenneta tai lähetetä minnekään.
Kuvakkeet, jotka tekevät sovelluksesta asennettavan
Progressiivisen verkkosovelluksen asennettavuus arvioidaan osittain sen kuvakkeiden perusteella: selaimet etsivät verkkomanifestia, jossa ilmoitetaan vähintään 192×192- ja 512×512-kokoiset PNG-kuvat, ennen kuin ne tarjoavat asennuskehotetta tai asettavat kunnollisen kuvakkeen aloitusnäytölle. Tämä generaattori piirtää molemmat lähdekuvastasi ja kirjoittaa site.webmanifest-tiedoston, joka viittaa niihin — iOS:n haluaman apple-touch-iconin ja tavallisten välilehtien favicon.ico-tiedoston rinnalla.
Muotoile se käynnistintä varten
Android-käynnistimet saattavat maskata kuvakkeen ympyräksi tai pyöristetyksi neliöksi, joten reunaan asti ulottuva grafiikka voi rajautua pois. Lisää täällä täytettä ja yhtenäinen tausta, niin tärkein osa pysyy turva-alueen sisällä maskista riippumatta; reaaliaikainen esikatselu näyttää tuloksen joka koossa. Kaikki piirretään laitteellasi Canvas API:n avulla — logoasi ei koskaan ladata palvelimelle — ja koko sarja latautuu zip-pakettina.
Usein kysytyt kysymykset
- Ladataanko kuvani palvelimelle faviconin tekemiseksi?
- Ei. favicon.ico, PNG-kuvakkeet ja manifesti luodaan kaikki paikallisesti selaimessasi Canvas API:n avulla. Kuvasi ei koskaan poistu laitteeltasi.
- Mitä kokoja ja tiedostoja saan?
- Monitarkkuuksisen favicon.ico-tiedoston (16, 32 ja 48 px), PNG-kuvakkeet kokoina 16, 32, 48, 180 (apple-touch-icon), 192 ja 512 px, site.webmanifest-tiedoston sekä HTML-pätkän liitettäväksi <head>-osioon.
- Voinko muuntaa PNG:n tai SVG:n ICO-muotoon?
- Kyllä. Pudota mukaan PNG, JPG, SVG tai WebP ja lataa aito favicon.ico. SVG-logot rasteroidaan ensin paikallisesti suurella tarkkuudella.
- Millainen kuva toimii parhaiten?
- Neliömäinen kuva, jossa on yksinkertainen ja korkeakontrastinen logo. Muun kuin neliön muotoiset kuvat rajataan keskeltä sopiviksi; käytä täyte- ja muotosäätimiä sommitellaksesi sen haluamallasi tavalla.
- Miten asennan faviconin?
- Pura paketti sivustosi juurikansioon ja liitä mukana tuleva HTML-pätkä sivujesi <head>-osioon. Useimmat selaimet löytävät favicon.ico-tiedoston automaattisesti.