Favicon UX - ကောင်းမွန်သော Favicon ကို ဘာက ဖန်တီးပေးသလဲ

ကောင်းမွန်သော favicon ဆိုသည်မှာ ရိုးရှင်းပြီး contrast မြင့်မားသော အမှတ်အသားတစ်ခု ဖြစ်သည်။ များသောအားဖြင့် သင့် logomark သို့မဟုတ် စာလုံးတစ်လုံး နှစ်လုံး ဖြစ်ပြီး အလင်းရောင်နှင့် အမှောင်ရောင် browser tab နှစ်မျိုးလုံးတွင် 16x16 pixel အရွယ်ဖြင့် ဖတ်၍ရကာ သင့် brand နှင့် ကိုက်ညီပြီး ရှားရှားပါးပါးသာ ပြောင်းလဲသည်။ ဤလမ်းညွှန်ရှိ အခြားအရာအားလုံး (pixel ချိန်ညှိမှု၊ အရောင်၊ padding၊ ဖောက်ထွင်းမြင်ရမှု၊ ဖိုင်အရွယ်အစား) သည် ထိုပန်းတိုင်များကို ဆောင်ရွက်ပေးသည် - ဖွင့်ထားသော tab များစွာကြားတွင် သင့်ဝဘ်ဆိုက်ကို ချက်ချင်း ရှာတွေ့နိုင်စေရန် ဖြစ်သည်။

Favicon သည် သေးငယ်သော်လည်း နေရာများစွာတွင် ပေါ်လာသည် - browser tab များ၊ bookmark bar များ၊ history စာရင်းများ၊ tab ရှာဖွေမှု menu၊ မိုဘိုင်းနှင့် ကွန်ပျူတာရှိ Google ရှာဖွေမှုရလဒ်များနှင့် ဖုန်း home screen များတွင် ဖြစ်သည်။ tab များစွာဖွင့်ထားသော အသုံးပြုသူများအတွက် ခေါင်းစဉ်သည် မကြာခဏ ဖြတ်တောက်ခံရပြီး ဘာမျှမကျန်တော့ဘဲ အိုင်ကွန်သာ တစ်ခုတည်းသော အညွှန်းဖြစ်လာတတ်သည်။ ထို့ကြောင့် ၎င်းသည် အလှဆင်ခြင်း မဟုတ်ဘဲ တကယ့် ရွှေ့ပြောင်းလမ်းညွှန်ဒြပ်စင် ဖြစ်သည်။

1. 16x16 တွင် ဖတ်ရှုနိုင်မှု

ရိုးရာ favicon အရွယ်အစားမှာ 16x16 CSS pixel ဖြစ်သည်။ ပုံမှန်မျက်နှာပြင်တွင် ၎င်းသည် တိတိကျကျ pixel ၂၅၆ ခုဖြစ်ပြီး 2x retina မျက်နှာပြင်တွင် browser သည် ထိုနေရာအတွက် 32x32 ပုံကို များသောအားဖြင့် ရွေးသည်။ သင်ဒီဇိုင်းဆွဲသမျှသည် ဤအရွယ်ချုံ့မှုကို ခံနိုင်ရည်ရှိရမည်။

ရိုးရှင်းစွာထားပါ

• ပုံသဏ္ဍာန်တစ်ခု သို့မဟုတ် စာလုံးတစ်လုံး နှစ်လုံး။ ထူသော စာလုံးတစ်လုံး၊ သင်္ကေတပါသော စက်ဝိုင်း သို့မဟုတ် ရိုးရှင်းသော ဂျီဩမေတြီပုံစံတစ်ခု သုံးနိုင်သည်။ စာလုံးသုံးလုံး သို့မဟုတ် စကားလုံးတစ်လုံးမူ ရှုပ်ထွေးသော ဆူညံမှုဖြစ်သွားမည်။
• အဓိကအချက်တစ်ခုတည်း။ အိုင်ကွန်ကို စကားလုံးငါးလုံးဖြင့် မဖော်ပြနိုင်ပါက ရှုပ်ထွေးလွန်းသည်။
• Gradient၊ အရိပ် သို့မဟုတ် အသေးစိတ် texture မသုံးပါနှင့်။ အရွယ်သေးသောအခါ ၎င်းတို့သည် ဝါးသွားသော အစွန်းအထင်းများ ဖြစ်သွားသည်။

