Kaip sukurti favicon iš savo logotipo?

Įkelkite PNG, JPEG, WebP ar SVG failą, nustatykite parinktis, pavyzdžiui, formą, tarpą ir programos pavadinimą, tada spustelėkite Generuoti favicon paketą (.zip). Nukopijuokite HTML fragmentą, rodomą skiltyje Įklijuokite į head.

Kokie failai yra favicon ZIP archyve?

favicon-package.zip turi favicon.ico, PNG piktogramas (16, 32, 180, 192 ir 512 pikselių), site.webmanifest su jūsų programos pavadinimu ir favicon-snippet.html su link žymėmis.

Kokio dydžio ir formato vaizdą turėčiau įkelti?

Priimami PNG, JPEG, WebP ir SVG, po vieną failą. Ryškiausiam rezultatui naudokite kvadratinį mažiausiai 512x512 vaizdą; geriausiai tinka skaidrus PNG ar SVG.

Kaip gauti apvalų ar suapvalintą favicon?

Įkėlę pasirinkite Kvadratas, Suapvalintas arba Apskritimas skiltyje Forma. Taip pat galite reguliuoti tarpą nuo 0 iki 25 procentų ir peržiūrėti rezultatą naršyklės skirtuko peržiūroje.

Ar mano vaizdas įkeliamas į serverį ir kodėl generavimas nepavyksta?

Piktogramos nupaišomos naudojant naršyklės Canvas ir supakuojamos su JSZip jūsų įrenginyje. Jei matote Nepavyko įkelti šio vaizdo, failas gali būti sugadintas; išbandykite kitą vaizdą ar naršyklę.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar mano failai keliami į serverį?

Ne. Failai atidaromi ir apdorojami jūsų naršyklėje ir nesiunčiami į LibraTool. Kai kurie įrankiai pirmiausia atsisiunčia į naršyklę apdorojimo variklį ar DI modelį; šiame atsisiuntime nėra jūsų duomenų.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia. Labai dideli failai telefone gali veikti lėtai arba pritrūkti atminties, todėl jiems naudokite kompiuterį.

🌟

Favikono generatorius nemokamai

Paverskite bet kurį vaizdą visu favicon paketu: kelių dydžių favicon.ico, Apple touch piktograma, Android/PWA piktogramomis, žiniatinklio manifestu ir paruoštu įklijuoti HTML fragmentu — viskas suarchyvuota, jūsų naršyklėje.

Failo dydis priklauso nuo jūsų įrenginioFailai lieka privatūsPrisijungimo nereikiaNemokamai amžinai

Nuvilkite failą čia arba spustelėkite, kad pasirinktumėte

PNG, JPG, WebP, SVG, HEIC, HEIF · apdorojama jūsų įrenginyje

arba paspauskite Ctrl+V, kad įklijuotumėte iš iškarpinės

Naršyti failus

Jūsų failai niekada nepalieka jūsų įrenginio. Visas apdorojimas vyksta vietiškai jūsų naršyklėje.

💡 Geriausiam rezultatui įkelkite kvadratinį vaizdą bent 512×512. Permatomas PNG arba SVG tinka geriausiai.

Dažniausi naudojimo būdai

Sukurkite Svetainės FaviconSukurkite visą favicon rinkinį, kurį tikisi kiekvienas naršyklė ir įrenginys.
Sukurkite PWA ir Manifest PiktogramasGaukite 192px ir 512px piktogramas bei žiniatinklio manifestą, kurio reikia PWA.
Sukurkite Apple Touch PiktogramąSukurkite 180×180 pikselių piktogramą, kurią naudoja iOS, kai svetainė išsaugojama pagrindiniame ekrane.
Konvertuokite Logo į FaviconKonvertuokite savo prekės logotipą į švarų, atpažįstamą favicon.
Sukurkite Favicon Bet Kuriai SistemaiGaukite failus favicon, paruoštus naudoti React, Next.js, WordPress ir dar daugiau.

Kaip tai veikia

Šis įrankis konvertuoja bet kokį PNG, JPEG, WebP ar SVG į pilną favicon paketą — kelių dydžių .ico, Apple touch piktogramą, Android/PWA piktogramas, žiniatinklio manifestą ir paruoštą įklijuoti HTML fragmentą — visiškai jūsų naršyklėje, naudojant Canvas API ir JSZip. Niekas neįkeliama; visas atvaizdavimas ir failų surinkimas vyksta vietoje.

1
Canvas keičia jūsų paveikslėlio mastelį
Naršyklė nupiešia jūsų šaltinio paveikslėlį ekrane nematomuose HTML Canvas elementuose kiekvienu reikiamu dydžiu (16, 32, 48, 180, 192 ir 512 px). SVG failai be aiškių pločio/aukščio atributų pirmiausia normalizuojami per DOMParser ir XMLSerializer, kad „Firefox“ ir „Chrome“ sukurtų identišką pikselinę išvestį, o ne tuščią drobę.
2
Rankomis parašytas ICO koduoklis supakuoja .ico failą
Maži ICO įrašai (16, 32, 48 px) koduojami kaip neapdoroti 32 bitų BGRA DIB rastriniai vaizdai — BITMAPINFOHEADER plius apačia-viršus XOR eilutės ir 1 bito AND kaukė — nes Windows apvalkalo komponentams tokiais dydžiais reikia nesuspausto DIB formato. Įrankis parašo ICO katalogo antraštę ir sujungia įrašus visiškai naudodamas DataView ir Uint8Array, be jokios išorinės ICO bibliotekos.
3
PNG išvestys sukuriamos per canvas.toBlob
Kiekvienas PNG variantas (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) užfiksuojamas iškviečiant canvas.toBlob su „image/png“, be nuostolių kodavimą pavedant naršyklės įtaisytam vaizdo varikliui. Pasirenkamas užpildas, fono spalva ir formos apkirpimas (kvadratas, suapvalintas ar apskritimas) taikomi drobės kontekstui prieš fiksuojant.
4
JSZip sujungia viską į vieną atsisiuntimą
JSZip surenka visus sugeneruotus failus — favicon.ico, penkis PNG failus, site.webmanifest su jūsų programėlės pavadinimu ir favicon-snippet.html su teisingomis <link> žymomis — į vieną .zip blob'ą, kuris automatiškai atsisiunčiamas į jūsų įrenginį.

Jūsų paveikslėlis įkeliamas tiesiai į naršyklės Canvas API ir niekada nepalieka jūsų įrenginio — jokiu metu jokie failo duomenys neperduodami jokiam serveriui.

Susiję įrankiai

🖼️

PNG į ICO favikono konverteris

Konvertuokite PNG, JPG, WebP ar SVG vaizdus į kelių dydžių .ico favikono failus. Pasirinkite norimus dydžius (16, 32, 48, 64, 128, 256) ir atsisiųskite vieną .ico failą.

IšbandykiteFailai lieka vietiškai

🎞️