Favicon ဆိုတာ ဘာလဲ၊ သင့်ဝက်ဘ်ဆိုက်အတွက် ဘာကြောင့် အရေးကြီးသလဲ?

Favicon (“favorite icon” ၏ အတိုကောက်) ဆိုသည်မှာ ဘရောက်ဇာ တက်ဘ်များ၊ ဘွတ်ခ်မတ်များ၊ ရှာဖွေမှုမှတ်တမ်းများ၊ Google ရှာဖွေမှုရလဒ်များ၊ ဖုန်း ပင်မစာမျက်နှာများနှင့် ထည့်သွင်းထားသော ဝက်ဘ်အက်ပ်များတွင် ဝက်ဘ်ဆိုက်တစ်ခုကို ကိုယ်စားပြုသည့် လေးထောင့်ပုံ ရုပ်ပုံငယ်ဖြစ်သည်။ ၎င်းသည် သင့်ဆိုက်ကို တစ်ချက်ကြည့်ရုံဖြင့် မှတ်မိနိုင်သော မျက်နှာတစ်ခု ပေးခြင်း၊ ဖွင့်ထားသော တက်ဘ်များစွာကြားတွင် ရှာတွေ့ရလွယ်စေခြင်း၊ ဆိုက်သည် ပရော်ဖက်ရှင်နယ်ကျပြီး ယုံကြည်စိတ်ချရကြောင်း ပြသခြင်းတို့ကြောင့် အရေးကြီးပြီး ယခုအခါ Google ရလဒ်များတွင် သင့်ဆိုက်အမည်ဘေးတွင်လည်း ပြသလျက်ရှိသည်။ Favicon မရှိလျှင် ဧည့်သည်များသည် ကမ္ဘာလုံးပုံ သို့မဟုတ် ဗလာစာမျက်နှာပုံ အိုင်ကွန်ကိုသာ မြင်ရပြီး သင့်ဆာဗာ၏ မှတ်တမ်းများတွင်လည်း 404 အမှားများ ပြည့်နေမည်ဖြစ်သည်။ MakeFav favicon generator ဖြင့် favicon အစုံအလင်ကို အခမဲ့ ဖန်တီးနိုင်သည်။

Favicon ဆိုတာ ဘာလဲ။

Favicon ဆိုသည်မှာ ပုံမှန်အားဖြင့် လိုဂိုတစ်ခု၏ ရိုးရှင်းသော ပုံစံ၊ သို့မဟုတ် စာလုံးတစ်လုံး၊ သင်္ကေတတစ်ခု ဖြစ်ပြီး ဘရောက်ဇာများနှင့် အခြားဆော့ဖ်ဝဲများက သင့်ဝက်ဘ်ဆိုက်မှ ရယူကာ ကျစ်လစ်သော မြင်ကွင်းဆိုင်ရာ ဖော်ပြချက်လိုအပ်သည့် နေရာတိုင်းတွင် ပြသပေးသည့် အမှတ်တံဆိပ်ပါ ဂရပ်ဖစ်ငယ်ဖြစ်သည်။ ဒက်စတော့ ဘရောက်ဇာတွင် ပုံမှန်အားဖြင့် CSS pixel 16 x 16 ဖြင့် ဆွဲပြသော်လည်း density မြင့်သော ဖန်သားပြင်များတွင် ပြတ်သားနေစေရန် ဖိုင်ကိုယ်တိုင်ကမူ ပိုကြီးသင့်သည်။

နည်းပညာအရ favicon သည် သင့် HTML ထဲမှ ညွှန်းထားသော (သို့မဟုတ် မူလတည်နေရာတွင် တွေ့ရသော) ရုပ်ပုံဖိုင်တစ်ခုသာဖြစ်ပြီး user agent များက စာမျက်နှာအကြောင်းအရာနှင့် သီးခြားစီ ဒေါင်းလုဒ်လုပ်ကြသည်။ ယနေ့ခေတ်တွင် “favicon” သည် ဖိုင်တစ်ခုတည်း ဖြစ်ခဲလှသည်။ ခေတ်မီဆိုက်တစ်ခုသည် ဘရောက်ဇာများ၊ ရှာဖွေရေးအင်ဂျင်များ၊ iOS နှင့် Android တို့အားလုံး ကိုက်ညီသော ဖော်မတ်နှင့် အရွယ်အစားကို ရရှိစေရန် အိုင်ကွန်တစ်ခုတည်း၏ ဗားရှင်းအများအပြားကို ပုံမှန်အားဖြင့် ထည့်သွင်းထားသည်။