Pixel grid နှင့် ကိုက်ညီအောင် ချိန်ညှိပါ

16x16 တွင် grid မှ pixel တစ်ဝက်လွဲနေသော မျဉ်းသည် pixel အတန်းနှစ်တန်းပေါ်တွင် anti-alias ဖြစ်ပြီး မီးခိုးရောင်ပျော့ပျော့ ဖြစ်နေသည်။ အနားများကို pixel အပြည့်အဝ နယ်နိမိတ်ပေါ်တွင်ထားပြီး ပုံသဏ္ဍာန်သည် symmetrical ဖြစ်ပါက အကျယ်တန်ဖိုးကို စုံဂဏန်းဖြင့် သုံးပါ။ vector ကိရိယာမှ export လုပ်ပါက pixel snapping ကို ဖွင့်ပါ၊ သို့မဟုတ် ချုံ့ပြီးရလဒ်ကို စစ်ဆေးကာ လက်ဖြင့် ပြင်ပါ။

မျဉ်းပါးများကို ရှောင်ပါ

16x16 တွင် pixel ၂ ခုထက်ပါးသော မျဉ်းများ (အိုင်ကွန်အကျယ်၏ ၁၂ ရာခိုင်နှုန်းခန့်) သည် ပျောက်သွားတတ်သည် သို့မဟုတ် အရွယ်အစားများအကြား လှုပ်ခါနေတတ်သည်။ မျဉ်းများကို ထူစေပါ၊ အတွင်းအသေးစိတ်များကို ဖယ်ရှားပါ၊ ကွက်လပ်သေးများကို ပေါင်းစပ်ပါ။ ထူထူအနည်းငယ်လေးလံသော glyph သည် အသေးစိတ်များသော logo ၏ ရိုးသားသော အသေးစားပုံတူထက် မကြာခဏ ပိုဖတ်ရလွယ်သည်။

လက်ဖြင့် hint ပေးပါ

ICO နှင့် PNG ဖိုင်များတွင် font ပုံစံ hinting မရှိသောကြောင့် လက်ဖြင့် pixel တည်းဖြတ်ခြင်းသည် ၎င်း၏ အစားထိုးနည်းဖြစ်သည်။ သင်သည် pixel တစ်ခုချင်းစီကို ချိန်ညှိ၍ ကွေးကောက်များ၊ ထောင့်ဖြတ်မျဉ်းများနှင့် counter များ ("a" သို့မဟုတ် "e" ကဲ့သို့ စာလုံးများရှိ အပေါက်များ) ကို ပြတ်သားစေသည်။ အလိုအလျောက်ချုံ့ခြင်းသည် ကောင်းသော ပထမမူကြမ်းဖြစ်သော်လည်း လက်ဖြင့်ထားသော pixel အနည်းငယ်သည် ဝါးနေသော အစက်နှင့် မှတ်မိနိုင်သော စာလုံးအကြား ကွာခြားချက်ကို ဖန်တီးပေးတတ်သည်။ MakeFav pixel editor ကို ဤအတွက် တည်ဆောက်ထားသည် - 16x16 canvas ကိုဖွင့်ပြီး ပြဿနာရှိသော pixel များကိုပြင်ကာ export လုပ်ပါ။

2. အလင်းရောင်နှင့် အမှောင်ရောင် tab များပေါ်ရှိ contrast

ယခုအခါ browser များကို dark mode ဖြင့် အသုံးများစွာ အသုံးပြုကြပြီး အသုံးပြုသူများစွာ၏ tab strip သည် စာမျက်နှာ theme နှင့် ကွာခြားသည်။ ဖောက်ထွင်းမြင်ရသော နောက်ခံပါ အမှောင်ရောင် navy အိုင်ကွန်သည် အဖြူရောင် tab ပေါ်တွင် ပြီးပြည့်စုံသော်လည်း မီးခိုးရောင်ရင့် tab ပေါ်တွင် မမြင်ရလောက်အောင် ဖြစ်နိုင်သည်။ နှစ်မျိုးလုံးကို အမြဲစမ်းသပ်ပါ။

လက်တွေ့ဖြေရှင်းနည်းများ

