Favicon generatorius

Paverskite vieną PNG, JPG arba SVG failą į „favicon.ico“ ir visų kitų dydžių piktogramas, supakuotas į ZIP archyvą.

Nekvadratinis paveikslėlis

Matomas visas paveikslėlis, centruotas su paraštėmis aplink.

Fonas

Permatomas fonas puikiai tinka naršyklės skirtukams; „iPhone“ pagrindinio ekrano piktogramoms saugiau pasirinkti fono spalvą.

Jūsų piktogramų rinkinys

Čia pasirodys jūsų svetainės piktograma (favicon) ir piktogramų rinkinys.

Paruošta. Norėdami pradėti, pridėkite PNG, JPG arba SVG failą.

Jūsų paveikslėlis paverčiamas piktogramomis jūsų naršyklėje. Nieko neįkeliama į „BroBroGo“.

DUK

Kokie failai yra piktogramų rinkinyje?

„favicon.ico“ su 16, 32 ir 48 pikselių versijomis viduje, PNG piktogramos (16, 32, 180, 192 ir 512 pikselių) bei „site.webmanifest“ failas, kuriame išvardytos didžiosios piktogramos. Pradedant nuo SVG, įtraukiamas ir pats vektorinis failas. Viskas supakuota į vieną ZIP archyvą.

Kokio dydžio turėtų būti pradinis paveikslėlis?

SVG formatas yra idealus – kiekviena piktograma atkuriama iš vektoriaus, todėl išlieka ryški net esant 16 pikselių dydžiui. Naudojant PNG arba JPG, rekomenduojama pradėti nuo bent 512 × 512 px; mažesni paveikslėliai bus padidinti ir gali atrodyti neryškūs.

Ar fonas turėtų būti permatomas, ar spalvotas?

Skirtukų piktogramos puikiai atrodo su permatomu fonu. Tačiau „iPhone“ ir „iPad“ pagrindiniuose ekranuose permatomos sritys užpildomos juoda spalva – jei lankytojai gali pridėti jūsų svetainę prie pagrindinio ekrano, rekomenduojame pasirinkti fono spalvą.

Kas nutinka, jei pradinis paveikslėlis nėra kvadratas?

Piktogramos yra kvadratinės, tačiau jūsų paveikslėlis niekada nebus ištemptas. Pagal numatytuosius nustatymus jis yra centruojamas su paraštėmis aplink; pasirinkite „Užpildyti (apkirpti)“, kad vietoj to būtų nukirpti išsikišantys kraštai.

Kur svetainėje reikia įkelti šiuos failus?

Įkelkite juos į pagrindinį (root) svetainės aplanką, kad „favicon.ico“ būtų pasiekiamas adresu /favicon.ico, tada įklijuokite sugeneruotas eilutes į savo puslapių <head> dalį. Naršyklės pačios pasirinks tinkamą dydį.

Parašė ir peržiūrėjo BroBroGo redakcijos komanda.Paskutinį kartą atnaujinta:

Kas yra „Favicon generatorius“ ir kam jis skirtas

„Favicon generatorius“ yra nemokamas įrankis, kuris paima vieną jūsų pateiktą paveikslėlį ir paverčia jį piktogramų failų rinkiniu, tinkamu įvairiems tikslams svetainėje. Šis įrankis sugeneruoja naršyklės skirtukų piktogramas, „Apple touch“ piktogramas ir piktogramas, skirtas progresyviosioms žiniatinklio programoms (PWA). Visi sugeneruoti failai supakuojami į atsisiunčiamą ZIP archyvą, o vartotojui pateikiamas HTML kodo fragmentas, reikalingas šioms piktogramoms integruoti į svetainę.

Šis įrankis yra skirtas:

  • Svetainių kūrėjams, norintiems paversti esamą logotipą ar paveikslėlį į failus, reikalingus naršyklės skirtukams, „Apple touch“ piktogramoms ir „Android“ piktogramoms.
  • Visiems, kuriems reikalingas paruoštas naudoti failų paketas ir HTML kodas svetainės piktogramoms.
  • Vartotojams, norintiems sugeneruoti „favicon.ico“ ir pilną svetainės piktogramų rinkinį iš vieno PNG, JPG arba SVG failo.

Pradinio paveikslėlio reikalavimai ir nustatymai