Favicon ၏ သမိုင်းအကျဉ်း

Favicon သည် Microsoft က Internet Explorer 5 ကို ထုတ်ပြန်ခဲ့သည့် ၁၉၉၉ ခုနှစ် မတ်လ မှ စတင်ခဲ့သည်။ ထိုဘရောက်ဇာသည် အသုံးပြုသူများကို စာမျက်နှာများကို “Favorites” စာရင်းထဲ သိမ်းဆည်းခွင့်ပြုခဲ့ပြီး သိမ်းထားသော အချက်အလက်တစ်ခုစီဘေးတွင် ပြရန် ဆိုက်၏ root တွင် favicon.ico အမည်ရှိ အိုင်ကွန်ဖိုင်ငယ်ကိုလည်း ရှာဖွေခဲ့သည်။ အယူအဆမှာ ရိုးရှင်းသည်။ ဆိုက်တစ်ခုက /favicon.ico ကို ပံ့ပိုးပေးလျှင် ထိုအိုင်ကွန်သည် ဘွတ်ခ်မတ်ဘေးတွင် ပေါ်လာမည်။

မကြာမီ အခြားဘရောက်ဇာများလည်း ဤလုပ်ဆောင်ချက်ကို လက်ခံခဲ့ကြပြီး တက်ဘ်ဖြင့် ကြည့်ရှုခြင်းက ၎င်းကို ပိုအသုံးဝင်စေခဲ့သည်။ လူများ ဝက်ဘ်ကြည့်ရှုရာတွင် တက်ဘ်များသည် အဓိကနည်းလမ်းဖြစ်လာသည်နှင့်အမျှ favicon သည် ဘွတ်ခ်မတ်အလှဆင်ပစ္စည်းမှ အဓိက လမ်းညွှန်ကိရိယာတစ်ခုအဖြစ် ပြောင်းလဲလာခဲ့သည်။ နှစ်များအလျောက် ချဉ်းကပ်ပုံမှာလည်း ဤသို့ ဆင့်ကဲပြောင်းလဲခဲ့သည်။

• ၂၀၀၀ ပြည့်နှစ် အစောပိုင်း: <link rel="icon"> element ကြောင့် ဆိုက်များသည် root တွင်သာမက URL မည်သည့်နေရာရှိ အိုင်ကွန်ကိုမဆို ညွှန်ပြနိုင်လာပြီး IE မဟုတ်သော ဘရောက်ဇာများတွင် PNG နှင့် GIF ဖိုင်များကို လက်ခံလာခဲ့သည်။
• ၂၀၁၀ ပြည့်လွန်နှစ်များ: Apple က iOS ပင်မစာမျက်နှာများအတွက် apple-touch-icon ကို မိတ်ဆက်ခဲ့ပြီး Android နှင့် Windows တို့ကလည်း manifest icon နှင့် tile ပုံများကဲ့သို့ ကိုယ်ပိုင်စံနှုန်းများ ထည့်သွင်းခဲ့သည်။
• ယနေ့: SVG favicon များ၊ web app manifest များ၊ dark mode ကို သိရှိသော အိုင်ကွန်များနှင့် Google ၏ ရှာဖွေမှုရလဒ် favicon လိုအပ်ချက်များကြောင့် favicon သည် ဆိုက်တစ်ခု၏ နည်းပညာဆိုင်ရာ ပြင်ဆင်မှု၏ သေးငယ်သော်လည်း အစစ်အမှန် အစိတ်အပိုင်းတစ်ခု ဖြစ်လာခဲ့သည်။

ယနေ့ Favicon များ ပေါ်လာသည့် နေရာများ

သင့် favicon ကို ဘရောက်ဇာ တက်ဘ်တွင်သာမက အခြားနေရာများစွာတွင်လည်း ပြသသည်။ အဓိကနေရာများမှာ -