• နောက်ခံပုံသဏ္ဍာန် ထည့်ပါ။ brand အရောင်ရှိ အစိုင်အခဲ ထောင့်ဝိုင်းလေးထောင့် သို့မဟုတ် စက်ဝိုင်းသည် tab မည်သို့ပင်ရှိစေ အမှတ်အသားကို ကိုယ်ပိုင် contrast ရှိစေရန် အာမခံပေးသည်။
• ပါးသော ပြင်ပမျဉ်း သို့မဟုတ် halo သုံးပါ။ အမှောင် glyph ပတ်လည်ရှိ 1px အလင်းရောင်အနားသည် (သို့မဟုတ် ပြောင်းပြန်) theme နှစ်မျိုးလုံးတွင် ပုံရိပ်ကို မြင်နေစေသည်။ သို့သော် 16x16 တွင် ပြတ်သားရမည်ဖြစ်၍ စမ်းသပ်ပါ။
• အလယ်အလတ်အရောင် brand အရောင်များ ရွေးပါ။ အဖြူရောင်နှင့် အနက်နီးပါး မျက်နှာပြင်နှစ်ခုလုံးတွင် အပြာရင့်၊ လိမ္မော်၊ အစိမ်း သို့မဟုတ် magenta ကဲ့သို့ အရောင်များ ပုံမှန်အားဖြင့် အလုပ်ဖြစ်သည်။ အလွန်နုသော အဝါရောင် သို့မဟုတ် အလွန်ရင့်သော navy တို့မှာ အန္တရာယ်ရှိသည်။
• လိုက်လျောညီထွေ SVG favicon သုံးပါ။ SVG တွင် prefers-color-scheme media query ထည့်နိုင်သဖြင့် စနစ် theme နှင့်အတူ အိုင်ကွန်ပြောင်းလဲနိုင်သည်။

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

media query သည် လည်ပတ်မှုစနစ် သို့မဟုတ် browser theme ကို ထင်ဟပ်သည်ကို သတိပြုပါ။ tab strip သည် များသောအားဖြင့် ၎င်းကို လိုက်သော်လည်း အမြဲမဟုတ်ပါ။ SVG favicon အတွက် ပံ့ပိုးမှုလည်း ကွာခြားသည် - Chrome နှင့် Firefox တို့က ကိုင်တွယ်နိုင်ပြီး Safari မှာမူ သမိုင်းအရ နောက်ကျခဲ့သဖြင့် PNG သို့မဟုတ် ICO fallback များကို အမြဲထားပါ။ အစိုင်အခဲနောက်ခံ ဒီဇိုင်းသည် theme logic လုံးဝမလိုသောကြောင့် အခိုင်မာဆုံး ရွေးချယ်မှုဖြစ်သည်။

3. မှတ်မိနိုင်မှုနှင့် brand တသမတ်တည်းဖြစ်မှု

wordmark ပါသော logo အပြည့်အစုံမဟုတ်ဘဲ logomark (သင်္ကေတ သို့မဟုတ် monogram) ကို သုံးပါ။ 16x16 အိုင်ကွန်အတွင်းရှိ စာသားသည် ဖတ်မရနိုင်ပါ။ အလျားလိုက်ကျယ်သော logo ကို လေးထောင့်ပုံသို့ ချုံ့လိုက်ပါက အလယ်တွင် ပါးလွှာသော အစင်းလေးသာ ကျန်ခဲ့မည်။

• သင့် brand တွင် သင်္ကေတရှိပါက အရွယ်ကို ချုံ့ရုံမက သေးငယ်သော အရွယ်အတွက် ရိုးရှင်းစေပါ။ အသေးစိတ်ပိုနည်းသော "favicon မူကွဲ" သည် စံအလေ့အထဖြစ်သည်။
• သင့် brand သည် wordmark သာဖြစ်ပါက ပထမစာလုံး သို့မဟုတ် ထူးခြားသော စာလုံးနှစ်လုံးကိုယူပြီး brand typeface ဖြင့် ထူသော weight ဖြင့် သတ်မှတ်ပါ။
• အသုံးပြုသူက နေရာတိုင်းတွင် brand တူကို မှတ်မိစေရန် အရောင်များကို သင့် logo၊ app icon နှင့် social avatar များနှင့် တသမတ်တည်း ထားပါ။

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

4. အရောင် - ကန့်သတ်ထားသော၊ ရင့်သန်သော palette

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