Norint sugeneruoti kokybišką piktogramų rinkinį, svarbu atsižvelgti į pradinio failo formatą, dydį ir proporcijas. Įrankis palaiko šiuos nustatymus ir ribojimus:

  • Palaikomi formatai: Galima pateikti vieną PNG, JPG arba SVG paveikslėlį. Jei bandoma įkelti kitokį formatą, rodoma klaida „Palaikomi tik PNG, JPG ir SVG paveikslėliai.“. Jei failas nepasirinktas, rodomas pranešimas „Pirmiausia pasirinkite PNG, JPG arba SVG paveikslėlį.“.
  • Failo dydžio riba: Įkeliamas failas gali būti iki 50 MB. Viršijus šią ribą, rodoma klaida „Šis failas viršija 50 MB. Naudokite mažesnį pradinį paveikslėlį.“.
  • Rekomenduojamas dydis: Naudojant PNG arba JPG formatą, rekomenduojama pradėti nuo bent 512 × 512 pikselių dydžio. Jei įkeliamas mažesnis paveikslėlis, įrankis parodo įspėjimą „Mažas pradinis failas ({w} × {h} px): didelės piktogramos gali atrodyti neryškios. Geriausiems rezultatams naudokite 512 × 512 px ar didesnį paveikslėlį arba SVG.“. Taip nutinka todėl, kad mažesni paveikslėliai yra padidinami ir gali atrodyti neryškūs. Įkėlus paveikslėlį, įrankis parodo jo matmenis, pavyzdžiui, „{w} × {h} px“.
  • Nekvadratinių paveikslėlių pritaikymas: Piktogramos visada yra kvadratinės. Jei pradinis paveikslėlis nėra kvadratas, galima pasirinkti vieną iš dviejų pritaikymo būdų:
    • Talpinti (su paraštėmis): Visas paveikslėlis išlieka matomas, jis yra centruojamas, o aplink jį paliekamos paraštės. Tai yra numatytasis nustatymas nekvadratiniams paveikslėliams.
    • Užpildyti (apkirpti): Paveikslėlis užpildo kvadratą, o išsikišantys kraštai yra nukerpami.
  • Fono pasirinkimas:
    • Permatomas: Numatytasis nustatymas, kai piktograma neturi fono spalvos. Permatomas fonas puikiai tinka naršyklės skirtukams.
    • Spalva: Vartotojo pasirinkta fono spalva. Fono spalvą rekomenduojama pasirinkti „iPhone“ pagrindinio ekrano piktogramoms, nes permatomos sritys šiuose įrenginiuose yra užpildomos juoda spalva.

Sugeneruoti failai ir jų paskirtis

Sėkmingai sugeneravus piktogramas, paruošiamas ZIP archyvas, kuriame pateikiami šie failai:

  • favicon.ico: Klasikinė skirtuko piktograma, kurios viduje yra 16, 32 ir 48 pikselių versijos.
  • PNG piktogramos: Skirtingų dydžių failai, skirti įvairiems įrenginiams:
    • 16 ir 32 pikselių: PNG formato skirtukų piktogramos.
    • 180 pikselių: Skirta „iPhone“ ir „iPad“ pagrindiniam ekranui („Apple touch“ piktograma).
    • 192 ir 512 pikselių: Skirta „Android“ įrenginiams ir įdiegtoms programoms (PWA).
  • site.webmanifest: Nedidelis tekstinis failas, kuriame išvardytos didžiosios piktogramos ir kuris nurodo įrenginiams, kur jos yra.
  • Vektorinis failas: Jei pradinis failas buvo SVG formatu, pats vektorinis failas įtraukiamas į piktogramų rinkinį, užtikrinant jo ryškumą bet kokio dydžio ekrane.

Kaip įdiegti piktogramas svetainėje

Norėdami įdiegti sugeneruotas piktogramas savo svetainėje, atlikite šiuos veiksmus:

  1. Atsisiųskite sugeneruotą ZIP archyvą paspausdami mygtuką „Atsisiųsti ZIP“.
  2. Išpakuokite archyvą ir įkelkite visus jame esančius failus į pagrindinį (root) savo svetainės aplanką. Tai užtikrina, kad failas „favicon.ico“ bus pasiekiamas adresu /favicon.ico.
  3. Nukopijuokite pateiktą HTML kodo fragmentą paspausdami „Kopijuoti kodą“.
  4. Įklijuokite šį kodą į kiekvieno savo svetainės puslapio head dalį. Naršyklės ir įrenginiai automatiškai pasirinks ir naudos jiems tinkamo dydžio piktogramą.

Privatumas ir duomenų apdorojimas

Naudojantis šiuo įrankiu, jūsų privatumas yra visiškai saugomas. Jūsų įkeltas paveikslėlis yra paverčiamas piktogramomis tiesiogiai jūsų naršyklėje. Jokie failai ar duomenys nėra įkeliami į „BroBroGo“ serverius.