• ဘရောက်ဇာ တက်ဘ်များ: အမြင်သာဆုံးနေရာဖြစ်ပြီး တက်ဘ်များစွာ ဖွင့်ထားချိန်တွင် အိုင်ကွန်သာ မြင်ရတတ်သည်။
• ဘွတ်ခ်မတ်များနှင့် အကြိုက်ဆုံးစာရင်းများ: ဘွတ်ခ်မတ်ဘားနှင့် မီနူးများတွင် စာမျက်နှာခေါင်းစဉ်ဘေးတွင် အိုင်ကွန်ပါရှိသည်။
• မှတ်တမ်းနှင့် အများဆုံးဝင်ကြည့်သော စာမျက်နှာများ: ဘရောက်ဇာများသည် မှတ်တမ်းစာရင်းများနှင့် tab အသစ်စာမျက်နှာများတွင် favicon များကို ပြသသည်။
• Google ရှာဖွေမှုရလဒ်များ: မိုဘိုင်းနှင့် ဒက်စတော့ နှစ်မျိုးလုံးတွင် Google သည် ဆိုက်အမည်နှင့် URL ဘေးတွင် ဆိုက်၏ favicon ကို ပြသသည်။
• ပင်မစာမျက်နှာများ: ဧည့်သည်တစ်ဦးက သင့်ဆိုက်ကို iOS သို့မဟုတ် Android ပင်မစာမျက်နှာသို့ ထည့်လိုက်သောအခါ touch icon သို့မဟုတ် manifest icon သည် အက်ပ်ပုံစံ shortcut ဖြစ်လာသည်။
• ထည့်သွင်းထားသော PWA များ: Progressive web app တစ်ခုသည် ၎င်း၏ web app manifest ထဲရှိ အိုင်ကွန်များကို launcher icon၊ splash screen နှင့် task switcher အတွက် အသုံးပြုသည်။
• Windows tile များနှင့် ပင်တွဲထားသော ဆိုက်များ: Windows နှင့် Edge ဗားရှင်းဟောင်းများသည် ပင်တွဲထားသော ဆိုက်များအတွက် သတ်မှတ်ထားသော tile ပုံများကို အသုံးပြုခဲ့ပြီး ခေတ်သစ်ဗားရှင်းများမှာမူ သင့်ပုံမှန်အိုင်ကွန်များကိုသာ ပြန်သုံးကြသည်။
• အက်ပ်အချို့တွင် လင့်ခ်ကြိုကြည့်ခြင်း: ချက်နှင့် ထုတ်လုပ်မှုစွမ်းအား ကိရိယာအချို့ (Slack သည် လူသိများသော ဥပမာတစ်ခု) သည် ဖြန့်ထားသော လင့်ခ်ဘေးတွင် ဆိုက်၏ favicon ကို ပြသသည်။ ကြိုကြည့်ချက်အများစုသည် Open Graph ပုံများကို အဓိကအားထားသော်လည်း favicon က အမှတ်တံဆိပ်အသေးလေးကို ပံ့ပိုးပေးလေ့ရှိသည်။

Favicon သည် သင့်ဝက်ဘ်ဆိုက်အတွက် ဘာကြောင့် အရေးကြီးသနည်း

အမှတ်တံဆိပ်ကို မှတ်မိစေခြင်း

လူတို့သည် စာဖတ်ရခြင်းထက် အရောင်များနှင့် ပုံသဏ္ဍာန်များကို ပိုမြန်မြန် မှတ်မိကြသည်။ တက်ဘ်များ၊ ဘွတ်ခ်မတ်များနှင့် ရှာဖွေမှုရလဒ်များတွင် တသမတ်တည်း ထပ်ခါထပ်ခါ ပေါ်လာသော အိုင်ကွန်သည် မြင်တိုင်း ရင်းနှီးမှုကို တည်ဆောက်ပေးပြီး ဝင်ကြည့်သည့်အကြိမ်တိုင်း အခမဲ့ အမှတ်တံဆိပ် ထိတွေ့မှု ဖြစ်စေသည်။

ယုံကြည်မှုနှင့် ယုံကြည်စိတ်ချရမှု

Favicon မရှိခြင်းက ဆိုက်ကို မပြီးစီးသေးသလို ထင်စေသည်။ သန့်ရှင်းပြီး မှန်ကန်စွာ ပြသသော အိုင်ကွန်သည် အသေးစိတ်ကို ဂရုစိုက်သူရှိကြောင်း ပြသသည့် အချက်ငယ်တစ်ခုဖြစ်ပြီး ဆိုက်သည် တရားဝင်ဖြစ်သည်ဟူသော အမြင်ကို ပံ့ပိုးပေးသည်။ ၎င်းသည် လုံခြုံရေးလုပ်ဆောင်ချက် မဟုတ်ပါ၊ phishing ဆိုက်များကလည်း အိုင်ကွန်များကို ကော်ပီကူးနိုင်သည်၊ သို့သော် ဗလာမူလအိုင်ကွန်သည် စီးပွားရေးလုပ်ငန်းတစ်ခုကို တည်ငြိမ်သည်ဟု ထင်မြင်စေရန် အရေးမပါလှပါ။

