Samar da saitin favicon _

Yadda samar da favicon ke aiki a cikin mai bincike

Dukkan tsarin samarwa yana gudana a cikin shafin mai bincikenku ta amfani da Canvas API da ɗakin karatu na fflate. Babu sarrafawa ta uwar garken, babu loda, babu sabis na wasu kamfanoni.

1. Loda hotonku na asali ko fitar da rubutunku ko emoji akan wani zane mara gani a babban ƙuduri. Idan kun zaɓi hoto, mai bincike ne ke ɓoye shi ta asali. Idan kun zaɓi yanayin rubutu, shafin yana zana kalmarku akan zane tare da font da kuka zaɓa, launin rubutu, da launin bango.
2. Ga kowane girman manufa (16, 32, 48, 180, 192, 512 pixels), shafin yana ƙirƙirar sabon zane mara gani a wannan girman daidai, sannan yana zana abun ciki na asali akansa ta amfani da Canvas API. Mai bincike ne ke gudanar da canjin girma ta tacewa bilinear ko bicubic ta atomatik, yana samar da favicon mai kaifi a kowane girman.
3. Kowane zane ana fitar dashi zuwa PNG Blob ta hanyar canvas.toBlob(). Bangaren dubawa yana nuna muku dukkan girma shida don ku iya duba sakamakon kafin saukewa. Guntun HTML na a shirye da guntun manifest (manifest.json) ana gina su daga sunayen fayiloli don ku iya jefa su kai tsaye cikin alamar head ta shafinku.
4. Lokacin da kuka danna Sauke ZIP, shafin yana karanta kowane PNG Blob cikin ƙwaƙwalwa, yana amfani da fflate don tattara su tare da fayil ɗin manifest.json cikin kundin ZIP guda ɗaya, kuma yana fara saukewa da dannawa ɗaya. Ana gina dukkan kundin a cikin mai bincikenku — babu abin da ake lodawa ga uwar garken a kowane mataki.

Me yasa za a samar da favicon a cikin mai bincikenku?

• Cikakken saitin favicon yana kawar da kuskuren 404 na mai bincike akan ziyarar farko kuma yana tabbatar da shafinku yana da ƙwararrun bayyanuwa a cikin alamomi, shafukan mai bincike, da allon shigar da PWA. Girman da ya ɓace yana nufin mai bincike ko dai baya nuna komai ko kuma yana amfani da girman maƙwabci mafi kusa mara kyau.
• HTML na da aka haɗa da guntun manifest suna ceton ku daga rubuta alamomin shida da guntun JSON na manifest da hannu. Manna su cikin head na shafinku, daidaita hanyoyin idan an buƙata, kuma kun gama cikin daƙiƙa maimakon mintuna.
• Samarwa ta gefen abokin ciniki shine kawai zaɓi akan na'urorin kamfani da aka kulle waɗanda ba su da mai gyara hoto. Domin babu abin da ake lodawa, babu haɗarin fitar da bayanai kuma babu bitar yarda da ake buƙata don hotuna masu mahimmanci ko masu alama.
• Yanayin rubutu da emoji yana ba ku damar samar da favicon ba tare da wani hoto ba. Rubuta harafin farko na alamar ku, harafi, ko emoji, zaɓi font da launi, kuma sami cikakken saiti — cikakke don ayyuka na sirri, samfuri, ko shafuka waɗanda ke buƙatar favicon na ɗan lokaci yanzu.

Aikace-aikacen samar da favicon na yau da kullun

Kowane shafi da mutane ke yiwa alama ko kafawa yana buƙatar favicon. Ga yanayi uku inda mai samar da mai bincike ke ceton lokaci.

• Ƙirƙirar sabon shafin saukowa ko ƙaramin shafi. Samar da cikakken saitin favicon daga tambarin alama a ƙasa da minti ɗaya, kwafi alamomin cikin head na shafin, kuma tura. Babu kayan aikin ƙira da ake buƙata.
• Samar da ikon PWA don aikace-aikacen yanar gizo mai ci gaba. PNG 192×192 da 512×512 ana buƙata don manifest.json. Samar da su tare da saitin favicon gaba ɗaya a mataki ɗaya maimakon canza girman tambari da hannu.
• Ƙirƙirar abubuwan cikawa don samfuri da shafukan gwaji. Rubuta harafi ɗaya ko emoji, zaɓi launin bango, kuma sami favicon na gaske ba tare da jiran kayan alama na ƙarshe daga ƙungiyar ƙira ba.

