§

Pakia picha

PNG, JPEG, WebP — hadi MB 10.

Kukusanya seti ya favicon kwa tovuti mpya kunahitaji kufungua programu ya picha, kusafirisha PNG sita, kuandika lebo za kwa mkono, na kutumaini ukubwa unalingana. Zana hii inakunja mchakato katika hatua moja: weka picha au chapa neno au emoji, chagua fonti na rangi, na upate kila ukubwa wa favicon pamoja na HTML ya na kipande cha manifest kwenye ZIP. Mbinu ni ya kivinjari pekee — Canvas API inashughulikia kila badiliko la ukubwa, na fflate inafunga kifurushi kwenye kumbukumbu. Hakuna kinachopakiwa kwenye seva, hivyo inafanya kazi kwenye mashine za kampuni zilizofungwa. Favicon ni PNG za kawaida zinazofanya kazi kwenye kila kivinjari kinachotumia , na ikoni za Apple Touch na PWA ziko tayari kwa tovuti ya uzalishaji.

// Zana Zinazohusiana

./image-format-converter
Kibadilishi cha Muundo wa Picha
Badilisha picha za PNG, JPEG, na WebP ndani ya kompyuta — hakuna kupakia, inasaidia kwa wingi.
→
./image-compressor
Kibani cha Picha
Bana picha za JPEG, PNG, na WebP ndani ya kompyuta — ubora au ukubwa lengwa, hakuna kupakia.
→
./image-resizer
Kibadilishi cha Ukubwa wa Picha
Badilisha ukubwa wa picha kwa pikseli, asilimia, au upande mrefu — hakuna kupakia, inasaidia kwa wingi.
→
./
Zana Zote
Vinjari mkusanyiko kamili wa zana za mtandaoni za Ultim8Soft.
→

Jinsi uundaji wa favicon kwenye kivinjari unavyofanya kazi

Mchakato mzima wa uundaji unafanyika ndani ya kichupo cha kivinjari chako kwa kutumia Canvas API na maktaba ya kubania ya fflate. Hakuna usindikaji wa seva, hakuna upakiaji, hakuna huduma za watu wengine.

  1. Pakia picha yako chanzo au toa maandishi au emoji kwenye turubai isiyoonekana kwa mwonekano wa juu. Ukipakia picha, inasimbuliwa na kivinjari. Ukitumia hali ya maandishi, ukurasa unachora neno lako kwenye turubai kwa fonti uliyochagua, rangi ya maandishi na rangi ya mandhari.
  2. Kwa kila ukubwa lengwa (16, 32, 48, 180, 192, 512 pikseli), ukurasa unaunda turubai mpya isiyoonekana kwa kipimo husika, kisha inachora maudhui chanzo juu yake kwa kutumia Canvas API. Upangaji upya wa picha wa kivinjari unashughulikia upunguzaji kwa kuchuja bilinear au bicubic kiotomatiki, ikitoa favicon kali kwa kila ukubwa.
  3. Kila turubai inasafirishwa kwa PNG Blob kupitia canvas.toBlob(). Paneli ya kukagua inakuonyesha ukubwa wote sita ili uweze kukagua matokeo kabla ya kupakua. Kipande cha HTML cha na kipande cha manifest (manifest.json) kinaundwa kutoka kwa majina ya faili ili uweze kuziweka moja kwa moja kwenye tag ya head ya tovuti yako.
  4. Unapobofya Pakua ZIP, ukurasa unasoma kila PNG Blob kwenye kumbukumbu, hutumia fflate kuzifunga pamoja na faili la manifest.json kwenye kumbukumbu moja ya ZIP, na kuanzisha upakuaji kwa mbofyo mmoja. Kifurushi chote kinaundwa kwenye kivinjari chako — hakuna kinachopakiwa kwa seva wakati wowote.

Kwa nini uunde favicon kwenye kivinjari chako?

  • Seti kamili ya favicon huondoa hitilafu 404 ya kivinjari wakati wa kutembelea kwa mara ya kwanza na kuhakikisha tovuti yako inaonekana kitaalamu kwenye alamisho, vichupo vya kivinjari, na skrini za ufungaji wa PWA. Ukubwa uliokosekana unamaanisha kivinjari hakiwezi kuonyesha chochote au inatumia ukubaji wa karibu jirani uliovurugika.
  • HTML ya iliyojumuishwa na kipande cha manifest vinakuokoa kutoka kwa kuandika kwa mkono lebo sita za na kipande cha JSON cha manifest. Bandika kwenye head ya tovuti yako, rekebisha njia ikibidi, na utamaliza kwa sekunde badala ya dakika.
  • Uundaji wa upande wa mteja ndio chaguo pekee kwenye vifaa vya kampuni vilivyofungwa ambavyo havina kihariri cha picha. Kwa sababu hakuna kinachopakiwa, hakuna hatari ya uvujaji wa data na hakuna uhakiki wa uzingatiaji unaohitajika kwa picha nyeti au zenye chapa.
  • Hali ya maandishi na emoji inakuwezesha kuunda favicon bila picha kabisa. Chapa herufi ya kwanza ya chapa yako, herufi, au emoji, chagua fonti na rangi, na upate seti kamili — inafaa kwa miradi ya kibinafsi, prototypes, au tovuti zinazohitaji favicon ya muda sasa.

Matumizi ya kawaida ya uundaji wa favicon

