តើអ្នកត្រូវការទំហំ favicon អ្វីខ្លះក្នុងឆ្នាំ 2026? សំណុំដ៏ល្អឥតខ្ចោះ

នៅឆ្នាំ 2026 សំណុំ favicon ដ៏ល្អបំផុតរួមមាន៖ favicon.ico ដែលមានរូបភាព 16, 32 និង 48 px, PNG 96x96 (សម្រាប់ Google Search), favicon SVG ជាជម្រើស, apple-touch-icon.png ទំហំ 180x180 និង PNG 192x192 និង 512x512 (បូករួមទាំង maskable 512) ដែលបានប្រកាសក្នុង web app manifest។ Windows tiles និងទំហំ Apple ចាស់ៗ ត្រូវការតែនៅពេលអ្នកត្រូវតែគាំទ្រឧបករណ៍ចាស់ខ្លាំងប៉ុណ្ណោះ។ ខាងក្រោមនេះពន្យល់ពីមូលហេតុ ជាមួយតារាងទំហំ, HTML ដែលអាចប្រើបានភ្លាមៗ និងកំហុសទូទៅដែលត្រូវជៀសវាង។

កាលពីមុន ស្ថានភាព favicon ច្របូកច្របល់ណាស់៖ រាល់កម្មវិធីរុករក និងប្រព័ន្ធប្រតិបត្តិការនីមួយៗសុំទំហំផ្ទាល់ខ្លួន ដែលបង្កើតបានជាប្លុក <head> ដ៏ល្បីល្បាញវែង 20 បន្ទាត់។ សព្វថ្ងៃនេះភាគច្រើននៃរឿងនោះលែងប្រើហើយ។ កម្មវិធីរុករកទំនើបៗធ្វើមាត្រដ្ឋានរូបតំណាងល្អមួយ, iOS ត្រូវការតែទំហំមួយ ហើយ Android អានពី manifest។ អត្ថបទនេះញែកអ្វីដែលចាំបាច់ពិតប្រាកដចេញពីអ្វីដែលគ្រាន់តែល្អបើមាន។

ចម្លើយខ្លី៖ សំណុំឯកសារ favicon ដ៏ល្អបំផុត

• favicon.ico (16, 32, 48 px ក្នុងឯកសារតែមួយ) នៅក្នុងឫសនៃគេហទំព័រ។ កម្មវិធីរុករក កម្មវិធីអាន feed និងឧបករណ៍ជាច្រើននៅតែស្នើសុំ /favicon.ico ដោយស្វ័យប្រវត្តិ។
• favicon.svg (ជាជម្រើស ប៉ុន្តែផ្តល់អនុសាសន៍) សម្រាប់ការបង្ហាញច្បាស់ត្រចះនៅគ្រប់ទំហំ និងគាំទ្រ dark mode។
• PNG 16x16, 32x32 និង 96x96 ជាជម្រើសបម្រុងច្បាស់លាស់។ កំណែ 96 px ជួយ Google Search ដែលតម្រូវឱ្យមានទំហំជាពហុគុណនៃ 48 px។
• apple-touch-icon.png ទំហំ 180x180 ស្រអាប់ គ្មានតម្លាភាព។
• PNG 192x192 និង 512x512 ក្នុង manifest.json បូករួមទាំងរូបតំណាង maskable 512x512 សម្រាប់ Android។
• ស្លាក meta theme-color សម្រាប់ដាក់ពណ៌ UI កម្មវិធីរុករកលើទូរសព្ទ។
• Windows tiles (70, 150, 310 px) ជាមួយ browserconfig.xml សម្រាប់តែ Windows ចាស់ និងគេហទំព័រដែលខ្ទាស់ក្នុង IE11 ប៉ុណ្ណោះ។

តារាងទំហំ favicon៖ គោលបំណង ឈ្មោះឯកសារ និងអាទិភាព

