SVG į favicon generatorius

Įkelkite vieną SVG logotipą ir gaukite viską, ko reikia šiuolaikinei svetainei: tinkamą daugelio skiriamųjų gebų favicon.ico, PNG piktogramas kiekvienu dydžiu, kurio iš tikrųjų prašo naršyklės ir telefonai, bei HTML <link> žymas, kurias reikia įklijuoti į savo <head>. Visas atvaizdavimas vyksta jūsų naršyklėje — SVG niekada nepalieka jūsų įrenginio.

Kas yra šis įrankis?

favicon.ico nėra tiesiog mažas paveikslėlis — tai konteinerio formatas, galintis viename faile talpinti kelis to paties ženkliuko dydžius, kad naršyklė, užduočių juosta ar žymelių juosta galėtų pasirinkti tą skiriamąją gebą, kuri atrodys ryškiausiai konkrečioje vietoje. PNG pervadinimas į favicon.ico to nesukuria: tai vienas paveikslėlis su netinkamu failo plėtiniu, ir nors kai kurios naršyklės tai toleruoja, daugybė įrankių, robotų ir senesnių naršyklių, skaitančių žalius baitus, tikisi tikros ICO konteinerio struktūros ir nepavyks arba grįš prie tuščios piktogramos.

Šis įrankis sukuria tikrą ICO konteinerį: jis atvaizduoja jūsų SVG dydžiais 16×16, 32×32 ir 48×48, viduje kiekvieną užkoduoja kaip PNG, ir supakuoja visus tris į vieną galiojantį favicon.ico, naudodamas tą patį PNG-ICO formatą, kurį palaiko kiekviena naršyklė ir OS nuo „Windows Vista“ laikų. Kartu gaunate atskirus PNG failus 180×180 dydžio (kurį iOS naudoja piktogramai, kai kas nors prideda jūsų svetainę į pagrindinį ekraną) ir 192×192 / 512×512 dydžio (kuriuos „Android“ ir PWA diegimo raginimai paima iš jūsų žiniatinklio programos manifesto).

Kodėl jį naudoti?

Sukuria tikrai galiojantį daugelio skiriamųjų gebų favicon.ico, o ne pervadintą PNG.
Vienu žingsniu apima kiekvieną piktogramos dydį, reikalingą realiam diegimui: 16, 32, 180, 192, 512px.
Paruošta įklijuoti <head> HTML žyma — jokio spėliojimo dėl rel/sizes/type atributų.
Ne kvadratiniai SVG centruojami ant skaidraus kvadrato, o ne ištempiami.
Viskas atvaizduojama vietoje jūsų naršyklėje; SVG niekada neįkeliamas.

Kaip naudoti

Spustelėkite laukelį arba numeskite ant jo savo SVG logotipo failą.
Įrankis automatiškai atvaizduoja jį kiekvienu favicon dydžiu — jokių nustatymų konfigūruoti nereikia.
Atsisiųskite favicon.ico savo svetainės šakniniam aplankui, plius atskiras PNG piktogramas.
Nukopijuokite HTML fragmentą ir įklijuokite jį į savo puslapio <head>.

Pavyzdys

Įvestis

logo.svg — įmonės ženklas, 3 KB vektorius

Išvestis

favicon.ico (16/32/48px sujungta), plius favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.png

Vienas SVG įkeliamas, visi realiam diegimui reikalingi piktogramų failai gaunami.

Kur naudojamas kiekvienas piktogramos dydis

Failas	Dydis	Naudojamas
favicon.ico	16/32/48px (sujungta)	Naršyklės skirtukas, žymelių juosta, užduočių juosta
favicon-16.png / favicon-32.png	16×16 / 32×32	Atsarginis variantas naršyklėms, kurios pirmenybę teikia PNG favicon
apple-touch-icon.png	180×180	iOS pagrindinio ekrano piktograma, kai svetainė pridedama prie pagrindinio ekrano
icon-192.png	192×192	„Android“ pagrindinio ekrano piktograma, žiniatinklio programos manifestas
icon-512.png	512×512	PWA diegimo raginimas, „Android“ paleidimo ekrano piktograma

Kodėl svarbus SVG šaltinis

Kadangi SVG saugo figūras kaip matematiką, o ne pikselius, jo naujas atvaizdavimas 16px ir 512px dydžiu abu prasideda nuo tų pačių tikslių kelio duomenų — dideliame gale nėra didinimo artefaktų, o mažame gale įrankiui nereikia daryti prievartinio pikselių pritaikymo spėlionių kompromisų. Jei turite tik PNG logotipą, šis pats įrankis nepadės; pirmiausia konvertuokite ar iš naujo sukurkite logotipą kaip SVG, nes mažo PNG didinimas iki 512px tiesiog duotų neryškų rezultatą.

→ SVG konverteris

Dažniausiai užduodami klausimai

Kodėl tiesiog nepervadinus PNG į favicon.ico?

Failas .ico turi savo dvejetainį konteinerio formatą (ICONDIR antraštę, aprašančią, kiek paveikslėlių jis talpina, po kurios seka kiekvieno paveikslėlio katalogo įrašas) — PNG failas, pervadintas į .ico, viduje tebėra tik PNG su netinkamu plėtiniu. Dauguma šiuolaikinių naršyklių yra atlaidžios ir vis tiek jį atvaizduos, bet šis įrankis sukuria tikrą ICO konteinerį su trimis realiomis skiriamosiomis gebomis — tam formatas ir buvo sukurtas, ir to tikisi griežtesni skaitytuvai.

Kodėl man reikia PNG piktogramų, jei jau turiu favicon.ico?

favicon.ico apima tik klasikinį naršyklės skirtuko/žymelių naudojimo atvejį. 180×180 PNG naudoja iOS, kai vartotojas prideda jūsų svetainę į pagrindinį ekraną (apple-touch-icon), o 192×192 / 512×512 PNG naudoja „Android“ ir PWA diegimo raginimai, imdami juos iš jūsų žiniatinklio programos manifesto. Be jų, jūsų piktograma telefono pagrindiniame ekrane grįš prie bendrinės nuotraukos ar tuščio kvadrato.

Mano logotipas nėra kvadratinis — kas jam nutinka?

Jis centruojamas ant skaidraus kvadrato kiekvienu tiksliniu dydžiu, o ne ištempiamas, tad platus ar aukštas logotipas išlaiko teisingas proporcijas, o ne suspaudžiamas į kvadratą.

Kur turėčiau įdėti atsisiųstus failus?

Įdėkite favicon.ico, apple-touch-icon.png, icon-192.png ir icon-512.png į savo svetainės šakninį aplanką (šalia index.html), tada įklijuokite sugeneruotas <link> žymas į savo puslapio <head>.

Ar mano SVG kur nors įkeliamas?

Ne. SVG atvaizduojamas ant vietinių <canvas> elementų, o ICO/PNG failai surenkami jūsų naršyklėje. Niekas nesiunčiama į serverį.