Kila tovuti ambayo watu huweka alamisho au kusakinisha inahitaji favicon. Hapa kuna mifano mitatu ambapo kizaa cha kivinjari kinaokoa muda.

  • Kuanzisha ukurasa mpya wa kutua au tovuti ndogo. Undas seti kamili ya favicon kutoka kwa nembo ya chapa kwa chini ya dakika moja, nakili lebo za kwenye head ya tovuti, na usambaze. Hakuna zana ya kubuni inayohitajika.
  • Kuzalisha ikoni za PWA kwa programu ya wavuti inayoendelea. PNG za 192×192 na 512×512 zinahitajika kwa manifest.json. Zizalisha pamoja na seti nzima ya favicon kwa hatua moja badala ya kubadilisha ukubwa wa nembo kwa mkono.
  • Kuunda vijazo kwa prototypes na tovuti za majaribio. Chapa herufi moja au emoji, chagua rangi ya mandhari, na upate favicon za kweli bila kusubiri rasilimali za mwisho za chapa kutoka kwa timu ya kubuni.

Mfano uliofanyiwa kazi: kutengeneza seti ya favicon kutoka nembo ya kampuni

Una nembo ya PNG 500×500 na unahitaji seti kamili ya favicon kwa tovuti mpya ya masoko.

Fungua ukurasa huu na uweke nembo ya PNG kwenye eneo la kupakia. Picha inapakia na onyesho la kukagua linaonekana pamoja na gridi ya ukubwa. Bofya Undas favicon. Ukurasa unachora nembo kwenye turubai sita zisizoonekana kwa 16, 32, 48, 180, 192, na 512 pikseli na kukuonyesha kila matokeo. Chini ya paneli ya kukagua, kipande cha HTML cha kilicho tayari kinaonekana chenye viingilio vya rel=\"icon\" kwa ukubwa 16/32/48, kiungo cha apple-touch-icon kwa ukubwa 180 na kiungo cha manifest kwa ikoni za PWA. Kipande cha manifest chini kinaorodhesha ikoni 192 na 512. Bofya Pakua ZIP — ukurasa unafunga PNG zote sita pamoja na manifest.json kwenye kumbukumbu moja ya ZIP kupitia fflate. Mzunguko mzima unachukua sekunde mbili na hautumii mtandao zaidi ya upakuaji wa awali wa ukurasa.

Ni ukubwa gani wa favicon unaotolewa na zana hii?

Ukubwa sita: 16×16, 32×32, na 48×48 kwa favicon za kawaida za kivinjari, 180×180 kwa Apple Touch Icon, na 192×192 na 512×512 kwa ikoni za PWA manifest. Kila ukubwa unatolewa kama PNG. Vivinjari vya kisasa vinakubali favicon za PNG kupitia .

Naweza kuunda favicon kutoka maandishi au emoji?

Ndiyo. Badilisha kwa hali ya maandishi au emoji, chapa neno au bandika emoji, chagua fonti, rangi ya maandishi na rangi ya mandhari, na bofya Undas. Maandishi yanachorwa kwenye turubai isiyoonekana kwa mwonekano wa juu kisha ukubwa wake unab adilishwa kwa kila ukubwa lengwa wa favicon.

Je, picha inapakiwa kwa seva?

Hapana. Picha haitoki kwenye kifaa chako. Ukurasa unatumia File API ya kivinjari kusoma picha kwenye kumbukumbu na Canvas API kubadilisha ukubwa na kusafirisha kila favicon. Fungua paneli ya Network kwenye DevTools wakati wa uundaji — maombi pekee yanayotoka ni upakuaji wa awali wa ukurasa na wito wa matangazo. Hakuna data ya picha inayotumwa.

Ni fomati gani zinazokubaliwa kwa upakiaji wa picha?

Fomati yoyote ambayo kivinjari kinaweza kusimbua: PNG, JPEG, WebP, GIF, na SVG (inayobadilishwa kuwa raster na kivinjari). Kikomo cha ukubwa wa faili ni MB 10 kwa kila upakiaji.

Upakuaji wa ZIP unafanya kazi vipi?

Ukurasa unatumia maktaba ya fflate (inayopakiwa inapohitajika kutoka kwa njia ya wauzaji) kufunga PNG zote zilizoundwa pamoja na manifest.json kwenye kumbukumbu moja ya ZIP. Ufungaji unafanyika kabisa kwenye kumbukumbu ya kivinjari — hakuna upakiaji, hakuna mwendo wa seva. ZIP inatumwa kama upakuaji wa Blob kwa mbofyo mmoja.

Naweza kutumia favicon hizi kwenye tovuti yoyote?

Ndiyo. Favicon za PNG zilizoundwa zinafanya kazi kwenye kila kivinjari cha kisasa kinachotumia lebo ya . Apple Touch Icon 180×180 inafanya kazi kwenye iOS na Safari. Ikoni za PWA 192×192 na 512×512 zinakidhi mahitaji ya manifest kwa Chrome kwenye Android na vivinjari vingine vinavyotumia PWA.

Kuna chaguo la fomati halisi ya .ico?

Toleo la sasa linatoa PNG kwa sababu kila kivinjari cha kisasa kinazikubali kupitia . Fomati halisi ya .ico yenye mwonekano mbalimbali bado haitumiki na inaweza kuongezwa katika toleo la baadaye.