ប្រើតារាងនេះជាបញ្ជីត្រួតពិនិត្យ។ "ចាំបាច់" មានន័យថាគេហទំព័រធម្មតានឹងមើលទៅខូច ឬមិនទាន់ចប់ បើគ្មានវា; "ផ្តល់អនុសាសន៍" មានន័យថាជួយកែលម្អគុណភាពយ៉ាងច្បាស់; "ជាជម្រើស" មានន័យថាសម្រាប់ករណីពិសេស ឬប្រព័ន្ធចាស់។

favicon.ico៖ 16, 32 និង 48 px ក្នុងឯកសារតែមួយ

ឯកសារ ICO គឺជាកុងតេន័រដែលផ្ទុក bitmap ច្រើន។ favicon.ico ល្អមួយមានរូបភាព 16x16, 32x32 និង 48x48 ដើម្បីឱ្យកម្មវិធីរុករក ឬប្រព័ន្ធប្រតិបត្តិការអាចជ្រើសរើសទំហំដែលជិតបំផុត។ ដាក់វានៅឫសនៃដូមេនរបស់អ្នក (https://example.com/favicon.ico)។ ទោះបីជា HTML របស់អ្នកចង្អុលទៅកន្លែងផ្សេងក៏ដោយ ក៏ crawler កម្មវិធីអាន RSS និងកម្មវិធីរុករកចាស់ៗជាច្រើននៅតែស្នើសុំ URL ត្រង់នោះ ដូច្នេះការមានវាជួយជៀសវាងកំហុស 404 ក្នុង log របស់អ្នក។

កុំគ្រាន់តែប្តូរឈ្មោះ PNG ទៅជា .ico។ កម្មវិធីរុករកភាគច្រើនទទួលយកវា ប៉ុន្តែឧបករណ៍មួយចំនួនបដិសេធ ហើយអ្នកបាត់អត្ថប្រយោជន៍នៃពហុភាពច្បាស់។ សូមនាំចេញជា ICO ពិតប្រាកដ។

favicon PNG៖ 16, 32 និង 96 px

តំណ PNG ដែលមាន sizes ច្បាស់លាស់ អនុញ្ញាតឱ្យកម្មវិធីរុករកជ្រើសរើស bitmap ល្អបំផុតដោយមិនចាំបាច់ញែក ICO។ ជាក់ស្តែង 32x32 គ្របដណ្តប់ផ្ទាំងលើអេក្រង់ DPI ខ្ពស់ ហើយ 16x16 ស្ទើរតែលែងចាំបាច់ហើយសព្វថ្ងៃ។ ទំហំ 96x96 គួរបន្ថែម ពីព្រោះ Google Search បង្ហាញ favicon ក្បែរលទ្ធផល ហើយតម្រូវឱ្យមានរូបតំណាងការ៉េដែលទំហំជាពហុគុណនៃ 48 px (48x48, 96x96, 144x144 ជាដើម)។ ឯកសារ 96 px ផ្តល់ឱ្យ Google នូវប្រភពច្បាស់ជាងឯកសារ 48 px នៅពេលវាបន្ថយទំហំសម្រាប់លទ្ធផលលើទូរសព្ទ។

គន្លឹះរចនា៖ នៅ 16 px ព័ត៌មានលម្អិតតូចៗនឹងបាត់។ ប្រើរូបរាងដិតសាមញ្ញ កម្រិតពណ៌ផ្ទុយខ្ពស់ និងអក្សរតិចតួច ឬគ្មានសោះ។ អ្នកអាចកែសម្រួល និងមើលរូបតំណាងរបស់អ្នកជាមុននៅក្នុង កម្មវិធីកែសម្រួល MakeFav មុនពេលនាំចេញ។

favicon SVG និង dark mode

favicon SVG គឺជាឯកសារតូចមួយដែលនៅតែច្បាស់នៅលើគ្រប់ដង់ស៊ីតេអេក្រង់។ កម្មវិធីរុករកដែលផ្អែកលើ Chromium និង Firefox គាំទ្រវា។ ការគាំទ្ររបស់ Safari កាលពីមុនមានកម្រិត ដូច្នេះកុំពឹងលើ SVG តែមួយ៖ រក្សាទុក ICO និង PNG ជាជម្រើសបម្រុង។

អត្ថប្រយោជន៍ធំបំផុតគឺការកំណត់ស្បែក (theming)។ ដោយសារ 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ឆ្លុះបញ្ចាំងពីស្បែករបស់ កម្មវិធីរុករក ឬប្រព័ន្ធប្រតិបត្តិការ ដែលជាអ្វីដែលរបារផ្ទាំងប្រើ។ វាមិនធ្វើតាមការប្តូរស្បែកនៅលើគេហទំព័ររបស់អ្នកផ្ទាល់ទេ។

បញ្ហាចម្លែកមួយដែលគេស្គាល់៖ នៅពេលដែលទាំង ICO និង SVG ត្រូវបានចុះបញ្ជី Chrome អាចជ្រើសរើស ICO។ ការប្រកាស ICO ជាមួយ sizes="32x32" ហើយចុះបញ្ជី SVG បន្ទាប់ ធ្វើឱ្យ Chrome ចូលចិត្ត SVG ដូចបង្ហាញក្នុងកូដខាងក្រោម។

Apple touch icon៖ 180x180 និងទំហំចាស់ៗ

នៅពេលអ្នកប្រើបន្ថែមគេហទំព័ររបស់អ្នកទៅអេក្រង់ដើម iOS ឬ iPadOS Safari ប្រើ apple-touch-icon។ សព្វថ្ងៃនេះ PNG ទំហំ 180x180 px តែមួយគឺគ្រប់គ្រាន់៖ iOS បន្ថយទំហំវាសម្រាប់ឧបករណ៍ និង iPad ចាស់ៗ។ ដាក់ឈ្មោះវាថា apple-touch-icon.png ហើយដាក់នៅឫស; iOS ថែមទាំងស្វែងរកឯកសារនោះតាមលំនាំដើម ប្រសិនបើមិនមានស្លាក link។

ច្បាប់សម្រាប់រូបតំណាង Apple៖

• គ្មានតម្លាភាព។ iOS បំពេញភីកសែលតម្លាភាពដោយពណ៌ខ្មៅ ដូច្នេះឡូហ្គោតម្លាភាពតែងតែក្លាយជាដុំខ្មៅ។ បន្ថែមពណ៌ផ្ទៃខាងក្រោយរឹង។
• គ្មានជ្រុងមូល។ iOS អនុវត្តរបាំងមូលរបស់ខ្លួនផ្ទាល់។ ផ្តល់ការ៉េពេញលេញ។
• រក្សាមាតិកាសំខាន់ៗឱ្យឆ្ងាយពីគែមខ្លាំងពេក ព្រោះជ្រុងត្រូវបានកាត់។

តើនៅពេលណាអ្នកត្រូវការទំហំចាស់ៗ (57, 72, 76, 114, 120, 144, 152, 167)? តែនៅពេលអ្នកគាំទ្រ iOS 6 ឬទាបជាងនេះ ឬចង់គ្រប់គ្រងភីកសែលច្បាស់លាស់តាមឧបករណ៍សម្រាប់ iPad Pro (167 px) និង iPad (152 px)។ សម្រាប់ស្ទើរតែគ្រប់គេហទំព័រក្នុងឆ្នាំ 2026 ឯកសារ 180x180 តែមួយគឺល្អគ្រប់គ្រាន់។ ការដំឡើងដែលត្រូវគ្នាអតិបរមាខាងក្រោមរួមបញ្ចូលមួយចំនួនដើម្បីឱ្យពេញលេញ។

រូបតំណាង Android និង PWA៖ 192, 512 និង maskable

Chrome លើ Android និងកម្មវិធីរុករកផ្សេងទៀតដែលគាំទ្រ PWA អានរូបតំណាងពី web app manifest មិនមែនពី <link rel="icon"> ទេ។ ដើម្បីអាចដំឡើងបាន អ្នកត្រូវការយ៉ាងហោចណាស់ PNG 192x192 និង 512x512។ រូបតំណាង 192 px ត្រូវបានប្រើលើអេក្រង់ដើម និងកម្មវិធីបើកកម្មវិធី; រូបតំណាង 512 px បង្ហាញលើអេក្រង់ splash និងប្រអប់ដំឡើង។

រូបតំណាង maskable និង safe zone

រូបតំណាងបត់បែនរបស់ Android អាចត្រូវបានកាត់ជារង្វង់ squircle ឬរូបរាងផ្សេងទៀត អាស្រ័យលើឧបករណ៍។ រូបតំណាង maskable ត្រូវបានរចនាឱ្យកាត់បានដោយសុវត្ថិភាព៖ មាតិកាសំខាន់ៗត្រូវនៅក្នុង safe zone ដែលជារង្វង់នៅកណ្តាលមានអង្កត់ផ្ចិត 80% នៃរូបភាព (កាំស្មើ 40% នៃជ្រុង)។ សម្រាប់ឯកសារ 512x512 នេះមានន័យថារក្សាឡូហ្គោរបស់អ្នកក្នុងរង្វង់ដែលមានអង្កត់ផ្ចិតប្រមាណ 410 px ហើយពង្រីកពណ៌ផ្ទៃខាងក្រោយទៅគ្រប់ជ្រុងទាំងបួន ដើម្បីកុំឱ្យមានចន្លោះបង្ហាញបន្ទាប់ពីបិទបាំង។

ប្រកាសរូបតំណាង maskable ជាធាតុដាច់ដោយឡែកជាមួយ "purpose": "maskable"។ ជៀសវាង "any maskable" លើឯកសារតែមួយ៖ ចន្លោះទំនេរដែលត្រូវការសម្រាប់ការបិទបាំងមើលទៅតូចពេកនៅពេលរូបតំណាងបង្ហាញដោយគ្មានរបាំង។

ឧទាហរណ៍ 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; ឈ្មោះមិនសំខាន់ទេ ប៉ុន្តែតំណសំខាន់។

Windows tiles និង browserconfig.xml

Windows 8.1 និង 10 អនុញ្ញាតឱ្យអ្នកប្រើខ្ទាស់គេហទំព័រទៅ Start menu ហើយ IE11 និង Edge ចាស់អានរូបភាព tile ពី browserconfig.xml។ ទំហំទូទៅគឺ 70x70 (តូច), 150x150 (មធ្យម), 310x150 (ទទឹង) និង 310x310 (ធំ)។ Edge ដែលផ្អែកលើ Chromium ប្រើ 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៖ ដាក់ពណ៌ UI កម្មវិធីរុករក

ស្លាក meta theme-color ប្រាប់កម្មវិធីរុករកលើទូរសព្ទ (និងកុំព្យូទ័រមួយចំនួន) ថាត្រូវប្រើពណ៌អ្វីសម្រាប់របារអាសយដ្ឋាន ឬរបារចំណងជើង។ វាមិនមែនជា favicon ទេ ប៉ុន្តែវាជាផ្នែកនៃសំណុំម៉ាកយីហោតែមួយ។ អ្នកអាចផ្តល់តម្លៃដាច់ដោយឡែកសម្រាប់ light និង dark mode៖

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

ការដំឡើងទំនើបអប្បបរមា ទល់នឹងការត្រូវគ្នាអតិបរមា

ការដំឡើងទំនើបអប្បបរមា (ផ្តល់អនុសាសន៍សម្រាប់គេហទំព័រភាគច្រើន)

ឯកសារប្រាំគ្របដណ្តប់ការប្រើប្រាស់ជាក់ស្តែងជាង 99%៖ favicon.ico, favicon.svg, apple-touch-icon.png (180x180) និងរូបតំណាង manifest ពីរ (192 និង 512)។ បន្ថែម PNG 96x96 ប្រសិនបើភាពមើលឃើញក្នុង Google Search សំខាន់ និងរូបតំណាង maskable ប្រសិនបើអ្នកចេញផ្សាយ PWA។

<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">

ការដំឡើងត្រូវគ្នាអតិបរមា

ជ្រើសរើសវាពេលអ្នកបម្រើទស្សនិកជនទូលំទូលាយ ឬអង្គភាពធំ ឬនៅពេលអ្នកចង់គ្របដណ្តប់គ្រប់ឧបករណ៍ដែលអាចមាន។ វាបន្ថែមទំហំ PNG ច្បាស់លាស់ ទំហំ Apple ចាស់ៗ Windows tiles និងពណ៌ 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>

សូមកត់សម្គាល់ផ្លូវដែលទាក់ទងនឹងឫសដែលចាប់ផ្តើមដោយ /។ ពួកវាដំណើរការនៅគ្រប់កម្រិតជម្រៅទំព័រ ដែលនាំយើងទៅកាន់កំហុសទូទៅបំផុត។

កំហុស favicon ទូទៅ និងរបៀបដោះស្រាយ

1. ផ្លូវខុស

តំណដូចជា href="favicon.ico" ត្រូវបានដោះស្រាយទាក់ទងនឹង URL បច្ចុប្បន្ន ដូច្នេះវាដំណើរការនៅ / ប៉ុន្តែខូចនៅ /blog/post/។ ប្រើ URL ទាក់ទងនឹងឫស (/favicon.ico) ឬ URL ពេញលេញ។ ត្រូវពិនិត្យផងដែរថាឯកសារមានពិតប្រាកដ៖ បើក URL នីមួយៗដោយផ្ទាល់ក្នុងកម្មវិធីរុករក ហើយប្រាកដថាវាត្រឡប់ HTTP 200 មិនមែនបញ្ជូនបន្តទៅទំព័រ 404 ឬទំព័រចូលគណនីទេ។

2. attribute sizes បាត់ ឬខុស

ប្រសិនបើគ្មាន sizes កម្មវិធីរុករកត្រូវទាញយករូបតំណាងដើម្បីពិនិត្យ ហើយអាចជ្រើសរើសខុស។ ត្រូវប្រកាស sizes លើតំណ PNG ជានិច្ច ហើយប្រាកដថាវាត្រូវនឹងវិមាត្រភីកសែលពិតប្រាកដ។ ឯកសារដែលដាក់ស្លាក 32x32 ប៉ុន្តែពិតជា 64x64 បណ្តាលឱ្យលទ្ធផលមិនស្ថិរភាព។

3. ការ cache ខ្លាំងពេក

កម្មវិធីរុករក cache favicon រយៈពេលយូរ ជារឿយៗដាច់ដោយឡែកពី cache ទំព័រ។ បន្ទាប់ពីប្តូរម៉ាកយីហោ រូបតំណាងចាស់អាចនៅបន្តរាប់ថ្ងៃ។ ប្តូរឈ្មោះឯកសារ ឬបន្ថែម query string កំណែ (/favicon.ico?v=2) ហើយធ្វើបច្ចុប្បន្នភាពស្លាក link។ ការផ្ទុកឡើងវិញដោយបង្ខំ (hard reload) ជាញឹកញាប់មិនធ្វើឱ្យរូបតំណាងផ្ទាំងធ្វើបច្ចុប្បន្នភាពទេ; ការបើក URL រូបតំណាងដោយផ្ទាល់ ហើយផ្ទុកឡើងវិញ ជាធម្មតាអាចធ្វើបាន។

4. រូបភាពមិនមែនការ៉េ

Favicon ត្រូវតែជាការ៉េ។ ឡូហ្គោចតុកោណកែងនឹងត្រូវបានលាតសន្ធឹង កាត់ ឬដាក់ក្នុងប្រអប់ដោយមិនអាចទាយទុកបាន។ រចនាសញ្ញាការ៉េសម្រាប់ជាពិសេស ដូចជាអក្សរដំបូង ឬនិមិត្តសញ្ញា ជំនួសឱ្យការបង្រួមឈ្មោះម៉ាកទទឹង។

5. Apple touch icon តម្លាភាពប្រែជាខ្មៅ

iOS បំពេញតម្លាភាពដោយពណ៌ខ្មៅ។ ផ្តល់ឱ្យរូបតំណាង 180x180 នូវផ្ទៃខាងក្រោយស្រអាប់ ហើយកុំធ្វើជ្រុងមូលជាមុន។

6. រូបតំណាង maskable គ្មាន safe zone

ប្រសិនបើឡូហ្គោប៉ះគែមរូបតំណាង maskable Android នឹងកាត់វាចេញ។ រក្សាវាក្នុងរង្វង់កណ្តាល 80% ហើយបំពេញផ្ទៃទាំងមូលដោយពណ៌ផ្ទៃខាងក្រោយ។

7. ទប់ស្កាត់រូបតំណាងពី crawler

ប្រសិនបើ robots.txt ហាមឃាត់ផ្លូវ favicon របស់អ្នក Google មិនអាចទាញយកវាបាន ហើយនឹងបង្ហាញរូបតំណាងពិភពលោកទូទៅក្នុងលទ្ធផលស្វែងរក។ សូមចងចាំផងដែរថា Google ត្រូវការ favicon នៅលើ host តែមួយជាមួយទំព័រ ហើយធ្វើបច្ចុប្បន្នភាពវាម្តងម្កាលប៉ុណ្ណោះ ដូច្នេះការផ្លាស់ប្តូរអាចចំណាយពេលច្រើនថ្ងៃ ឬច្រើនសប្តាហ៍មុននឹងបង្ហាញ។

8. ភ្លេចតំណ manifest ឬ purpose

manifest ដែលមិនបានភ្ជាប់ ឬខ្វះរូបតំណាង 192 និង 512 px រារាំងការជំរុញឱ្យដំឡើងក្នុង Chrome។ ផ្ទៀងផ្ទាត់វាក្នុងឧបករណ៍អ្នកអភិវឌ្ឍន៍របស់កម្មវិធីរុករកនៅផ្ទាំង Application។

បង្កើតសំណុំទាំងមូលដោយចុចតែម្តង

ការបង្កើតឯកសារមួយដប់ពីរដោយដៃក្នុងកម្មវិធីកែរូបភាព បន្ទាប់មកបម្លែងទៅ ICO និងសរសេរ manifest គឺគួរឱ្យធុញទ្រាន់ និងងាយនឹងមានកំហុស។ MakeFav បង្កើតឯកសារទាំងអស់ខាងលើពីរូបភាព អក្សរ ឬ emoji តែមួយ៖ favicon.ico ពហុទំហំ, PNG, SVG, Apple touch icon, PNG 192/512, រូបតំណាង maskable, Windows tiles, manifest.json និង browserconfig.xml ព្រមទាំងកូដ HTML ដែលរួចរាល់សម្រាប់បិទភ្ជាប់ ទាំងអស់ក្នុងការទាញយក ZIP តែមួយ។ អ្នកអាចកែសម្រួលពណ៌ផ្ទៃខាងក្រោយ ចន្លោះ និងរូបរាងក្នុងកម្មវិធីកែសម្រួល ផ្ទៀងផ្ទាត់គេហទំព័រដែលមានស្រាប់ដោយកម្មវិធីពិនិត្យ favicon និងធ្វើស្វ័យប្រវត្តិកម្មការបង្កើតតាមរយៈធនធានសម្រាប់អ្នកអភិវឌ្ឍន៍។

បញ្ជីត្រួតពិនិត្យការដាក់ឱ្យប្រើប្រាស់

1. ផ្ទុកឯកសារទាំងអស់ឡើងទៅឫសនៃគេហទំព័ររបស់អ្នក។
2. បិទភ្ជាប់កូដ HTML ទៅក្នុង <head> នៃគ្រប់ទំព័រ (ឬ layout រួមរបស់អ្នក)។
3. ប្រាកដថាផ្លូវទាក់ទងនឹងឫស ហើយត្រឡប់ HTTP 200។
4. ពិនិត្យ light និង dark mode ការដំឡើងលើអេក្រង់ដើម iOS និងការដំឡើងលើ Android។
5. ដំណើរការកម្មវិធីពិនិត្យដើម្បីចាប់ទំហំដែលបាត់ ឬមិនត្រូវគ្នា។
6. បំបាត់ cache ដោយ version string ប្រសិនបើអ្នកបានជំនួសរូបតំណាងចាស់។

សំណួរដែលសួរញឹកញាប់

តើខ្ញុំនៅតែត្រូវការ favicon.ico ក្នុងឆ្នាំ 2026 ដែរឬទេ?

បាទ/ចាស។ ទោះបីជាកម្មវិធីរុករកទំនើបទទួលយក PNG និង SVG ក៏ដោយ crawler កម្មវិធីអាន feed កម្មវិធីអ៊ីមែល និងកម្មវិធីរុករកចាស់ៗជាច្រើននៅតែស្នើសុំ /favicon.ico ដោយផ្ទាល់។ ICO ពហុទំហំដែលមានរូបភាព 16, 32 និង 48 px គឺជាឯកសារតូចមួយដែលការពារការបាត់រូបតំណាង និងកំហុស 404។

តើ favicon សម្រាប់ Google Search គួរមានទំហំប៉ុន្មាន?

Google តម្រូវឱ្យមាន favicon ការ៉េដែលទំហំជាពហុគុណនៃ 48 px យ៉ាងហោចណាស់ 48x48។ PNG 96x96 គឺជាជម្រើសសុវត្ថិភាព ហើយ SVG ក៏ត្រូវបានគាំទ្រដែរ។ Google ក៏ត្រូវការឱ្យឯកសារអាច crawl បាន ដូច្នេះកុំទប់ស្កាត់វាក្នុង robots.txt។ ការធ្វើបច្ចុប្បន្នភាពអាចចំណាយពេលច្រើនថ្ងៃ ឬច្រើនសប្តាហ៍មុននឹងបង្ហាញ។

តើ 180x180 គ្រប់គ្រាន់សម្រាប់ Apple touch icon ឬទេ?

សម្រាប់គេហទំព័រស្ទើរតែទាំងអស់ បាទ/ចាស។ iOS និង iPadOS បន្ថយទំហំ PNG 180x180 សម្រាប់គ្រប់ឧបករណ៍បច្ចុប្បន្ន។ ទំហំចាស់ៗ (57 ដល់ 152 px) សំខាន់តែសម្រាប់កំណែ iOS ចាស់ខ្លាំងប៉ុណ្ណោះ។ សូមចងចាំប្រើផ្ទៃខាងក្រោយស្រអាប់ ដើម្បីកុំឱ្យរូបតំណាងប្រែជាខ្មៅ។

តើរូបតំណាង maskable ជាអ្វី ហើយតើខ្ញុំត្រូវការវាឬទេ?

រូបតំណាង maskable គឺជា PNG 512x512 ដែលរចនាឡើងសម្រាប់រូបរាងរូបតំណាងបត់បែនរបស់ Android។ មាតិកាសំខាន់ៗរបស់វានៅក្នុងរង្វង់អង្កត់ផ្ចិត 80% នៅកណ្តាល ហើយផ្ទៃខាងក្រោយបំពេញការ៉េទាំងមូល។ អ្នកត្រូវការវាតែនៅពេលអ្នកផ្តល់ PWA ដែលអាចដំឡើងបានប៉ុណ្ណោះ ប៉ុន្តែវាធ្វើឱ្យរូបតំណាងមើលទៅដូចកម្មវិធីដើម ជំនួសឱ្យការអង្គុយក្នុងរង្វង់ពណ៌ស។

ហេតុអ្វី favicon ចាស់របស់ខ្ញុំនៅតែបង្ហាញបន្ទាប់ពីខ្ញុំបានប្តូរ?

កម្មវិធីរុករក cache favicon ដោយឡែក និងរយៈពេលយូរ។ ប្តូរឈ្មោះឯកសារ ឬបន្ថែម query string កំណែដូចជា ?v=2 ធ្វើបច្ចុប្បន្នភាពស្លាក link បន្ទាប់មកបើក URL រូបតំណាងដោយផ្ទាល់ ហើយផ្ទុកឡើងវិញ។ ម៉ាស៊ីនស្វែងរកអាចចំណាយពេលយូរជាងដើម្បីធ្វើបច្ចុប្បន្នភាពច្បាប់ចម្លងរបស់ពួកគេ។