ရှာဖွေမှုရလဒ်များတွင် ကလစ်နှိပ်နှုန်း

Google သည် သင့်စာရင်းဘေးတွင် favicon ကို ပြသသောကြောင့် ၎င်းသည် ပြိုင်ဘက်များနှင့်နှိုင်းယှဉ်လျှင် သင့်ရလဒ် မည်သို့ပေါ်သည်ဆိုသည့် အစိတ်အပိုင်းတစ်ခု ဖြစ်လာသည်။ Favicon များအတွက် ranking အပေါ် သက်ရောက်မှုကို Google က မထုတ်ပြန်ထားသဖြင့် ranking တိုးတက်လာမည်ဟု မမျှော်လင့်သင့်ပါ။ အကျိုးကျေးဇူးမှာ မြင်ကွင်းအရ မှတ်မိမှုဆိုင်ရာ ဖြစ်သည်။ သင့်အိုင်ကွန်ကို သိသူများသည် သင့်ရလဒ်ကို ပိုမြင်မိပြီး ရွေးချယ်ဖွယ်ရှိသည်၊ အထူးသဖြင့် ရလဒ်များ ကျစ်လစ်စွာပေါ်သော မိုဘိုင်းတွင် ဖြစ်သည်။

တက်ဘ်များစွာ ဖွင့်ထားချိန် အသုံးပြုရလွယ်ကူမှု

ဘရောက်ဇာတစ်ခုတွင် တက်ဘ်နှစ်ဆယ် ဖွင့်ထားသောအခါ ခေါင်းစဉ်များသည် ဖြတ်တောက်ခံရပြီး ဘာမျှမကျန်တော့ဘဲ favicon သာ ကျန်ရှိသည်။ ထူးခြားသော အိုင်ကွန်သည် လူများကို သင့်တက်ဘ်ကို ချက်ချင်းရှာတွေ့ပြီး ထပ်မံဖွင့်ခြင်း သို့မဟုတ် မေ့သွားခြင်းမပြုဘဲ ပြန်သွားနိုင်စေသည်။

ပရော်ဖက်ရှင်နယ်ကျသော ခံယူချက်

ကောင်းစွာ ဒီဇိုင်းဆွဲထားသော favicon သည် သင့်ဆိုက်၏ အခြားအစိတ်အပိုင်းများကဲ့သို့ အသေးစိတ်ကို ဂရုစိုက်ကြောင်း ပြသသည်။ ထုတ်ကုန်စာမျက်နှာများ၊ စာတမ်းများ၊ ဘလော့ဂ်များနှင့် ဝက်ဘ်အက်ပ်များအားလုံးအတွက် ၎င်းသည် ထည့်သွင်းနိုင်သော အသက်သာဆုံး အချောသတ်ပစ္စည်းများထဲက တစ်ခုဖြစ်သည်။

တက်ဘ်ရှာဖွေရာတွင် အသုံးပြုနိုင်မှု

အိုင်ကွန်များသည် စာဖတ်ခြင်းထက် မြင်ကွင်းဖြင့် ရှာဖွေသူများ၊ dyslexia သို့မဟုတ် သိမြင်မှုကွဲပြားမှုရှိသူများနှင့် အလုပ်များကြား လျင်မြန်စွာ ပြောင်းသူတိုင်းကို ကူညီပေးသည်။ ရိုးရှင်းသောပုံသဏ္ဍာန်ပါ contrast မြင့်သော အိုင်ကွန်ကို ရှာတွေ့ရ ပိုလွယ်သည်။ သို့သော် favicon သည် ဖြည့်စွက်မှုသာဖြစ်ကြောင်း သတိရပါ။ screen reader နှင့် ကူညီပေးသော နည်းပညာများ အားကိုးရသည့် ရှင်းလင်းသော စာမျက်နှာခေါင်းစဉ်ကို အစားမထိုးနိုင်ပါ။

Favicon မရှိလျှင် ဘာဖြစ်မလဲ