accessibility အတွေးအခေါ်မှ အနည်းငယ် ချေးယူပါ။ WCAG သည် အဓိပ္ပာယ်ရှိသော ဂရပ်ဖစ်အရာဝတ္ထုများအတွက် အနည်းဆုံး 3:1 contrast ကို တောင်းဆိုသည် (success criterion 1.4.11၊ Non-text Contrast)။ favicon သည် စာမျက်နှာအကြောင်းအရာမဟုတ်ဘဲ browser chrome ဖြစ်သောကြောင့် တရားဝင် အကျုံးမဝင်သော်လည်း glyph နှင့် ၎င်း၏ နောက်ခံအကြား၊ အိုင်ကွန်နှင့် tab အကြား 3:1 သည် သင့်လျော်သော ပစ်မှတ်ဖြစ်သည်။ ထို့အပြင် အရောင်အသွေးတစ်ခုတည်းဖြင့် မည်သည့်အရာကိုမျှ မဖော်ပြပါနှင့်။ အိုင်ကွန်တူ၏ အနီနှင့် အစိမ်း မူကွဲများကို အရောင်ကန်းသူများစွာ ခွဲမရနိုင်သဖြင့် ပုံသဏ္ဍာန်ကို ကွဲပြားစေပါ သို့မဟုတ် သင်္ကေတတစ်ခု ထည့်ပါ။

5. ပုံသဏ္ဍာန်၊ padding နှင့် safe zone များ

လေးထောင့်ကို ပြည့်စေပါ

Browser tab များသည် favicon ကို သတ်မှတ်ထားသော သေးငယ်သောအရွယ်ဖြင့် ပြသသဖြင့် အပို margin သည် သင့်အမှတ်အသားကို ပိုသေးစေရုံသာဖြစ်သည်။ စံ tab အိုင်ကွန်များအတွက် canvas အများစုကို သုံးပြီး အသက်ရှူရန်နေရာ pixel တစ်ခု နှစ်ခုသာ ချန်ထားပါ။ ထိုသို့ဆိုလျှင် အမှတ်အသားသည် တတ်နိုင်သမျှ ကြီးမည်။

ထောင့်ဝိုင်းလား၊ ထောင့်ကျဉ်းလား?

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

Apple touch icon များ

iOS သည် apple-touch-icon (180x180 သည် ပုံမှန်အရွယ်) ကို ကိုယ်ပိုင်ထောင့်ဝိုင်းများ ထည့်ပေးသည်။ ထောင့်ကို ကြိုမဝိုင်းထားသော full-bleed လေးထောင့်ကို ပေးပါ၊ မဟုတ်ပါက ထောင့်များတွင် မြင်ရသော အမှောင် သို့မဟုတ် အဖြူ အပိုင်းအစများ ဖြစ်ပေါ်နိုင်သည်။

Android နှင့် PWA များအတွက် Maskable icon များ

Maskable icon များကို လည်ပတ်မှုစနစ်က စက်ဝိုင်း၊ squircle သို့မဟုတ် အခြားပုံသဏ္ဍာန်များအဖြစ် ဖြတ်တောက်သည်။ အရေးကြီးသော အကြောင်းအရာအားလုံးကို safe zone အတွင်းထားပါ - အိုင်ကွန်အလယ်ရှိ အချင်းဝက်သည် အိုင်ကွန်အကျယ်၏ ၄၀ ရာခိုင်နှုန်းဖြစ်သော စက်ဝိုင်း။ မည်သည့် mask မဆို မှန်ကန်စွာ ပေါ်စေရန် နောက်ခံအရောင်ကို အနားအထိ ဆက်ဆန့်ပါ။ တင်းကျပ်၍ အနားမှအနားထိရှိသော tab favicon ကို maskable icon အဖြစ် ပြန်မသုံးပါနှင့်၊ mask က ဖြတ်တောက်သွားမည်။

6. ဖောက်ထွင်းမြင်ရမှု (Transparency)

