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

2026 ခုနှစ်တွင် အကောင်းဆုံး favicon အစုံမှာ - 16၊ 32 နှင့် 48 px ပုံများပါဝင်သော favicon.ico၊ (Google Search အတွက်) 96x96 PNG၊ ရွေးချယ်နိုင်သော SVG favicon၊ 180x180 apple-touch-icon.png၊ ထို့နောက် web app manifest တွင် ကြေညာထားသော 192x192 နှင့် 512x512 PNG များ (maskable 512 ပါ ထပ်ပေါင်း) တို့ ဖြစ်သည်။ Windows tile များနှင့် အဟောင်း Apple အရွယ်အစားများကို အလွန်ဟောင်းသော စက်များကို ထောက်ပံ့ရန် လိုမှသာ လိုအပ်သည်။ အောက်တွင် အကြောင်းရင်းများကို အရွယ်အစားဇယား၊ အသင့်သုံး HTML နှင့် ရှောင်ရန် အမှားများနှင့်အတူ ရှင်းပြထားသည်။

Favicon ကဏ္ဍသည် ယခင်က ရှုပ်ထွေးခဲ့သည် - browser နှင့် operating system တိုင်းက ကိုယ်ပိုင်အရွယ်အစားကို တောင်းဆိုခဲ့ပြီး စာကြောင်း 20 ခန့်ရှိသော နာမည်ကြီး <head> ကုဒ်များ ဖြစ်ပေါ်စေခဲ့သည်။ ယနေ့တွင် ထိုအရာအများစုမှာ ခေတ်ကုန်သွားပြီ။ ခေတ်သစ် browser များသည် ကောင်းမွန်သော အိုင်ကွန်တစ်ခုကို အရွယ်ချိန်ညှိပေးကြပြီး iOS က အရွယ်အစားတစ်ခုသာ လိုအပ်ကာ Android က manifest ကို ဖတ်သည်။ ဤဆောင်းပါးသည် အမှန်တကယ် လိုအပ်သည့်အရာနှင့် ရှိလျှင်ကောင်းသည့်အရာကို ခွဲပြထားသည်။

အတိုချုပ်အဖြေ - favicon ဖိုင်များ၏ အကောင်းဆုံးအစုံ

• ဝက်ဘ်ဆိုက်၏ root တွင် favicon.ico (ဖိုင်တစ်ခုတည်းတွင် 16၊ 32၊ 48 px)။ Browser များ၊ feed reader များနှင့် ကိရိယာများစွာက /favicon.ico ကို အလိုအလျောက် ဆက်လက်တောင်းဆိုကြသည်။
• မည်သည့်အရွယ်အစားတွင်မဆို ပြတ်သားစွာပြသနိုင်ရန်နှင့် dark mode ကို ထောက်ပံ့ရန် favicon.svg (ရွေးချယ်နိုင်သော်လည်း အကြံပြုသည်)။
• ထင်ရှားသော အစားထိုးဖိုင်များအဖြစ် PNG 16x16၊ 32x32 နှင့် 96x96။ Google Search သည် 48 px ၏ ဆများကို လိုအပ်သဖြင့် 96 px ဗားရှင်းက အထောက်အကူဖြစ်သည်။
• 180x180 အရွယ်ရှိ apple-touch-icon.png၊ ပွင့်လင်းမှုမရှိ (transparency မပါ)။
• manifest.json ထဲတွင် 192x192 နှင့် 512x512 PNG နှင့် Android အတွက် maskable 512x512 အိုင်ကွန်။
• မိုဘိုင်းတွင် browser UI အရောင်ခြယ်ရန် theme-color meta tag။
• အဟောင်း Windows နှင့် IE11 pinned site များအတွက်သာ browserconfig.xml ပါသော Windows tile များ (70၊ 150၊ 310 px)။

Favicon အရွယ်အစားဇယား - ရည်ရွယ်ချက်၊ ဖိုင်အမည်နှင့် ဦးစားပေးမှု

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