သင့် HTML တွင် favicon ကို မဖော်ပြထားလည်း ဘရောက်ဇာများသည် သင့်ဒိုမိန်း၏ root မှ /favicon.ico ကို အလိုအလျောက် တောင်းဆိုသည်။ ဖိုင်မရှိလျှင် အောက်ပါအရာများ ဖြစ်ပေါ်သည်။

• ယေဘုယျအိုင်ကွန်: ဧည့်သည်များသည် တက်ဘ်နှင့် ဘွတ်ခ်မတ်များတွင် မူလကမ္ဘာလုံး၊ စာရွက်စာတမ်း သို့မဟုတ် ဗလာအိုင်ကွန်ကို မြင်ရပြီး အမည်မသိသလို ထင်ရသည်။
• မှတ်တမ်းများတွင် 404 အမှားများ: ဖိုင်ကို တောင်းဆိုသော ဘရောက်ဇာတိုင်းသည် မအောင်မြင်သော တောင်းဆိုမှုတစ်ခု ဖြစ်ပေါ်စေသည်။ လူကြိုက်များသော ဆိုက်များတွင် ၎င်းသည် access log၊ အမှားစောင့်ကြည့်မှုနှင့် analytics တို့တွင် ဆူညံမှုထပ်ပေါင်းစေပြီး အစစ်အမှန်ပြဿနာများကို ဖုံးကွယ်နိုင်သည်။
• Google ရလဒ်များတွင် အိုင်ကွန်မပါခြင်း: မှန်ကန်ပြီး crawl လုပ်နိုင်သော favicon မရှိလျှင် Google သည် သင့်စာရင်းဘေးတွင် ၎င်း၏ မူလ placeholder ကို ပြသသည်။
• အလကားဖြစ်သွားသော တောင်းဆိုမှုများ: ဘရောက်ဇာများ ထပ်မံကြိုးစားနိုင်ပြီး သင့်ဆာဗာတွင် သေးငယ်သော်လည်း အကျိုးမရှိသော ဝန်ထပ်ပေါင်းစေသည်။

အလွန်ရိုးရှင်းသော အိုင်ကွန်ပင်လျှင် မရှိခြင်းထက် ပိုကောင်းသည်၊ အကြောင်းမှာ 404 များကို ဖယ်ရှားပေးပြီး အသုံးပြုသူများအား မှတ်မိနိုင်သော အရာတစ်ခု ပေးသောကြောင့်ဖြစ်သည်။

Favicon ဖော်မတ်များ ရှင်းလင်းချက်

ဖော်မတ်တစ်ခုတည်းက ပလက်ဖောင်းအားလုံးကို မဖုံးလွှမ်းနိုင်သဖြင့် ဆိုက်အများစုသည် ဖိုင်အနည်းငယ်ကို သုံးကြသည်။

Windows tile ပုံဟောင်းများ (browserconfig.xml ဖြင့် ပြင်ဆင်သည်) ကို Internet Explorer 11 နှင့် Edge ဟောင်းအတွက် လိုအပ်ခဲ့သည်။ ထိုပတ်ဝန်းကျင်များကို ပံ့ပိုးရန် မလိုအပ်လျှင် ယခုအခါ ၎င်းတို့ကို လိုအပ်ခဲသည်။

ရှာဖွေမှုရလဒ်များအတွက် Google ၏ favicon လမ်းညွှန်ချက်များ

သင့်အိုင်ကွန်ကို Google Search တွင် ပေါ်စေလိုလျှင် Google ထုတ်ပြန်ထားသော လိုအပ်ချက်များကို လိုက်နာပါ။