Misali: samar da saitin favicon daga tambarin kamfani

Kuna da tambarin PNG 500×500 kuma kuna buƙatar cikakken saitin favicon don sabon shafin talla.

Buɗe wannan shafin kuma jefa tambarin PNG cikin yankin loda. Hoto yana lodawa kuma bayanin dubawa ya bayyana tare da grid ɗin girma. Danna Samar da favicon. Shafin yana zana tambarin akan zane guda shida marasa gani a 16, 32, 48, 180, 192, da 512 pixels kuma yana nuna muku kowane sakamako. Ƙarƙashin bangaren dubawa, guntun HTML na a shirye yana bayyana tare da shigarwar rel=\"icon\" don girma 16/32/48, hanyar haɗin apple-touch-icon don girman 180, da hanyar haɗin manifest don ikon PWA. Guntun manifest a ƙasa ya lissafa ikon 192 da 512. Danna Sauke ZIP — shafin yana tattara dukkan PNG guda shida tare da manifest.json cikin kundin ZIP guda ɗaya ta hanyar fflate. Dukkan zagayen yana ɗaukar daƙiƙa biyu kuma baya cinye bandwidth fiye da lodin farko na shafin.

Waɗanne girman favicon kayan aikin ke samarwa?

Girma shida: 16×16, 32×32, da 48×48 don favicon na yau da kullun na mai bincike, 180×180 don Apple Touch Icon, da 192×192 da 512×512 don ikon PWA manifest. Ana fitar da kowane girman azaman PNG. Masu bincike na zamani suna karɓar favicon na PNG ta hanyar .

Zan iya samar da favicon daga rubutu ko emoji?

E. Sauya zuwa yanayin rubutu ko emoji, rubuta kalma ko manna emoji, zaɓi font, launin rubutu, da launin bango, kuma danna Samar. Ana zana rubutun akan zane mara gani a babban ƙuduri sannan a canza girmansa zuwa kowane girman favicon manufa.

Shin hoton yana lodawa zuwa uwar garken?

A'a. Hoto baya barin na'urarku. Shafin yana amfani da File API na mai bincike don karanta hoton cikin ƙwaƙwalwa da Canvas API don canza girma da fitar da kowane favicon. Buɗe bangaren Network a cikin DevTools yayin samarwa — kawai buƙatun da ke fita sune lodin farko na shafin da kiran talla. Babu bayanan hoto da ake aikawa.

Wadanne tsari ne ake karɓa don lodin hoto?

Kowane tsari da mai bincike zai iya ɓoyewa: PNG, JPEG, WebP, GIF, da SVG (mai bincike ya mai da shi raster). Iyakar girman fayil ɗin shine MB 10 kowane loda.

Yaya saukewar ZIP ke aiki?

Shafin yana amfani da ɗakin karatu na fflate (ana lodawa akan buƙata daga hanyar mai siyarwa) don tattara dukkan PNG ɗin da aka samar tare da manifest.json cikin kundin ZIP na yau da kullun. Tattarawa tana faruwa gaba ɗaya cikin ƙwaƙwalwar mai bincike — babu loda, babu zagayen uwar garken. Ana ba da ZIP azaman saukewar Blob da dannawa ɗaya.

Zan iya amfani da waɗannan favicon akan kowane shafin yanar gizo?

E. Favicon ɗin PNG da aka samar suna aiki akan kowane mai bincike na zamani wanda ke tallafawa alamar . Apple Touch Icon 180×180 tana aiki akan iOS da Safari. Ikon PWA 192×192 da 512×512 suna biyan buƙatun manifest don Chrome akan Android da sauran masu bincike masu tallafawa PWA.

Shin akwai zaɓin tsarin .ico na gaskiya?

Sigar yanzu tana fitar da PNG saboda kowane mai bincike na zamani yana karɓar su ta hanyar . Tsarin .ico na gaskiya mai yawan ƙuduri har yanzu ba a tallafawa ba kuma ana iya ƙarawa a sigar nan gaba.