favicon.ico - ဖိုင်တစ်ခုတည်းတွင် 16၊ 32 နှင့် 48 px

ICO ဖိုင်သည် bitmap များစွာကို ထည့်သွင်းထားနိုင်သော container တစ်ခု ဖြစ်သည်။ ကောင်းမွန်သော favicon.ico တွင် 16x16၊ 32x32 နှင့် 48x48 ပုံများ ပါဝင်သဖြင့် browser သို့မဟုတ် OS က အနီးစပ်ဆုံးကို ရွေးချယ်နိုင်သည်။ ၎င်းကို သင့်ဒိုမိန်း၏ root တွင် (https://example.com/favicon.ico) ထားပါ။ သင့် HTML က အခြားနေရာကို ညွှန်ထားလျှင်ပင် crawler များ၊ RSS reader များနှင့် browser အဟောင်းများစွာက ထို URL အတိအကျကို ဆက်လက်တောင်းဆိုကြသဖြင့် ၎င်းရှိနေခြင်းက သင့် log များရှိ 404 ဆူညံမှုကို ရှောင်ရှားပေးသည်။

PNG တစ်ခုကို .ico သို့ အမည်ပြောင်းရုံမျှဖြင့် မလုပ်ပါနှင့်။ Browser အများစုက လက်ခံသော်လည်း ကိရိယာအချို့က ပယ်ချပြီး ဖြေရှင်းချက်အမျိုးမျိုးပါဝင်သည့် အကျိုးကိုလည်း ဆုံးရှုံးသည်။ အစစ်အမှန် ICO ကို export လုပ်ပါ။

PNG favicon များ - 16၊ 32 နှင့် 96 px

ထင်ရှားသော sizes ပါသည့် PNG link များက browser အား ICO ကို ခွဲခြမ်းစိတ်ဖြာစရာမလိုဘဲ အကောင်းဆုံး bitmap ကို ရွေးချယ်စေသည်။ လက်တွေ့တွင် 32x32 က high-DPI tab များကို ဖုံးလွှမ်းပြီး 16x16 သည် ယနေ့ အနည်းငယ်သာ အလိုအပ်ဖြစ်သည်။ Google Search သည် ရလဒ်များဘေးတွင် favicon များကို ပြသပြီး 48 px ၏ ဆဖြစ်သော အရွယ်ရှိ လေးထောင့်ကျသည့်အိုင်ကွန် (48x48၊ 96x96၊ 144x144 စသည်) ကို လိုအပ်သဖြင့် 96x96 အရွယ်ကို ထည့်ရန် တန်ဖိုးရှိသည်။ မိုဘိုင်းရလဒ်များအတွက် အရွယ်ချုံ့သည့်အခါ 96 px ဖိုင်က 48 px ထက် Google အတွက် ပိုပြတ်သားသော အရင်းအမြစ်ဖြစ်စေသည်။

ဒီဇိုင်းအကြံပြုချက် - 16 px တွင် အသေးစိတ်များ ပျောက်သွားသည်။ ထင်ရှားပြီး ရိုးရှင်းသော ပုံသဏ္ဍာန်၊ ခိုင်မာသော အရောင်ကွာခြားမှုကို အသုံးပြုပြီး စာသားကို အနည်းငယ်သာ သို့မဟုတ် လုံးဝမထည့်ပါနှင့်။ Export မလုပ်မီ MakeFav editor တွင် သင့်အိုင်ကွန်ကို ပြင်ဆင်ကာ ကြိုကြည့်နိုင်သည်။

SVG favicon နှင့် dark mode

SVG favicon သည် မျက်နှာပြင်သိပ်သည်းမှုမည်မျှရှိစေ ပြတ်သားနေသော သေးငယ်သည့် ဖိုင်တစ်ခုတည်း ဖြစ်သည်။ Chromium အခြေပြု browser များနှင့် Firefox တို့က ထောက်ပံ့သည်။ Safari ၏ ထောက်ပံ့မှုမှာ သမိုင်းကြောင်းအရ ကန့်သတ်ထားသဖြင့် SVG တစ်ခုတည်းကို ဘယ်တော့မှ မမှီခိုပါနှင့် - ICO နှင့် PNG အစားထိုးဖိုင်များကို ထားရှိပါ။

အကြီးမားဆုံး အားသာချက်မှာ theme ပြောင်းလဲနိုင်ခြင်း ဖြစ်သည်။ SVG တွင် CSS ပါဝင်နိုင်သဖြင့် prefers-color-scheme ဖြင့် အသုံးပြုသူ၏ အရောင်ဆင်းနှင့် အိုင်ကွန်ကို လိုက်ဖက်စေနိုင်သည်။

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Media query သည် tab bar အသုံးပြုသည့် browser သို့မဟုတ် OS theme ကို ထင်ဟပ်သည်ကို သတိပြုပါ။ သင့်ကိုယ်ပိုင်ဝက်ဘ်ဆိုက်ရှိ theme toggle ကို မလိုက်ပါ။

သိရှိထားသော အမှားတစ်ခု - ICO နှင့် SVG နှစ်ခုလုံး စာရင်းသွင်းထားလျှင် Chrome သည် ICO ကို ရွေးချယ်တတ်သည်။ ICO ကို sizes="32x32" ဖြင့် ကြေညာပြီး SVG ကို နောက်မှ စာရင်းသွင်းလျှင် အောက်ပါကုဒ်တွင် ပြထားသည့်အတိုင်း Chrome က SVG ကို ဦးစားပေးသည်။

Apple touch icon - 180x180 နှင့် အဟောင်းအရွယ်အစားများ

အသုံးပြုသူတစ်ဦးက သင့်ဆိုက်ကို iOS သို့မဟုတ် iPadOS home screen သို့ ထည့်သည့်အခါ Safari သည် apple-touch-icon ကို အသုံးပြုသည်။ ယနေ့ 180x180 px PNG တစ်ခုတည်း လုံလောက်သည် - iOS က စက်အဟောင်းများနှင့် iPad များအတွက် အရွယ်ချုံ့ပေးသည်။ ၎င်းကို apple-touch-icon.png ဟု အမည်ပေးပြီး root တွင် ထားပါ။ link tag မရှိလျှင်ပင် iOS က ထိုဖိုင်ကို မူလအတိုင်း ရှာဖွေသည်။

Apple အိုင်ကွန်အတွက် စည်းမျဉ်းများ -

• ပွင့်လင်းမှု (transparency) မထားပါနှင့်။ iOS က ပွင့်လင်းသော pixel များကို အနက်ရောင်ဖြင့် ဖြည့်သဖြင့် ပွင့်လင်းသော လိုဂိုသည် အနက်ရောင်အစက်ကြီး ဖြစ်သွားတတ်သည်။ ခိုင်မာသော နောက်ခံအရောင်ထည့်ပါ။
• ထောင့်များကို မလုံးပါနှင့်။ iOS က ကိုယ်ပိုင် ထောင့်လုံး mask ကို အသုံးပြုသည်။ လေးထောင့်ပြည့် ပေးပါ။
• ထောင့်များ ဖြတ်တောက်ခံရသဖြင့် အရေးကြီးသော အကြောင်းအရာကို အစွန်းများနှင့် ဝေးဝေးထားပါ။

အဟောင်းအရွယ်အစားများ (57၊ 72၊ 76၊ 114၊ 120၊ 144၊ 152၊ 167) ကို မည်သည့်အခါ လိုအပ်သနည်း။ iOS 6 သို့မဟုတ် ထိုထက်စောသောဗားရှင်းကို ထောက်ပံ့ရမည်ဆိုလျှင် သို့မဟုတ် iPad Pro (167 px) နှင့် iPad (152 px) အတွက် စက်အလိုက် pixel တိကျစွာ ထိန်းချုပ်လိုလျှင်သာ ဖြစ်သည်။ 2026 ခုနှစ်တွင် ဆိုက်အားလုံးနီးပါးအတွက် 180x180 ဖိုင်တစ်ခုတည်း လုံလောက်သည်။ အောက်ရှိ အကြီးမားဆုံးတွဲဖက်နိုင်မှု setup တွင် ပြည့်စုံစေရန် အချို့ ထည့်ထားသည်။

Android နှင့် PWA အိုင်ကွန်များ - 192၊ 512 နှင့် maskable

Android ရှိ Chrome နှင့် PWA ထောက်ပံ့သည့် အခြား browser များသည် <link rel="icon"> မှမဟုတ်ဘဲ web app manifest မှ အိုင်ကွန်များကို ဖတ်သည်။ Install လုပ်နိုင်ရန် အနည်းဆုံး 192x192 နှင့် 512x512 PNG လိုအပ်သည်။ 192 px အိုင်ကွန်ကို home screen နှင့် app launcher တွင် သုံးပြီး 512 px အိုင်ကွန်သည် splash screen နှင့် install dialog များတွင် ပေါ်လာသည်။

Maskable အိုင်ကွန်များနှင့် safe zone

Android adaptive icon များကို စက်ပေါ်မူတည်၍ စက်ဝိုင်း၊ squircle သို့မဟုတ် အခြားပုံသဏ္ဍာန်သို့ ဖြတ်တောက်နိုင်သည်။ Maskable အိုင်ကွန်ကို လုံခြုံစွာ ဖြတ်တောက်နိုင်ရန် ဒီဇိုင်းထုတ်ထားသည် - အရေးကြီးသော အကြောင်းအရာသည် safe zone၊ ပုံ၏ 80% အချင်းရှိ အလယ်ဗဟို စက်ဝိုင်း (အချင်းဝက်သည် အနား၏ 40%) အတွင်းတွင် ရှိရမည်။ 512x512 ဖိုင်အတွက် သင့်လိုဂိုကို အချင်း 410 px ခန့်ရှိသော စက်ဝိုင်းအတွင်း ထားရှိပြီး mask လုပ်ပြီးနောက် ကွက်လပ်မပေါ်စေရန် နောက်ခံအရောင်ကို အနားလေးဖက်လုံးသို့ ဆန့်ထုတ်ရမည်ဟု ဆိုလိုသည်။

Maskable အိုင်ကွန်ကို "purpose": "maskable" ဖြင့် သီးခြား entry အဖြစ် ကြေညာပါ။ ဖိုင်တစ်ခုတည်းတွင် "any maskable" ကို ရှောင်ပါ - mask လုပ်ရန် လိုအပ်သော padding သည် အိုင်ကွန်ကို mask မလုပ်ဘဲ ပြသသည့်အခါ အလွန်သေးငယ်နေသည့်ပုံ ဖြစ်စေသည်။

manifest.json နမူနာ

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

ဖိုင်ကို application/manifest+json (သို့မဟုတ် application/json) အဖြစ် ပေးပို့ပြီး စာမျက်နှာတိုင်းမှ <link rel="manifest" href="/manifest.json"> ဖြင့် ချိတ်ဆက်ပါ။ ပရောဂျက်အချို့က ၎င်းကို site.webmanifest ဟု အမည်ပေးကြသည်၊ အမည်က အရေးမကြီးပါ၊ link ကသာ အရေးကြီးသည်။

Windows tile များနှင့် browserconfig.xml

Windows 8.1 နှင့် 10 တို့တွင် အသုံးပြုသူများက ဆိုက်တစ်ခုကို Start menu သို့ pin လုပ်နိုင်ပြီး IE11 နှင့် အဟောင်း Edge တို့သည် browserconfig.xml မှ tile ပုံများကို ဖတ်သည်။ ပုံမှန်အရွယ်အစားများမှာ 70x70 (သေး)၊ 150x150 (အလတ်)၊ 310x150 (ကျယ်) နှင့် 310x310 (ကြီး) ဖြစ်သည်။ Chromium အခြေပြု Edge က manifest နှင့် ပုံမှန် favicon များကို အစားထိုးသုံးသဖြင့် ၎င်းသည် အဟောင်းလုပ်ဆောင်ချက်ဖြစ်သည်။ သင့်ပရိသတ်တွင် ဥပမာ ကော်ပိုရိတ်ပတ်ဝန်းကျင်များကဲ့သို့ Windows အဟောင်းများ ရှိနေသေးမှသာ ထည့်ပါ။

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color - browser UI ကို အရောင်ခြယ်ခြင်း

theme-color meta tag သည် မိုဘိုင်း browser များ (နှင့် desktop browser အချို့) အား လိပ်စာဘား သို့မဟုတ် ခေါင်းစဉ်ဘားအတွက် မည်သည့်အရောင်ကို သုံးရမည်ကို ပြောပြသည်။ ၎င်းသည် favicon မဟုတ်သော်လည်း တူညီသော brand အစုံနှင့် သက်ဆိုင်သည်။ Light mode နှင့် dark mode အတွက် သီးခြားတန်ဖိုးများ ပေးနိုင်သည်။

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

အနည်းဆုံးခေတ်သစ် setup နှင့် အများဆုံးတွဲဖက်နိုင်မှု

အနည်းဆုံးခေတ်သစ် setup (ဆိုက်အများစုအတွက် အကြံပြု)

ဖိုင်ငါးခုက လက်တွေ့အသုံးပြုမှု၏ 99% ကျော်ကို ဖုံးလွှမ်းသည် - favicon.ico၊ favicon.svg၊ apple-touch-icon.png (180x180) နှင့် manifest အိုင်ကွန်နှစ်ခု (192 နှင့် 512)။ Google Search တွင် မြင်သာမှု အရေးကြီးလျှင် 96x96 PNG ကို ထည့်ပြီး PWA ထုတ်လုပ်မည်ဆိုလျှင် maskable အိုင်ကွန်ကို ထည့်ပါ။

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

အများဆုံးတွဲဖက်နိုင်မှု setup

ကျယ်ပြန့်သော သို့မဟုတ် လုပ်ငန်းသုံးပရိသတ်ကို ဝန်ဆောင်မှုပေးသည့်အခါ၊ သို့မဟုတ် ဖြစ်နိုင်သမျှ client အားလုံးကို ဖုံးလွှမ်းလိုသည့်အခါ ဤအရာကို ရွေးချယ်ပါ။ ၎င်းတွင် ထင်ရှားသော PNG အရွယ်အစားများ၊ အဟောင်း Apple အရွယ်အစားများ၊ Windows tile များနှင့် theme အရောင်များ ထပ်ပါသည်။

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

/ ဖြင့် စတင်သော root-relative လမ်းကြောင်းများကို သတိပြုပါ။ ၎င်းတို့သည် စာမျက်နှာအတိမ်းအနက် မည်သို့ပင်ရှိစေ အလုပ်လုပ်သည်၊ ထို့ကြောင့် အသုံးအများဆုံး အမှားများဆီသို့ ရောက်လာပါသည်။

အသုံးများသော favicon အမှားများနှင့် ပြင်နည်း

1. လမ်းကြောင်း မှားယွင်းခြင်း

href="favicon.ico" ကဲ့သို့သော link သည် လက်ရှိ URL နှင့် နှိုင်းယှဉ်၍ ဖြေရှင်းသဖြင့် / တွင် အလုပ်လုပ်သော်လည်း /blog/post/ တွင် ပျက်သွားသည်။ Root-relative (/favicon.ico) သို့မဟုတ် absolute URL များကို သုံးပါ။ ဖိုင်များ အမှန်တကယ်ရှိကြောင်းလည်း စစ်ဆေးပါ - URL တစ်ခုချင်းစီကို browser တွင် တိုက်ရိုက်ဖွင့်ပြီး 404 စာမျက်နှာ သို့မဟုတ် login တံခါးဆီသို့ redirect မဟုတ်ဘဲ HTTP 200 ပြန်ပေးကြောင်း သေချာစေပါ။

2. sizes attribute ပျောက်ခြင်း သို့မဟုတ် မှားယွင်းခြင်း

sizes မပါလျှင် browser များသည် အိုင်ကွန်များကို စစ်ဆေးရန် ဒေါင်းလုဒ်လုပ်ရပြီး မှားယွင်းသည့်အရာကို ရွေးချယ်မိနိုင်သည်။ PNG link များတွင် sizes ကို အမြဲကြေညာပြီး အမှန်တကယ် pixel အတိုင်းအတာနှင့် ကိုက်ညီကြောင်း သေချာစေပါ။ 32x32 ဟု အမည်တပ်ထားသော်လည်း အမှန်တကယ် 64x64 ဖြစ်နေသည့်ဖိုင်က မညီမျှသော ရလဒ်များ ဖြစ်စေသည်။

3. ပြင်းထန်သော caching

Browser များသည် favicon များကို ကြာရှည်စွာ cache လုပ်ထားပြီး မကြာခဏ စာမျက်နှာ cache နှင့် သီးခြားဖြစ်သည်။ Brand ပြောင်းပြီးနောက် အိုင်ကွန်ဟောင်းသည် ရက်ပေါင်းများစွာ ကျန်နေနိုင်သည်။ ဖိုင်အမည်ကို ပြောင်းပါ သို့မဟုတ် version query string (/favicon.ico?v=2) ထည့်ပြီး link tag များကို ပြင်ပါ။ Hard reload သည် tab အိုင်ကွန်ကို မကြာခဏ မ refresh လုပ်ပေးပါ။ အိုင်ကွန် URL ကို တိုက်ရိုက်ဖွင့်ပြီး reload လုပ်ခြင်းက ပုံမှန်အားဖြင့် ရလဒ်ရှိသည်။

4. လေးထောင့်မကျသော ပုံများ

Favicon များသည် လေးထောင့်ကျရမည်။ ထောင့်မှန်စတုဂံလိုဂိုသည် မမျှော်လင့်ဘဲ ဆန့်ထွက်သွားခြင်း၊ ဖြတ်တောက်ခံရခြင်း သို့မဟုတ် letterbox ဖြစ်သွားခြင်း ဖြစ်တတ်သည်။ ကျယ်သော wordmark ကို ချုံ့မည့်အစား ကနဦးစာလုံး သို့မဟုတ် သင်္ကေတကဲ့သို့ သီးသန့် လေးထောင့်ကျသော အမှတ်အသားကို ဒီဇိုင်းထုတ်ပါ။

5. ပွင့်လင်းသော Apple touch icon များ အနက်ရောင်ဖြစ်သွားခြင်း

iOS က ပွင့်လင်းသောနေရာကို အနက်ရောင်ဖြင့် ဖြည့်သည်။ 180x180 အိုင်ကွန်ကို ပွင့်လင်းမှုမရှိသော နောက်ခံပေးပြီး ထောင့်များကို ကြိုမလုံးပါနှင့်။

6. Safe zone မပါသော maskable အိုင်ကွန်များ

လိုဂိုက maskable အိုင်ကွန်၏ အစွန်းများကို ထိနေလျှင် Android က ဖြတ်ပစ်လိမ့်မည်။ အလယ်ဗဟို 80% စက်ဝိုင်းအတွင်း ထားပြီး canvas တစ်ခုလုံးကို နောက်ခံအရောင်ဖြင့် ဖြည့်ပါ။

7. Crawler များကို အိုင်ကွန်များ ပိတ်ဆို့ခြင်း

robots.txt က သင့် favicon လမ်းကြောင်းကို ခွင့်မပြုလျှင် Google က ၎င်းကို မရယူနိုင်ဘဲ ရှာဖွေမှုရလဒ်များတွင် ယေဘုယျ globe အိုင်ကွန်ကို ပြလိမ့်မည်။ Google သည် favicon ကို စာမျက်နှာနှင့် host တူညီသည့်နေရာတွင် လိုအပ်ပြီး ရံဖန်ရံခါသာ refresh လုပ်သဖြင့် ပြောင်းလဲမှုများ ပေါ်လာရန် ရက် သို့မဟုတ် ရက်သတ္တပတ်များ ကြာနိုင်ကြောင်းလည်း သတိရပါ။

8. Manifest link သို့မဟုတ် purpose များ မေ့ခြင်း

ချိတ်ဆက်မထားသော manifest သို့မဟုတ် 192 နှင့် 512 px အိုင်ကွန်များ မပါသော manifest သည် Chrome တွင် install prompt ကို ပိတ်ဆို့သည်။ သင့် browser ၏ developer tools ရှိ Application tab တွင် စစ်ဆေးပါ။

အစုံလိုက်ကို တစ်ချက်နှိပ်ရုံဖြင့် ထုတ်လုပ်ပါ

ပုံတည်းဖြတ်ဆော့ဖ်ဝဲတွင် ဖိုင်ဆယ်ဒါဇင်ကို လက်ဖြင့်ပြုလုပ်ပြီး ICO သို့ ပြောင်းကာ manifest ရေးခြင်းသည် ပင်ပန်းပြီး အမှားများတတ်သည်။ MakeFav သည် ပုံ၊ စာသား သို့မဟုတ် emoji တစ်ခုတည်းမှ အထက်ပါဖိုင်အားလုံးကို ထုတ်လုပ်ပေးသည် - အရွယ်အစားစုံပါ favicon.ico၊ PNG များ၊ SVG၊ Apple touch icon၊ 192/512 PNG များ၊ maskable အိုင်ကွန်၊ Windows tile များ၊ manifest.json နှင့် browserconfig.xml၊ ထို့အပြင် ကူးထည့်ရန်အသင့် HTML အပိုင်းအစကိုပါ ZIP ဒေါင်းလုဒ်တစ်ခုတည်းဖြင့် ရရှိမည်။ editor တွင် နောက်ခံ၊ padding နှင့် ပုံသဏ္ဍာန်ကို ချိန်ညှိနိုင်ပြီး favicon checker ဖြင့် ရှိပြီးသား ဆိုက်ကို စစ်ဆေးနိုင်ကာ developer resources ဖြင့် ထုတ်လုပ်ခြင်းကို အလိုအလျောက်လုပ်နိုင်သည်။

Deployment စစ်ဆေးစာရင်း

1. ဖိုင်အားလုံးကို သင့်ဆိုက်၏ root သို့ upload လုပ်ပါ။
2. HTML အပိုင်းအစကို စာမျက်နှာတိုင်း (သို့မဟုတ် သင့်မျှဝေ layout) ၏ <head> ထဲသို့ ကူးထည့်ပါ။
3. လမ်းကြောင်းများသည် root-relative ဖြစ်ပြီး HTTP 200 ပြန်ပေးကြောင်း သေချာစေပါ။
4. Light နှင့် dark mode၊ iOS home-screen install နှင့် Android install ကို စစ်ဆေးပါ။
5. ပျောက်နေသော သို့မဟုတ် မကိုက်ညီသော အရွယ်အစားများကို ဖမ်းမိရန် checker ကို လုပ်ဆောင်ပါ။
6. အိုင်ကွန်ဟောင်းကို အစားထိုးထားလျှင် version string ဖြင့် cache များကို ကျော်လွှားပါ။

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

2026 တွင် favicon.ico ကို ဆက်လက်လိုအပ်သေးသလား။

လိုအပ်ပါသည်။ ခေတ်သစ် browser များက PNG နှင့် SVG ကို လက်ခံသော်လည်း crawler များ၊ feed reader များ၊ အီးမေးလ် client များနှင့် browser အဟောင်းများစွာက /favicon.ico ကို တိုက်ရိုက်ဆက်လက်တောင်းဆိုကြသည်။ 16၊ 32 နှင့် 48 px ပုံများပါ အရွယ်အစားစုံ ICO သည် အိုင်ကွန်ပျောက်ခြင်းနှင့် 404 အမှားများကို ကာကွယ်ပေးသော ဖိုင်သေးတစ်ခု ဖြစ်သည်။

Google Search အတွက် favicon အရွယ်အစား မည်မျှဖြစ်သင့်သနည်း။

Google သည် 48 px ၏ ဆဖြစ်သော အရွယ်ရှိ လေးထောင့်ကျသော favicon ကို လိုအပ်ပြီး အနည်းဆုံး 48x48 ဖြစ်ရမည်။ 96x96 PNG သည် လုံခြုံသောရွေးချယ်မှုဖြစ်ပြီး SVG ကိုလည်း ထောက်ပံ့သည်။ Google သည် ဖိုင်ကို crawl လုပ်နိုင်ရန်လည်း လိုအပ်သဖြင့် robots.txt တွင် မပိတ်ပါနှင့်။ ပြောင်းလဲမှုများ ပေါ်လာရန် ရက် သို့မဟုတ် ရက်သတ္တပတ်များ ကြာနိုင်သည်။

Apple touch icon အတွက် 180x180 လုံလောက်ပါသလား။

ဆိုက်အားလုံးနီးပါးအတွက် လုံလောက်ပါသည်။ iOS နှင့် iPadOS တို့က လက်ရှိစက်တိုင်းအတွက် 180x180 PNG ကို အရွယ်ချုံ့ပေးသည်။ အဟောင်းအရွယ်အစားများ (57 မှ 152 px) သည် အလွန်ဟောင်းသော iOS ဗားရှင်းများအတွက်သာ အရေးပါသည်။ အိုင်ကွန်အနက်ရောင်မဖြစ်စေရန် ပွင့်လင်းမှုမရှိသော နောက်ခံကို သုံးရန် မမေ့ပါနှင့်။

Maskable အိုင်ကွန်ဆိုတာ ဘာလဲ၊ ကျွန်ုပ်လိုအပ်ပါသလား။

Maskable အိုင်ကွန်သည် Android ၏ adaptive icon ပုံသဏ္ဍာန်များအတွက် ဒီဇိုင်းထုတ်ထားသော 512x512 PNG တစ်ခု ဖြစ်သည်။ ၎င်း၏ အရေးကြီးသော အကြောင်းအရာသည် အလယ်ရှိ အချင်း 80% စက်ဝိုင်းအတွင်း ရှိပြီး နောက်ခံက လေးထောင့်တစ်ခုလုံးကို ဖြည့်ထားသည်။ Install လုပ်နိုင်သော PWA ကို ပေးလျှင်သာ လိုအပ်သော်လည်း အိုင်ကွန်ကို အဖြူရောင်စက်ဝိုင်းထဲ ထိုင်နေသကဲ့သို့မဟုတ်ဘဲ native ပုံစံ ဖြစ်စေသည်။

ပြောင်းလိုက်ပြီးနောက်လည်း ကျွန်ုပ်၏ favicon အဟောင်း ဘာကြောင့် ပေါ်နေသေးသနည်း။

Browser များသည် favicon များကို သီးခြားစီ ကြာရှည်စွာ cache လုပ်ထားသည်။ ဖိုင်ကို အမည်ပြောင်းပါ သို့မဟုတ် ?v=2 ကဲ့သို့ version query string ထည့်ပါ၊ link tag များကို ပြင်ပြီး အိုင်ကွန် URL ကို တိုက်ရိုက်ဖွင့်ကာ reload လုပ်ပါ။ ရှာဖွေရေးအင်ဂျင်များက ၎င်းတို့၏ ကိုယ်ပိုင်မိတ္တူကို refresh လုပ်ရန် ပိုကြာနိုင်သည်။