• အရွယ်အစား: ရုပ်ပုံသည် လေးထောင့်ပုံ (1:1) ဖြစ်ရမည်ဖြစ်ပြီး 48x48၊ 96x96 သို့မဟုတ် 144x144 ကဲ့သို့ pixel 48 ၏ ဆများ ဖြစ်ရမည်။ ထို့နောက် Google က ပြသရန် 16x16 သို့ ချုံ့ပေးသည်။ ပံ့ပိုးသော အနည်းဆုံးအရွယ်မှာ 8x8 ဖြစ်သော်လည်း 48x48 သို့မဟုတ် ထို့ထက်ကြီးသည်ကို အကြံပြုသည်။
• ဖော်မတ်များ: ICO၊ PNG နှင့် SVG အပါအဝင် ဘရောက်ဇာများ ပံ့ပိုးသော မည်သည့်ဖော်မတ်မဆို အသုံးပြုနိုင်သည်။
• တည်ငြိမ်သော URL: favicon URL ကို မကြာခဏ မပြောင်းပါနှင့်။ တည်ငြိမ်သောလိပ်စာက Google အား သင့်အိုင်ကွန်ကို နောက်ဆုံးအခြေအနေဖြင့် ထားရှိနိုင်စေသည်။
• Crawl လုပ်နိုင်ခြင်း: favicon ဖိုင်နှင့် သင့်ပင်မစာမျက်နှာ နှစ်ခုစလုံးကို Googlebot က ဝင်ရောက်နိုင်ရမည်။ ၎င်းတို့ကို robots.txt တွင် မပိတ်ပါနှင့်၊ login နောက်တွင်လည်း မထားပါနှင့်။
• ဆိုက်တစ်ခုလျှင် ကြေညာချက်တစ်ခု: အိုင်ကွန်သည် ဆိုက်၏ ပင်မစာမျက်နှာနှင့် ချိတ်ဆက်ထားသောကြောင့် <link> tag ကို သင့်ပင်မစာမျက်နှာ၏ head တွင် ထည့်ပါ။
• ကိုယ်စားပြုပြီး သင့်လျော်ခြင်း: အိုင်ကွန်သည် သင့်အမှတ်တံဆိပ်ကို ထင်ဟပ်သင့်ပြီး ရိုင်းစိုင်းသော သို့မဟုတ် လှည့်စားသော အိုင်ကွန်ကို Google က ၎င်း၏ မူလအိုင်ကွန်ဖြင့် အစားထိုးနိုင်သည်။

Favicon ကို ထုတ်ပြန်ပြီးနောက် သို့မဟုတ် ပြောင်းလဲပြီးနောက် Google က ပြန်လည် crawl လုပ်ပြီး အပ်ဒိတ်လုပ်ရန် ရက်များမှ ရက်သတ္တပတ်များအထိ ကြာနိုင်သဖြင့် ချက်ချင်းပြောင်းလဲမည်ဟု မမျှော်လင့်ပါနှင့်။

MakeFav ဖြင့် favicon ကို မြန်မြန်ဆန်ဆန် ဖန်တီးနည်း

ဒီဇိုင်းဆော့ဖ်ဝဲ သို့မဟုတ် command line မလိုအပ်ပါ။ MakeFav generator သည် မူရင်းရုပ်ပုံတစ်ပုံကို အထက်တွင်ဖော်ပြထားသော ဖိုင်များအဖြစ် ပြောင်းပေးသည်။

1. သင့်လက်ရာကို ပြင်ဆင်ပါ။ 512 x 512 px သို့မဟုတ် ပိုကြီးသော လေးထောင့်ပုံ လိုဂို သို့မဟုတ် သင်္ကေတကို သုံးပါ။ အိုင်ကွန်ကို 16 px တွင် မြင်ရမည်ဖြစ်သောကြောင့် ရိုးရှင်းသောပုံသဏ္ဍာန်များ အကောင်းဆုံးဖြစ်သည်။
2. MakeFav ပင်မစာမျက်နှာ တွင် အပ်လုဒ်လုပ်ပါ၊ သို့မဟုတ် ထုတ်ယူမည့်အချိန်မတိုင်မီ ရုပ်ပုံ၊ နောက်ခံနှင့် padding ကို ညှိရန် editor ကို ဖွင့်ပါ။
3. ရလဒ်သည် ဖတ်ရှုနိုင်မြဲဖြစ်ကြောင်း သေချာစေရန် အရွယ်သေးသေးများတွင်၊ အလင်းနှင့် အမှောင်နောက်ခံများပေါ်တွင် ကြိုကြည့်ပါ။
4. ပက်ကေ့ချ်ကို ဒေါင်းလုဒ်လုပ်ပါ။ ၎င်းတွင် ICO၊ PNG အရွယ်အစားများ၊ Apple touch icon၊ manifest အိုင်ကွန်များနှင့် ကူးထည့်ရန် HTML snippet ပါဝင်သည်။
5. /favicon.ico ကဲ့သို့သော လမ်းကြောင်းများတွင် ရောက်ရှိနိုင်စေရန် ဖိုင်များကို သင့်ဝက်ဘ်ဆိုက်၏ root သို့ အပ်လုဒ်လုပ်ပါ။
6. စာမျက်နှာတိုင်း၏ <head> တွင် သို့မဟုတ် သင့်မျှဝေ layout သို့မဟုတ် template တွင် HTML ကို ထည့်ပါ။
7. favicon checker ဖြင့် စစ်ဆေးပါ၊ ထို့နောက် အိုင်ကွန်အသစ်ကို မြင်ရန် ဘရောက်ဇာ cache ကို ရှင်းပြီး ပြန်လည်ဖွင့်ပါ။