Tab favicon များအတွက် ဖောက်ထွင်းမြင်ရမှုသည် အဆင်ပြေပြီး glyph သက်သက်အိုင်ကွန်ကို မည်သည့် tab အရောင်ပေါ်တွင်မဆို သပ်ရပ်စွာ နေရာယူစေသည်။ သို့သော် Apple touch icon များအတွက်မူ ပြဿနာဖြစ်သည် - iOS သည် ဖောက်ထွင်းမြင်ရသော နေရာများကို အစိုင်အခဲအရောင် (များသောအားဖြင့် အနက်) ဖြင့် ဖြည့်ပေးပြီး ဒီဇိုင်းကို ပျက်စီးစေနိုင်သည်။ apple-touch-icon ကို brand အရောင်ရှိ ဖောက်မမြင်ရသော နောက်ခံ အမြဲပေးပါ။ maskable icon များနှင့် Android home-screen အသုံးပြုမှု အများစုတွင်လည်း ထိုနည်းတူပင်ဖြစ်ပြီး ဖောက်မမြင်ရသော နောက်ခံသည် ခန့်မှန်းနိုင်သော ရလဒ်ကိုပေးသည်။

7. တည်ငြိမ်မှု - မကြာခဏ မပြောင်းပါနှင့်

Favicon သည် ထပ်ခါထပ်ခါ မြင်ရခြင်းဖြင့် မှတ်မိမှုကို တည်ဆောက်သည်။ မကြာခဏ ပြောင်းလဲပါက အသုံးပြုသူများသည် မည်သည့် tab က သင့်ဆိုက်ဖြစ်သည်ကို ပြန်သင်ယူရပြီး နည်းပညာဆိုင်ရာ ခေါင်းကိုက်စရာများလည်း ဖြစ်စေသည်။ Browser များသည် favicon များကို အပြင်းအထန် cache လုပ်ပြီး Google သည် သင့်စာမျက်နှာများနှင့် သီးခြားစီ ရယူသိမ်းဆည်းသဖြင့် အိုင်ကွန်အသစ်သည် ရှာဖွေမှုရလဒ်များတွင် ပေါ်လာရန် ရက်များ သို့မဟုတ် ရက်သတ္တပတ်များ ကြာနိုင်သည်။ Google သည် တည်ငြိမ်သော favicon URL၊ အရွယ်အစားသည် pixel ၄၈ ၏ အဆဖြစ်သော အိုင်ကွန် (48x48, 96x96 စသည်) နှင့် crawl လုပ်နိုင်သော ဖိုင် (robots.txt ဖြင့် မပိတ်ထားသော) ကိုလည်း တောင်းဆိုသည်။ favicon ပြောင်းလဲမှုကို ရာသီအလှဆင်မှုအဖြစ်မဟုတ်ဘဲ rebrand အဆင့် ဆုံးဖြတ်ချက်အဖြစ် သဘောထားပါ။

8. အသိပေးချက်အခြေအနေများနှင့် dynamic favicon များ

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

• badge ငယ်ကို သုံးပါ (အစက် သို့မဟုတ် တိုတောင်းသော အရေအတွက်) ထောင့်တစ်နေရာတွင် ထားပါ၊ ဒီဇိုင်းတစ်ခုလုံး ပြန်မပြောင်းပါနှင့်။ အခြေခံအိုင်ကွန်သည် မှတ်မိနိုင်ရမည်။
• ကျဲကျဲသုံးပါ။ badge များကို အသုံးပြုသူ လုပ်ဆောင်ချက်လိုအပ်သော ဖြစ်ရပ်များအတွက်သာ သီးသန့်ထားပါ။ အိုင်ကွန်ကို မပြတ် animation မလုပ်ပါနှင့်။
• ဂဏန်းများကို ကန့်သတ်ပါ။ 16x16 တွင် ဂဏန်းတစ်လုံး သို့မဟုတ် နှစ်လုံးသာ ဖတ်ရနိုင်သည်။ "137" အစား "9+" သို့မဟုတ် ရိုးရိုးအစက်ကို ပြပါ။
• အမြန်ပြန်လည်သတ်မှတ်ပါ အသုံးပြုသူက အကြောင်းအရာကို ကိုင်တွယ်ပြီးသည်နှင့် မူလအိုင်ကွန်ကို ပြန်ထားပါ။
• အရောင်တစ်ခုတည်းကို မမှီခိုပါနှင့်။ အနီရောင်အစက်ကို "(3) Inbox" ကဲ့သို့ စာမျက်နှာခေါင်းစဉ်ဖြင့်လည်း ပံ့ပိုးသင့်ပြီး ထိုအခါ အချက်အလက်ကို လူတိုင်း ရရှိနိုင်သည်။