Galimos klaidos ir trikčių šalinimas

Generavimo proceso metu gali pasitaikyti šių klaidų:

  • „Šio failo nepavyko atidaryti kaip paveikslėlio. Jis gali būti sugadintas, tuščias arba tai nėra paveikslėlis.“: Šis pranešimas rodomas, jei įkeltas failas yra pažeistas arba neatpažįstamas kaip vaizdo failas.
  • „Nepavyko nuskaityti šio SVG failo. Patikrinkite, ar failas yra tinkamas SVG dokumentas.“: Ši klaida atsiranda, jei įkeltas SVG failas turi struktūrinių klaidų arba nėra suderinamas su standartu.
  • „Generavimas nepavyko. Bandykite kitą paveikslėlį.“: Bendro pobūdžio klaida, rodoma, kai piktogramų sukurti nepavyksta dėl nenumatytų pradinio failo problemų.

Dažniausiai užduodami klausimai (DUK)

Kokie failai yra piktogramų rinkinyje?

„favicon.ico“ su 16, 32 ir 48 pikselių versijomis viduje, PNG piktogramos (16, 32, 180, 192 ir 512 pikselių) bei „site.webmanifest“ failas, kuriame išvardytos didžiosios piktogramos. Pradedant nuo SVG, įtraukiamas ir pats vektorinis failas. Viskas supakuota į vieną ZIP archyvą.

Kokio dydžio turėtų būti pradinis paveikslėlis?

SVG formatas yra idealus – kiekviena piktograma atkuriama iš vektoriaus, todėl išlieka ryški net esant 16 pikselių dydžiui. Naudojant PNG arba JPG, rekomenduojama pradėti nuo bent 512 × 512 px; mažesni paveikslėliai bus padidinti ir gali atrodyti neryškūs.

Ar fonas turėtų būti permatomas, ar spalvotas?

Skirtukų piktogramos puikiai atrodo su permatomu fonu. Tačiau „iPhone“ ir „iPad“ pagrindiniuose ekranuose permatomos sritys užpildomos juoda spalva – jei lankytojai gali pridėti jūsų svetainę prie pagrindinio ekrano, rekomenduojame pasirinkti fono spalvą.

Kas nutinka, jei pradinis paveikslėlis nėra kvadratas?

Piktogramos yra kvadratinės, tačiau jūsų paveikslėlis niekada nebus ištemptas. Pagal numatytuosius nustatymus jis yra centruojamas su paraštėmis aplink; pasirinkite „Užpildyti (apkirpti)“, kad vietoj to būtų nukirpti išsikišantys kraštai.

Kur svetainėje reikia įkelti šiuos failus?

Įkelkite juos į pagrindinį (root) svetainės aplanką, kad „favicon.ico“ būtų pasiekiamas adresu /favicon.ico, tada įklijuokite sugeneruotas eilutes į savo puslapių head dalį. Naršyklės pačios pasirinks tinkamą dydį.

Paveikslėlių dydžio keitiklisKeiskite paveikslėlių dydį pagal pikselius, procentus arba paruoštus šablonus – vienam vaizdui arba visai grupei.Paveikslėlių apkirpimo įrankisApkirpkite, pasukite ir apverskite paveikslėlį iki bet kokios formos – laisvo stačiakampio, fiksuoto santykio ar švaraus apskritimo.Nuotraukų suspaudimasSumažinkite JPEG, PNG ir WebP failus naršyklėje, nekeisdami pikselių dydžio.Vandens ženklų uždėjimasUždėkite teksto arba logotipo vandens ženklą ant vienos nuotraukos arba visos jų grupės iškart.Paveikslėlių formatų konverterisKonvertuokite JPG, PNG, WebP, HEIC ir AVIF paveikslėlius tiesiog savo naršyklėje.Base64 paveikslėlių keitiklisNutempkite paveikslėlį, kad gautumėte jo Base64 data URI, arba įklijuokite Base64 kodą, kad peržiūrėtumėte ir atsisiųstumėte paveikslėlį.DI alternatyvaus teksto generatoriusPaverskite bet kurį paveikslėlį aiškiu, SEO optimizuotu alternatyviuoju tekstu – redaguokite ir nukopijuokite.Spalvų konverterisKonvertuokite spalvas tarp HEX, RGB, HSL, HSV, CMYK ir LAB – redaguokite bet kurį lauką, o kiti atsinaujins automatiškai.