HTML snippet ဥပမာ

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ICO link ပေါ်ရှိ sizes="48x48" attribute သည် ဘရောက်ဇာများ ပံ့ပိုးလျှင် SVG ကို ဦးစားပေးရွေးနိုင်စေပြီး ICO ကို fallback အဖြစ် ထားရှိစေသည်။ 96 px PNG သည် Google ၏ 48 ၏ဆ စည်းကမ်းကို ဖြည့်ဆည်းပေးသည်။

Web app manifest ဥပမာ

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Build pipeline များနှင့် အလုပ်လုပ်လျှင် သို့မဟုတ် အိုင်ကွန်ဖန်တီးမှုကို အလိုအလျောက်လုပ်ဆောင်လိုလျှင် ဆော့ဖ်ဝဲရေးသားသူ အရင်းအမြစ်များ ကို ကြည့်ပါ။

ထိရောက်သော favicon အတွက် ဒီဇိုင်းအကြံပြုချက်များ

• ရိုးရှင်းစွာထားပါ။ ပုံသဏ္ဍာန်တစ်ခု၊ စာလုံးတစ်လုံး သို့မဟုတ် ထင်ရှားသော monogram တစ်ခုသည် 16 px တွင် ရောထွေးသွားတတ်သော အသေးစိတ်များပါ လိုဂိုထက် ပိုကောင်းသည်။
• Contrast ပြင်းပြင်းသုံးပါ။ အိုင်ကွန်သည် အလင်းနှင့် အမှောင် ဘရောက်ဇာ theme နှစ်မျိုးလုံးတွင် မြင်ရကြောင်း သေချာပါစေ။ အရောင်ပါသော နောက်ခံ tile က ကူညီပေးသည်။
• စာသားကို ရှောင်ပါ။ အစစာလုံးတစ်လုံးသည် အဆင်ပြေသော်လည်း စကားလုံးများကို ဤအရွယ်တွင် ဖတ်၍မရပါ။
• Maskable နှင့် ထောင့်ဝိုင်းအိုင်ကွန်များအတွက် အရေးကြီးသောအရာ မပြတ်သွားစေရန် padding အနည်းငယ် ချန်ထားပါ။
• Favicon က မှတ်မိမှုကို အားဖြည့်စေရန် သင့်လိုဂိုနှင့် အမှတ်တံဆိပ်အရောင်များနှင့် ကိုက်ညီစေပါ။
• စက်အစစ်များပေါ်တွင် စမ်းသပ်ပါ၊ တက်ဘ်၊ ဘွတ်ခ်မတ်နှင့် Google ရလဒ်တွင် မည်သို့ပေါ်သည်ကို စစ်ဆေးပါ။

အဖြစ်များသော favicon ပြဿနာများ

သင့်အိုင်ကွန် မပေါ်လျှင် အဖြစ်များသော အကြောင်းရင်းများမှာ caching၊ လမ်းကြောင်းမှားခြင်းနှင့် ဖိုင်များ ပိတ်ဆို့ခံရခြင်းတို့ ဖြစ်သည်။ ဘရောက်ဇာများသည် favicon များကို ပြင်းပြင်းထန်ထန် cache လုပ်ထားသဖြင့် hard refresh သို့မဟုတ် private window အသစ်ဖြင့် အပ်ဒိတ်များကို မြင်နိုင်လေ့ရှိသည်။ ဖိုင် URL သည် 200 status နှင့် မှန်ကန်သော content type ပြန်ပေးကြောင်းနှင့် <link> tag သည် <head> ထဲတွင် ရှိကြောင်း စစ်ဆေးပါ။ ရှာဖွေရေးအတွက် robots.txt က အိုင်ကွန် သို့မဟုတ် ပင်မစာမျက်နှာကို မပိတ်ထားကြောင်း သေချာပါစေ။ MakeFav checker က ဤပြဿနာများကို မြန်မြန်ရှာတွေ့ရန် ကူညီပေးနိုင်သည်။