Dynamic favicon များကို များသောအားဖြင့် canvas ပေါ်တွင် ဆွဲပြီး icon link element ၏ href ကို အပ်ဒိတ်လုပ်ကာ အစားထိုးသည်။ favicon ကို အဆက်မပြတ် ပြောင်းလဲခြင်းသည် CPU ကို သုံးပြီး အသုံးပြုသူများကို အာရုံပျံ့လွင့်စေနိုင်သဖြင့် အပ်ဒိတ်များကို ကန့်သတ်ပါ။

9. စွမ်းဆောင်ရည်

Favicon များသည် သေးငယ်သော်လည်း မကောင်းစွာ လုပ်ဆောင်နိုင်သော request များ ဖြစ်နေဆဲဖြစ်သည်။

• ဖိုင်များကို သေးအောင်ထားပါ။ PNG favicon သည် များသောအားဖြင့် byte ရာဂဏန်းမှ kilobyte အနည်းငယ်အထိ ရှိသည်။ ရိုးရှင်းသော SVG သည် 1 KB အောက်ဖြစ်နိုင်သည်။
• ဖောင်းပွနေသော ICO ဖိုင်များကို ရှောင်ပါ။ 16၊ 32 နှင့် 48 pixel ပုံများပါ multi-size ICO ဖိုင်သည် လုံလောက်သည်။ 256x256 ပုံကို ထည့်သွင်းခြင်းသည် browser tab များတွင် မြင်သာသော အကျိုးမရှိဘဲ ဖိုင်အရွယ်အစားကို မြှောက်တိုးစေသည်။
• Caching header များ သတ်မှတ်ပါ။ အိုင်ကွန်များကို ရှည်လျားသော Cache-Control သက်တမ်းဖြင့် ပေးပို့ပါ၊ ဥပမာ public, max-age=31536000, immutable ဖြစ်ပြီး ပြောင်းလဲသည့်အခါ version သို့မဟုတ် hash ပါသော ဖိုင်အမည်ကို သုံးပါ။
• အိုင်ကွန်များကို ရှင်းလင်းစွာ ကြေညာပါ။ Browser များသည် /favicon.ico ကို မူလအတိုင်း တောင်းဆိုသည်။ အခြားအိုင်ကွန်များ ကြေညာထားသော်လည်း သင့် log များတွင် 404 ဆူညံမှု မဖြစ်စေရန် တစ်ခု ပေးထားပါ။
• ချုံ့ပါ။ PNG များကို lossless optimiser ဖြင့် ဖြတ်သန်းစေပြီး SVG များကို minify လုပ်ပါ။

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

ဤဖိုင်အားလုံးကို မူရင်းပုံတစ်ပုံတည်းမှ ထုတ်လုပ်လိုပါက MakeFav favicon generator သည် စံအစုကို ထုတ်ပေးပြီး developers စာမျက်နှာ တွင် ပေါင်းစပ်အသုံးပြုနည်း ရွေးချယ်စရာများကို ဖော်ပြထားသည်။

10. Accessibility

Favicon တွင် alt စာသားမရှိပြီး screen reader များက ၎င်းကို မကြေညာသဖြင့် alt attribute ကဲ့သို့သော ရိုးရာ accessibility ကိရိယာများ မသက်ဆိုင်ပါ။ အရေးပါသည်မှာ -

• စာမျက်နှာခေါင်းစဉ်က အဓိပ္ပာယ်ကို သယ်ဆောင်သည်။ ထူးခြားပြီး ဖော်ပြချက်ရှိသော <title> element များ ရေးပါ။ အခြေအနေကို ဖော်ပြရန် အိုင်ကွန်ကို ဘယ်တော့မှ မမှီခိုပါနှင့်၊ မည်သည့် badge ကိုမဆို ခေါင်းစဉ်တွင် ထပ်တူဖော်ပြပါ။
• အမြင်အားနည်းသူများအတွက် မြင်သာမှု။ မြင့်မားသော contrast၊ ထူသောပုံသဏ္ဍာန်နှင့် ကြီးသော အမှတ်အသားသည် tab များကို မျက်လုံးဖြင့် ရှာဖွေသူများကို ကူညီသည်။
• အရောင်ကို မမှီခိုခြင်း။ အခြေအနေများကို အရောင်အသွေးတစ်ခုတည်းမဟုတ်ဘဲ ပုံသဏ္ဍာန် သို့မဟုတ် စာလုံးများဖြင့် ခွဲခြားနိုင်ကြောင်း သေချာပါစေ။
• အာရုံပျံ့လွင့်မှု လျှော့ချခြင်း။ လှုပ်ရှားမှုကို အထိခိုက်မခံသူများအတွက် ပြဿနာဖြစ်စေနိုင်သော မီးလက်ခြင်း သို့မဟုတ် animation ပါသော favicon များကို ရှောင်ပါ။

