Favicon-generaattori

Muuta mikä tahansa logo tai kuva täydelliseksi favicon-sarjaksi: monikokoinen favicon.ico, apple-touch-icon, Android- ja verkkosovelluskuvakkeet sekä valmis HTML-pätkä liitettäväksi. Valitse neliö-, pyöristetty tai ympyrämuoto, lisää täytettä tai taustaväri ja lataa koko paketti ZIP-tiedostona. Kaikki luodaan paikallisesti selaimessasi — kuvaasi ei koskaan ladata palvelimelle.

Yksityisyys edellä: jokainen kuva käsitellään paikallisesti selaimessasi. Mitään ei ladata palvelimelle, tallenneta tai lähetetä minnekään.

PixelVaultin favicon-generaattori muuttaa minkä tahansa kuvan täydelliseksi verkkosivu- ja sovelluskuvakesarjaksi lataamatta mitään palvelimelle. Useimmat ”favicon-generaattori”-sivustot pyytävät lähettämään logosi palvelimilleen ennen kuin saat ainuttakaan kuvaketta takaisin. Täällä jokainen tiedosto — monitarkkuuksinen favicon.ico, PNG-kuvakkeet ja manifesti — tuotetaan suoraan selaimesi sisällä, joten brändigrafiikkasi ei koskaan poistu laitteeltasi.

Nykyaikainen sivusto tarvitsee enemmän kuin yhden kuvakkeen. Selaimet lukevat pienen favicon.ico-tiedoston osoiteriville ja välilehtiin, iOS haluaa 180×180-kokoisen apple-touch-iconin aloitusnäytölle, ja Android sekä PWA:t käyttävät 192 ja 512 px:n PNG-kuvakkeita, joihin viitataan verkkomanifestista. PixelVault rakentaa ne kaikki kerralla yhdestä lähdekuvasta ja antaa sinulle valmiin HTML-pätkän liitettäväksi, joten kytkentä vie sekunteja.

Hallitset kuvakkeen ulkoasua. Pidä se tavallisena neliönä, pyöristä nurkat tai rajaa se ympyräksi; lisää täytettä, jottei sanamerkki puristu kiinni reunaan; ja valitse läpinäkyvä tai yhtenäinen tausta. Reaaliaikainen esikatselu näyttää tuloksen aidoissa favicon-koissa — mukaan lukien selainvälilehden mallinnus — joten tiedät tarkalleen, mitä kävijät näkevät ennen lataamista.

Näin se toimii

Kun lisäät kuvan, selain purkaa sen muistiin ja PixelVault piirtää sen uudelleen neliömäisille kankaille jokaisessa kuvakekoossa soveltaen valitsemaasi muotomaskia, täytettä ja taustaa. Jokainen kangas koodataan PNG:ksi selaimen sisäänrakennetulla koodaajalla, ja 16, 32 ja 48 px:n PNG-kuvakkeet kääritään yhdeksi favicon.ico-tiedostoksi (laajasti tuettu PNG-in-ICO-säiliö). SVG-logot rasteroidaan ensin paikallisesti suurella tarkkuudella, joten kuvakkeet pysyvät terävinä.

Miksi paikallisella käsittelyllä on merkitystä

Kuvakkeiden luominen paikallisesti tarkoittaa, ettei logoasi — usein julkaisematonta brändityötä — koskaan lähetetä, tallenneta tai kirjata lokiin kolmannen osapuolen palvelussa. Se on myös välitöntä: ei ole latausta palvelimelle, ei jonoa eikä latausedestakaisin, ja se toimii edelleen offline-tilassa, kun sivu on kerran latautunut. Se mitä lataat, on tarkalleen se mitä selaimesi tuotti, ilman mitään lisättyä.

Tuetut tiedostomuodot

  • ICO — Monitarkkuuksinen favicon.ico (16/32/48 px) välilehtiin ja osoiteriville.
  • PNG — Apple-touch-icon (180 px) sekä Android/PWA-kuvakkeet (192 ja 512 px).
  • SVG — Vain syötteenä — vektorilogot rasteroidaan paikallisesti terävimpiä kuvakkeita varten.
  • JPG / WebP — Hyväksytään lähdekuviksi PNG:n rinnalla.

Yleiset käyttötavat

  • Luo favicon.ico ja sovelluskuvakkeet uudelle sivustolle tai laskeutumissivulle.
  • Muunna PNG- tai SVG-logo kunnolliseksi monikokoiseksi ICO-tiedostoksi.
  • Generoi apple-touch-icon ja verkkomanifestin kuvakkeet PWA:lle.
  • Päivitä brändin favicon-sarja luovuttamatta logoa verkkopalvelulle.

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.