မကြာခဏမေးလေ့ရှိသော မေးခွန်းများ

Favicon ဆိုတာ ဘာကို ကိုယ်စားပြုသလဲ။

Favicon သည် “favorite icon” ၏ အတိုကောက်ဖြစ်သည်။ အမည်သည် ၁၉၉၉ ခုနှစ်တွင် ဘရောက်ဇာ၏ Favorites စာရင်းအချက်အလက်များကို အလှဆင်ရန် အိုင်ကွန်ဖိုင်ငယ်ကို ပထမဆုံးအသုံးပြုခဲ့သော Internet Explorer 5 မှ ဆင်းသက်လာသည်။ အိုင်ကွန်သည် ယခုအခါ အခြားနေရာများစွာတွင် ပေါ်နေသော်လည်း ထိုအမည်သည် ဆက်လက်တည်ရှိနေသည်။

Favicon က SEO ကို ကူညီပေးသလား။

Favicon သည် တိုက်ရိုက် ranking ပြောင်းလဲမှုတစ်ခု မဟုတ်ပါ။ သို့သော် ၎င်းသည် မိုဘိုင်းနှင့် ဒက်စတော့ရှိ Google ရလဒ်များတွင် သင့်ဆိုက်အမည်ဘေးတွင် ပေါ်သဖြင့် အမှတ်တံဆိပ်ကို မှတ်မိမှုနှင့် သင့်စာရင်း၏ မြင်ကွင်းဆွဲဆောင်မှုကို မြှင့်တင်နိုင်ပြီး သွယ်ဝိုက်၍ ကလစ်များကို ပံ့ပိုးနိုင်သည်။ Google ၏ လမ်းညွှန်ချက်များကို လိုက်နာခြင်းက အိုင်ကွန်ကို ပြသနိုင်ရန် အရည်အချင်းပြည့်မီစေသည်။

Favicon အရွယ်အစား ဘယ်လောက် ဖြစ်သင့်လဲ။

Google Search အတွက် 48x48 သို့မဟုတ် 96x96 ကဲ့သို့ pixel 48 ၏ ဆများဖြစ်သော လေးထောင့်ပုံကို သုံးပါ။ ပိုကျယ်ပြန့်စွာ ဖုံးလွှမ်းလိုလျှင် ICO ဖိုင်၊ 180x180 Apple touch icon နှင့် 192x192 နှင့် 512x512 manifest အိုင်ကွန်များကိုလည်း ပံ့ပိုးပါ။ အရွယ်အစားပြောင်းနိုင်စေရန် SVG ကို ထပ်ထည့်ခြင်းသည် ကောင်းမွန်သည်။

PNG သို့မဟုတ် SVG သုံးလျှင်လည်း favicon.ico လိုသေးလား။

ထားရှိခြင်းက ကောင်းသေးသည်။ ဘရောက်ဇာများနှင့် ကိရိယာအချို့သည် /favicon.ico ကို မူလအတိုင်း တောင်းဆိုပြီး ဆော့ဖ်ဝဲဟောင်းများသည် ၎င်းကို အားကိုးသည်။ ဆိုက် root တွင် ICO ဖိုင်ထားခြင်းက 404 အမှားများကို ကာကွယ်ပေးပြီး SVG သို့မဟုတ် PNG ကို မပံ့ပိုးသောအခါ လုံခြုံသော fallback ကို ပေးသည်။

ကျွန်ုပ်၏ favicon ဘာကြောင့် မပြောင်းသလဲ။

ဘရောက်ဇာများနှင့် ရှာဖွေရေးအင်ဂျင်များသည် favicon များကို အချိန်ကြာမြင့်စွာ cache လုပ်ထားသည်။ Hard refresh၊ private window သို့မဟုတ် cache ရှင်းခြင်းတို့ကို စမ်းကြည့်ပါ။ ဖိုင်လမ်းကြောင်း မှန်ကန်ပြီး ဖိုင်အသစ်ကို ဆာဗာမှ ပေးပို့နေကြောင်း သေချာပါစေ။ Google Search တွင် ပြောင်းထားသော အိုင်ကွန်ကို ပြန်လည် crawl လုပ်ပြီး အပ်ဒိတ်လုပ်ရန် ရက်များ သို့မဟုတ် ရက်သတ္တပတ်များ ကြာနိုင်သည်။