Favicon UX checklist

စမ်းသပ်ရန် checklist

သင့်ဒီဇိုင်းကိရိယာရှိ ကြီးမားသော preview ကို မယုံပါနှင့်။ တကယ့်အိုင်ကွန်ကို တကယ့်အခြေအနေများတွင် စမ်းသပ်ပါ။

1. Browser များစွာ။ Chrome၊ Firefox၊ Safari နှင့် Edge ကို စစ်ဆေးပါ၊ တစ်ခုချင်းစီသည် အိုင်ကွန်နှင့် အရွယ်အစားများကို အနည်းငယ်ကွဲပြားစွာ ရွေးသည်။
2. Light နှင့် dark mode။ OS နှင့် browser theme ကို ပြောင်းပြီး အကြိမ်တိုင်း tab strip ကို ကြည့်ပါ။
3. Retina နှင့် စံမျက်နှာပြင်များ။ 1x monitor နှင့် 2x သို့မဟုတ် 3x မျက်နှာပြင်တွင် စစ်ဆေးပြီး browser တွင် zoom ဆွဲကြည့်ပါ။
4. Bookmark bar။ စာမျက်နှာကို bookmark လုပ်ပြီး အခြားဆိုက်များဘေးတွင် အိုင်ကွန်ကို ဖတ်ရနေသေးသလား ကြည့်ပါ။
5. Tab အများအပြား။ Tab ၂၀ ဖွင့်ပြီး သင့်ဆိုက်ကို တစ်ချက်ကြည့်ရုံဖြင့် ရှာတွေ့နိုင်မလား ကြည့်ပါ။
6. Google SERP preview။ အိုင်ကွန်ကို ပြန် crawl လုပ်ပြီးနောက် မိုဘိုင်းရှာဖွေမှုရလဒ်ကို စစ်ဆေးပါ။ အပ်ဒိတ်ဖြစ်ရန် အချိန်ယူနိုင်ကြောင်း သတိရပါ။
7. Home screen။ ဆိုက်ကို iOS နှင့် Android home screen များသို့ ထည့်ပြီး အိုင်ကွန်ကို မဖြတ်တောက်ထားခြင်း၊ အနက်ရောင်ထောင့်များ မရှိခြင်းနှင့် mask အတွင်း သေးလွန်းခြင်းမရှိခြင်းတို့ကို အတည်ပြုပါ။
8. နည်းပညာဆိုင်ရာ စစ်ဆေးမှု။ ဖိုင်များ ရှိနေခြင်း၊ 200 status ပြန်ခြင်း၊ မှန်ကန်သောအရွယ်အစားများရှိခြင်းနှင့် သင့် HTML တွင် မှန်ကန်စွာ ကြေညာထားခြင်းတို့ကို အတည်ပြုရန် သင့် domain ကို MakeFav favicon checker ဖြင့် စစ်ဆေးပါ။

လက်တွေ့ workflow

1. သင့် logomark မှ စတင်ပြီး ပုံသဏ္ဍာန်တစ်ခု သို့မဟုတ် စာလုံးတစ်လုံးအဖြစ် ရိုးရှင်းစေပါ။
2. theme နှစ်မျိုးလုံးတွင် အလုပ်ဖြစ်သော အစိုင်အခဲ သို့မဟုတ် ပုံသဏ္ဍာန်ပါသော နောက်ခံဖြင့် လေးထောင့် canvas တစ်ခု ဖန်တီးပါ။
3. 32x32 နှင့် 16x16 အရွယ်များကို export လုပ်ပြီး pixel editor တွင် သေးငယ်သောမူကို လက်ဖြင့် ပြုပြင်ပါ။
4. generator ဖြင့် အစုအပြည့်အစုံ (ICO၊ PNG၊ apple-touch-icon၊ manifest icon များ) ကို ထုတ်လုပ်ပါ။
5. link tag များ ထည့်ပါ၊ cache header များ သတ်မှတ်ပါ၊ deploy လုပ်ပြီး checker ဖြင့် အတည်ပြုပါ။

