Kunnollinen favicon-sarja on enemmän kuin yksi tiedosto: selaimet haluavat monikokoisen .ico-tiedoston, iOS haluaa 180 px:n apple-touch-iconin, Android haluaa 192 ja 512 px:n PNG:t sekä web-manifestin. Tämä työkalu renderöi ne kaikki yhdestä kuvasta ja pakkaa ne yhteen ZIP-tiedostoon täsmällisten HTML-tagien kera, jotka liität <head>-osioosi.
Esikatselu näyttää kuvakkeesi todellisissa 16, 32 ja 48 px:n koossa, joten voit varmistaa sen pysyvän tunnistettavana pienissä koossa ennen julkaisua.
Käyttöohje
- Lisää logosiNeliömäiset kuvat toimivat parhaiten; muut rajataan keskeltä.
- Tarkista pienet koot16 px:n esikatselu on se, minkä useimmat käyttäjät oikeasti näkevät välilehdessä.
- Lataa ZIPfavicon.ico, kuusi PNG:tä, site.webmanifest ja liittämisvalmis html-snippet.txt.
Yksi kuva sisään, täysi favicon-sarja ulos
Pudota sisään yksi logo tai kuvake, ja tämä generaattori rakentaa kokonaisen sarjan, jonka moderni sivusto tarvitsee: monikokoisen favicon.ico:n, joka niputtaa 16, 32 ja 48 pikselin versiot, erilliset PNG:t kooissa 16, 32, 48, 180 Apple touch -kuvaketta varten sekä 192 ja 512 Androidia ja PWA-asennuksia varten, ja lisäksi site.webmanifestin. Kaikki tulee alas yhtenä ZIPinä, jonka voit pudottaa suoraan projektisi juureen.
Saat myös valmiin liitettävän HTML-head-katkelman, jossa oikeat link- ja meta-tunnisteet on jo kytketty. Kopioi se pohjaasi, lataa tiedostot, ja favicon näkyy selainvälilehdillä, kirjanmerkeissä ja aloitusnäytön pikakuvakkeissa ilman käsin kirjoitettua merkkausta.
Terävät kuvakkeet joka koossa
Faviconit ovat armottoman pieniä, joten generaattori renderöi todelliset esikatselut 16, 32 ja 48 pikselin koossa – täsmälleen niin kuin selainvälilehti ne näyttää. Näin huomaat 16 pikselissä puuroutuvan logon ennen julkaisua. Jos lähdekuvasi ei ole neliö, työkalu rajaa sen keskitetysti, jolloin kuvake pysyy tasapainoisena eikä litisty.
Koko prosessi toimii selaimessa alkuperäisestä kuvastasi, mikä tarkoittaa, että voit tuottaa favicon-PNG:t ja ICO:n korkearesoluutioisesta logosta ilman latausta tai tiliä.
Mihin sitä käytetään
Uuden sivuston julkaisu — Tuota favicon.ico ja jokainen PNG-koko yhdellä ajolla, jotta välilehdet ja kirjanmerkit näyttävät viimeistellyiltä heti ensimmäisenä päivänä.
PWA-asennuskuvakkeen lisäys — Vie 192- ja 512-PNG:t sekä site.webmanifest, jotta sovelluksesi asentuu kunnollisella aloitusnäytön kuvakkeella.
Apple touch -kuvake — Tuota 180x180-kokoinen apple-touch-icon, jotta iOS:n kirjanmerkit ja aloitusnäytöt näyttävät terävän laatan.
Olemassa olevan sivuston uudelleenbrändäys — Aja yksi uusi logo generaattorin läpi ja vaihda koko kuvakesarja kerralla.
Asiakasluovutus — Luovuta yksi ZIP, jossa on ico, PNG:t, manifest ja head-katkelma, jotta kehittäjä vain pudottaa sen paikalleen.
Pienen koon luettavuuden tarkistus — Käytä todellisen koon 16 pikselin esikatselua varmistaaksesi, että yksityiskohtainen logo toimii yhä kuvakkeena.
Ei-neliömäinen logo — Syötä leveä sanamerkki ja anna keskirajauksen muuttaa se tasapainoiseksi neliöfaviconiksi.
Staattinen sivusto tai framework-projekti — Kopioi tuotetut head-tunnisteet Next-, Astro- tai tavalliseen HTML-pohjaasi ja julkaise.
Miksi tools.faxianai.com
Täydellinen sarja
ICO + 16/32/48/180/192/512 PNG:t + manifest.
Kopioi ja liitä HTML
Täsmälliset link-tagit mukana tekstitiedostona.
Todellisen koon esikatselu
Näe kuvake ensin aidossa 16/32/48 px:n koossa.
Yksityinen
Logosi ei koskaan poistu selaimesta.