Favicon သည် သင့်ဆိုက်ရှိ အသေးငယ်ဆုံး asset များထဲမှ တစ်ခုဖြစ်ပြီး အမြင်ရအများဆုံးထဲမှလည်း တစ်ခုဖြစ်သည်။ contrast၊ ရိုးရှင်းမှုနှင့် တသမတ်တည်းဖြစ်မှုနှင့်ပတ်သက်၍ ဂရုတစိုက်ဆုံးဖြတ်ချက် အနည်းငယ်သည် ၎င်းကို tab၊ theme နှင့် စက်ပစ္စည်းတိုင်းတွင် အလုပ်ဖြစ်စေသည်။

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

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

Browser tab များအတွက် 16x16 နှင့် 32x32 ကို ဒီဇိုင်းဆွဲပါ (density မြင့်သော မျက်နှာပြင်များတွင် browser က 32x32 ကို သုံးသည်)၊ iOS အတွက် 180x180 apple-touch-icon နှင့် Android နှင့် PWA များအတွက် 192x192 နှင့် 512x512 PNG များ ပေးပါ။ Google ရှာဖွေမှုရလဒ်များအတွက် 48x48 သို့မဟုတ် 96x96 ကဲ့သို့ အရွယ်အစားသည် pixel ၄၈ ၏ အဆဖြစ်သော လေးထောင့်အိုင်ကွန်ကို သုံးပါ။ SVG source သည် ၎င်းတို့အားလုံးသို့ scale လုပ်နိုင်သည်။

ကျွန်ုပ်၏ logo အပြည့်အစုံကို favicon အဖြစ် သုံးသင့်သလား?

များသောအားဖြင့် မသင့်ပါ။ wordmark ပါသော logo အပြည့်အစုံသည် 16x16 လေးထောင့်အိုင်ကွန်အတွက် အသေးစိတ်များလွန်းပြီး ကျယ်လွန်းသည်။ logomark သို့မဟုတ် စာလုံးတစ်လုံး နှစ်လုံးပါ monogram ကို သုံးပြီး အလွန်သေးသောအခါတွင်ပင် မှတ်မိနိုင်စေရန် ရိုးရှင်းစေပါ။

Favicon ကို dark mode တွင် မည်သို့ အလုပ်ဖြစ်စေရမည်နည်း?

အလုံခြုံဆုံးနည်းလမ်းမှာ tab အရောင်ပေါ်မမူတည်စေရန် အိုင်ကွန်ကို ကိုယ်ပိုင်အစိုင်အခဲနောက်ခံပုံသဏ္ဍာန် သို့မဟုတ် ဆန့်ကျင်ဘက်အရောင်ပြင်ပမျဉ်း ပေးခြင်းဖြစ်သည်။ တစ်နည်းအားဖြင့် အရောင်ပြောင်းရန် prefers-color-scheme media query ပါ SVG favicon ကို သုံးပြီး SVG အိုင်ကွန်များကို မပံ့ပိုးသော browser များအတွက် PNG သို့မဟုတ် ICO fallback များ ထားပါ။ light နှင့် dark theme နှစ်မျိုးလုံးတွင် အမြဲစမ်းသပ်ပါ။

ကျွန်ုပ်၏ favicon အသစ် ဘာကြောင့် မပေါ်သနည်း?

Browser များသည် favicon များကို အချိန်ကြာမြင့်စွာ cache လုပ်ပြီး Google သည် ကိုယ်ပိုင်မိတ္တူကို သိမ်းဆည်းကာ ကိုယ်ပိုင်အချိန်ဇယားအတိုင်း ပြန်လည်ရယူသည်၊ မကြာခဏ ရက်များ သို့မဟုတ် ရက်သတ္တပတ်များ ကြာသည်။ စာမျက်နှာကို hard-refresh လုပ်ပါ၊ browser cache ကို ရှင်းပါ၊ version ပါသော ဖိုင်အမည်အသစ်ကို သုံးပါ၊ link tag များနှင့် root /favicon.ico သည် မှန်ကန်သောဖိုင်ကို ညွှန်ပြနေကြောင်း သေချာပါစေ။ တပ်ဆင်မှုကို MakeFav checker ဖြင့် အတည်ပြုနိုင်သည်။

Favicon တွင် notification badge များ ပြသခြင်းသည် ကောင်းသော အကြံဉာဏ်လား?

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