Favicon UX៖ អ្វីដែលធ្វើឱ្យ Favicon ល្អឥតខ្ចោះ

Favicon ល្អគឺជានិមិត្តសញ្ញាសាមញ្ញដែលមានភាពផ្ទុយពណ៌ខ្ពស់ ជាធម្មតាជានិមិត្តសញ្ញាម៉ាករបស់អ្នក ឬអក្សរមួយ ឬពីរ ដែលនៅតែអាចអានបាននៅទំហំ 16x16 ភីកសែល លើទាំងផ្ទាំងកម្មវិធីរុករកភ្លឺ និងងងឹត ត្រូវនឹងម៉ាករបស់អ្នក ហើយកម្រផ្លាស់ប្ដូរ។ អ្វីៗផ្សេងទៀតក្នុងមគ្គុទ្ទេសក៍នេះ (ការតម្រឹមភីកសែល ពណ៌ គម្លាត តម្លាភាព ទំហំឯកសារ) បម្រើគោលដៅទាំងនោះ៖ ធ្វើឱ្យគេហទំព័ររបស់អ្នក ស្វែងរកឃើញភ្លាមៗ ក្នុងចំណោមផ្ទាំងដែលបើកជាច្រើនសិប។

Favicon តូចណាស់ ប៉ុន្តែវាបង្ហាញនៅច្រើនកន្លែង៖ ផ្ទាំងកម្មវិធីរុករក របាររក្សាទុកទំព័រ បញ្ជីប្រវត្តិ ម៉ឺនុយស្វែងរកផ្ទាំង លទ្ធផលស្វែងរករបស់ Google លើទូរសព្ទ និងកុំព្យូទ័រ និងអេក្រង់ដើមរបស់ទូរសព្ទ។ សម្រាប់អ្នកប្រើដែលបើកផ្ទាំងច្រើន ចំណងជើងតែងតែត្រូវកាត់ខ្លីរហូតមើលមិនឃើញ ហើយរូបតំណាងគឺជាសញ្ញាតែមួយគត់ដែលនៅសល់។ នេះធ្វើឱ្យវាក្លាយជាធាតុរុករកពិតប្រាកដ មិនមែនគ្រាន់តែជាការតុបតែងនោះទេ។

1. ភាពអាចអានបាននៅ 16x16

ទំហំ favicon បុរាណគឺ 16x16 ភីកសែល CSS។ នៅលើអេក្រង់ស្តង់ដារ នោះគឺ 256 ភីកសែលពិតប្រាកដ។ នៅលើអេក្រង់ retina 2x កម្មវិធីរុករកជាធម្មតាជ្រើសរូបភាព 32x32 សម្រាប់ទំហំដដែល។ អ្វីក៏ដោយដែលអ្នករចនាត្រូវតែអាចរួចផុតពីការបង្រួមនេះ។

ធ្វើឱ្យសាមញ្ញ

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

តម្រឹមតាមក្រឡាភីកសែល

នៅ 16x16 បន្ទាត់ដែលដាក់ឆ្ងាយពីក្រឡាកន្លះភីកសែលនឹងត្រូវ anti-alias ឆ្លងកាត់ជួរភីកសែលពីរ ហើយមើលទៅប្រផេះ និងទន់។ ដាក់គែមលើព្រំដែនភីកសែលទាំងមូល ហើយប្រើទទឹងគូនៅកន្លែងដែលរូបរាងស៊ីមេទ្រី។ ប្រសិនបើអ្នកនាំចេញពីឧបករណ៍វ៉ិចទ័រ សូមបើកការ snap ទៅភីកសែល ឬពិនិត្យលទ្ធផលដែលបានបង្រួម ហើយកែដោយដៃ។

ជៀសវាងបន្ទាត់ស្តើង

ខ្សែបន្ទាត់ស្តើងជាង 2 ភីកសែលនៅ 16x16 (ប្រហែល 12 ភាគរយនៃទទឹងរូបតំណាង) ងាយបាត់ ឬរលោតរវាងទំហំផ្សេងៗ។ ធ្វើឱ្យខ្សែក្រាស់ឡើង លុបព័ត៌មានលម្អិតខាងក្នុង និងបញ្ចូលគម្លាតតូចៗចូលគ្នា។ ជាធម្មតា glyph ដិតៗ ក្រាស់បន្តិច អានបានល្អជាងរូបតូចស្មោះត្រង់នៃឡូហ្គោដែលមានព័ត៌មានលម្អិតច្រើន។

កែសម្រួលដោយដៃ

ឯកសារ ICO និង PNG គ្មាន hinting បែបពុម្ពអក្សរទេ ដូច្នេះការកែភីកសែលដោយដៃគឺជាអ្វីដែលស្មើគ្នា៖ អ្នកកែភីកសែលនីមួយៗ ដើម្បីឱ្យខ្សែកោង បន្ទាត់ទ្រេត និងរន្ធក្នុងអក្សរ (ដូចជា "a" ឬ "e") នៅតែមុតស្រួច។ ការបង្រួមដោយស្វ័យប្រវត្តិជាសេចក្តីព្រាងដំបូងដ៏ល្អ ប៉ុន្តែភីកសែលពីរបីដែលដាក់ដោយដៃច្រើនតែបង្កើតភាពខុសគ្នារវាងដុំព្រាលៗ និងអក្សរដែលអាចស្គាល់បាន។ កម្មវិធីកែភីកសែល MakeFav ត្រូវបានបង្កើតឡើងសម្រាប់ការនេះ៖ បើកផ្ទាំងគំនូរ 16x16 កែភីកសែលដែលមានបញ្ហា ហើយនាំចេញ។

2. ភាពផ្ទុយពណ៌លើផ្ទាំងភ្លឺ និងងងឹត

បច្ចុប្បន្នកម្មវិធីរុករកតែងដំណើរការក្នុងម៉ូដងងឹត ហើយអ្នកប្រើជាច្រើនមានរបារផ្ទាំងខុសពីធីមរបស់ទំព័រ។ រូបតំណាងពណ៌ខៀវចាស់ដែលមានផ្ទៃខាងក្រោយថ្លាអាចល្អឥតខ្ចោះលើផ្ទាំងពណ៌ស ប៉ុន្តែស្ទើរតែមើលមិនឃើញលើផ្ទាំងពណ៌ប្រផេះចាស់។ ត្រូវសាកល្បងទាំងពីរជានិច្ច។

ដំណោះស្រាយជាក់ស្តែង

• បន្ថែមរូបរាងផ្ទៃខាងក្រោយ។ ការេមូលជ្រុង ឬរង្វង់ពណ៌ដុំៗក្នុងពណ៌ម៉ាក ធានាថានិមិត្តសញ្ញាមានភាពផ្ទុយពណ៌ផ្ទាល់ខ្លួន មិនថាផ្ទាំងបែបណាទេ។
• ប្រើគ្រោងស្តើង ឬរស្មីជុំវិញ។ គែមភ្លឺជាង 1px ជុំវិញ glyph ងងឹត (ឬផ្ទុយមកវិញ) រក្សារូបសណ្ឋានឱ្យមើលឃើញលើធីមទាំងពីរ ប៉ុន្តែនៅ 16x16 វាត្រូវតែនៅមុតស្រួច ដូច្នេះត្រូវសាកល្បង។
• ជ្រើសពណ៌ម៉ាកកម្រិតមធ្យម។ ពណ៌ដូចជាខៀវខ្លាំង ទឹកក្រូច បៃតង ឬម៉ាហ្សង់តា ជាធម្មតាដំណើរការបានលើទាំងផ្ទៃសនិងស្ទើរខ្មៅ។ លឿងស្រាលខ្លាំង ឬខៀវចាស់ខ្លាំងគឺជាពណ៌ដែលមានហានិភ័យ។
• ប្រើ SVG favicon បត់បែន។ SVG អាចរួមបញ្ចូល media query prefers-color-scheme ដើម្បីឱ្យរូបតំណាងផ្លាស់ប្ដូរតាមធីមប្រព័ន្ធ។

<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ឆ្លុះបញ្ចាំងពីធីមប្រព័ន្ធប្រតិបត្តិការ ឬកម្មវិធីរុករក ដែលជាធម្មតារបារផ្ទាំងធ្វើតាម ប៉ុន្តែមិនមែនជានិច្ចទេ។ ការគាំទ្រ SVG favicon ក៏ខុសគ្នាដែរ៖ Chrome និង Firefox គាំទ្រ ចំណែក Safari ជាប្រវត្តិសាស្ត្រយឺតជាង ដូច្នេះត្រូវរក្សា PNG ឬ ICO ជាជម្រើសបម្រុងជានិច្ច។ ការរចនាដែលមានផ្ទៃខាងក្រោយពណ៌ដុំគឺជាជម្រើសរឹងមាំបំផុត ព្រោះមិនត្រូវការតក្កវិជ្ជាធីមសោះ។

3. ភាពអាចស្គាល់បាន និងភាពស៊ីសង្វាក់នៃម៉ាក

ប្រើនិមិត្តសញ្ញាម៉ាក (logomark) (និមិត្តសញ្ញា ឬអក្សរកាត់) មិនមែនឡូហ្គោពេញដែលមានអក្សរម៉ាកទេ។ អក្សរក្នុងរូបតំណាង 16x16 មិនអាចអានបាន ហើយឡូហ្គោផ្ដេកទទឹងដែលបង្រួមចូលក្នុងការេ នឹងសល់តែខ្សែតូចមួយនៅកណ្ដាល។

• ប្រសិនបើម៉ាករបស់អ្នកមាននិមិត្តសញ្ញា ត្រូវធ្វើឱ្យវាសាមញ្ញសម្រាប់ទំហំតូច ជាជាងគ្រាន់តែបង្រួមវា។ "ជំនាន់ favicon" ដែលមានព័ត៌មានលម្អិតតិចជាងគឺជាការអនុវត្តស្តង់ដារ។
• ប្រសិនបើម៉ាករបស់អ្នកមានតែអក្សរម៉ាក សូមយកអក្សរដំបូង ឬអក្សរគូពិសេសមួយ ហើយកំណត់ជាពុម្ពអក្សរម៉ាករបស់អ្នកក្នុងទម្ងន់ដិត។
• រក្សាពណ៌ឱ្យស៊ីសង្វាក់នឹងឡូហ្គោ រូបតំណាងកម្មវិធី និងរូបតំណាងបណ្តាញសង្គមរបស់អ្នក ដើម្បីឱ្យអ្នកប្រើស្គាល់ម៉ាកតែមួយនៅគ្រប់ទីកន្លែង។

ភាពប្លែកមានសារៈសំខាន់ដូចភាពស្មោះត្រង់ដែរ។ មើលជួរផ្ទាំង៖ ប្រសិនបើគេហទំព័រផ្សេងទៀតបីក៏ប្រើរង្វង់ពណ៌ខៀវដែរ របស់អ្នកនឹងមិនលេចធ្លោទេ។ រូបរាង ឬពណ៌ខុសគ្នាមានប្រយោជន៍ជាងការបង្រួមដែលស្មោះត្រង់ឥតខ្ចោះ។

4. ពណ៌៖ ក្រឡាពណ៌មានកម្រិត និងឆ្អែត

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

ខ្ចីគំនិតបន្តិចពីការគិតអំពីភាពងាយស្រួលប្រើ។ WCAG តម្រូវឱ្យមានភាពផ្ទុយពណ៌យ៉ាងតិច 3:1 សម្រាប់វត្ថុក្រាហ្វិកដែលមានអត្ថន័យ (លក្ខណៈវិនិច្ឆ័យជោគជ័យ 1.4.11 Non-text Contrast)។ Favicon មិនត្រូវបានគ្របដណ្ដប់ជាផ្លូវការទេ ព្រោះវាជាផ្នែកកម្មវិធីរុករក មិនមែនមាតិកាទំព័រ ប៉ុន្តែ 3:1 រវាង glyph និងផ្ទៃខាងក្រោយរបស់វា និងរវាងរូបតំណាង និងផ្ទាំង គឺជាគោលដៅដ៏ត្រឹមត្រូវ។ ហើយក៏ជៀសវាងការបញ្ជូនអ្វីមួយដោយពណ៌តែម្យ៉ាងដែរ៖ ជំនាន់ក្រហម និងបៃតងនៃរូបតំណាងតែមួយ មិនអាចសម្គាល់បានសម្រាប់អ្នកពិបាកមើលពណ៌ជាច្រើន ដូច្នេះត្រូវប្ដូររូបរាង ឬបន្ថែមនិមិត្តសញ្ញា។

5. រូបរាង គម្លាត និងតំបន់សុវត្ថិភាព

បំពេញការេ

ផ្ទាំងកម្មវិធីរុករកបង្ហាញ favicon ក្នុងទំហំតូចថេរ ដូច្នេះរឹមបន្ថែមគ្រាន់តែធ្វើឱ្យនិមិត្តសញ្ញារបស់អ្នកតូចជាងមុន។ សម្រាប់រូបតំណាងផ្ទាំងស្តង់ដារ ត្រូវប្រើភាគច្រើននៃផ្ទាំងគំនូរ ដោយទុកគម្លាតត្រឹមមួយ ឬពីរភីកសែល ដើម្បីឱ្យនិមិត្តសញ្ញាធំបំផុតតាមដែលអាច។

មូលជ្រុង ឬការេ?

ជាទូទៅកម្មវិធីរុករកមិនកាត់ favicon ផ្ទាំងទេ ដូច្នេះរូបរាងដែលអ្នកគូរគឺជារូបរាងដែលអ្នកប្រើឃើញ។ ការេដែលមានជ្រុងមូលបន្តិចមើលទៅរៀបរយ ហើយផ្ដល់ផ្ទៃខាងក្រោយស្មើគ្នា។ glyph សេរី ឬរង្វង់លើផ្ទៃថ្លាអាចមើលទៅស្រាលជាង និងប្លែកជាង។ ទាំងពីរល្អ។ ជ្រើសមួយ ហើយរក្សាក្រុមរូបតំណាងទាំងមូលរបស់អ្នកឱ្យស៊ីសង្វាក់។

Apple touch icon

iOS បន្ថែមជ្រុងមូលផ្ទាល់ខ្លួនទៅ apple-touch-icon (180x180 ជាទំហំធម្មតា)។ សូមផ្ដល់ការេពេញគែមដោយគ្មានជ្រុងមូលជាមុន បើមិនដូច្នោះទេអ្នកអាចមានបំណែកស្តើងពណ៌ខ្មៅ ឬសមើលឃើញនៅជ្រុង។

Maskable icon សម្រាប់ Android និង PWA

Maskable icon ត្រូវបានប្រព័ន្ធប្រតិបត្តិការកាត់ជារង្វង់ squircle ឬរូបរាងផ្សេងទៀត។ រក្សាមាតិកាសំខាន់ៗទាំងអស់នៅក្នុងតំបន់សុវត្ថិភាព៖ រង្វង់នៅកណ្ដាលរូបតំណាង ដែលមានកាំ 40 ភាគរយនៃទទឹងរូបតំណាង។ ពង្រីកពណ៌ផ្ទៃខាងក្រោយរហូតដល់គែម ដើម្បីឱ្យម៉ាស្កណាក៏មើលទៅត្រឹមត្រូវ។ កុំប្រើ favicon ផ្ទាំងដែលតឹងពីគែមដល់គែមឡើងវិញជា maskable icon ព្រោះម៉ាស្កនឹងកាត់វា។

6. តម្លាភាព

តម្លាភាពគ្មានបញ្ហាសម្រាប់ favicon ផ្ទាំង ហើយវាអនុញ្ញាតឱ្យរូបតំណាងដែលមានតែ glyph អង្គុយស្អាតលើពណ៌ផ្ទាំងណាក៏បាន។ វាជាបញ្ហាសម្រាប់ Apple touch icon៖ iOS បំពេញតំបន់ថ្លាដោយពណ៌ដុំ (ជាធម្មតាខ្មៅ) ដែលអាចបំផ្លាញការរចនា។ ត្រូវផ្ដល់ apple-touch-icon ជាមួយផ្ទៃខាងក្រោយស្រអាប់ក្នុងពណ៌ម៉ាករបស់អ្នកជានិច្ច។ ដូចគ្នាសម្រាប់ maskable icon និងករណីប្រើអេក្រង់ដើម Android ភាគច្រើន ដែលផ្ទៃខាងក្រោយស្រអាប់ផ្ដល់លទ្ធផលអាចទស្សន៍ទាយបាន។

7. ស្ថិរភាព៖ កុំផ្លាស់ប្ដូរញឹកញាប់ពេក

Favicon បង្កើតការស្គាល់តាមរយៈការធ្វើឡើងវិញ។ ការផ្លាស់ប្ដូរញឹកញាប់បង្ខំអ្នកប្រើឱ្យរៀនឡើងវិញថាផ្ទាំងណាជារបស់អ្នក ហើយក៏បង្កបញ្ហាបច្ចេកទេសដែរ។ កម្មវិធីរុករករក្សា favicon ក្នុងឃ្លាំងសម្ងាត់យ៉ាងខ្លាំង ហើយ Google ទាញយក និងរក្សាទុកវាដោយឡែកពីទំព័ររបស់អ្នក ដូច្នេះរូបតំណាងថ្មីអាចចំណាយពេលច្រើនថ្ងៃ ឬច្រើនសប្តាហ៍ទើបបង្ហាញក្នុងលទ្ធផលស្វែងរក។ Google ក៏ស្នើសុំ URL favicon ដែលមានស្ថិរភាព រូបតំណាងដែលទំហំជាគុណនៃ 48 ភីកសែល (48x48, 96x96 ជាដើម) និងឯកសារដែលវាអាចវារបាន (មិនត្រូវបានរារាំងដោយ robots.txt)។ ចាត់ទុកការផ្លាស់ប្ដូរ favicon ជាការសម្រេចចិត្តកម្រិតប្ដូរម៉ាក មិនមែនការតុបតែងតាមរដូវកាលទេ។

8. ស្ថានភាពការជូនដំណឹង និង favicon ថាមវន្ត

កម្មវិធីគេហទំព័រមួយចំនួនផ្លាស់ប្ដូរ favicon ដើម្បីបង្ហាញសារមិនទាន់អាន ស្ថានភាពថត ឬកំហុស។ បើធ្វើបានល្អ វាមានប្រយោជន៍ តែបើហួសកម្រិត វាធ្វើឱ្យរំខាន។

• ប្រើស្លាកតូច (ចំណុច ឬចំនួនខ្លី) នៅជ្រុងមួយ មិនមែនការរចនាឡើងវិញទាំងស្រុងទេ។ រូបតំណាងមូលដ្ឋានគួរតែនៅតែអាចស្គាល់បាន។
• ប្រើតិចតួច។ បម្រុងស្លាកសម្រាប់ព្រឹត្តិការណ៍ដែលត្រូវការសកម្មភាពពីអ្នកប្រើ។ កុំធ្វើចលនារូបតំណាងជាបន្តបន្ទាប់។
• កំណត់ចំនួនកំពូល។ នៅ 16x16 មានតែលេខមួយ ឬពីរខ្ទង់ដែលអានបាន ដូច្នេះបង្ហាញ "9+" ឬចំណុចធម្មតាជំនួស "137"។
• កំណត់ឡើងវិញភ្លាមៗ នៅពេលអ្នកប្រើបានដោះស្រាយធាតុនោះ ហើយស្ដារ​រូបតំណាងលំនាំដើមវិញ។
• កុំពឹងផ្អែកលើពណ៌តែមួយ។ ចំណុចក្រហមក៏គួរមានចំណងជើងទំព័រគាំទ្រដែរ ដូចជា "(3) Inbox" ដើម្បីឱ្យព័ត៌មានមានសម្រាប់មនុស្សគ្រប់គ្នា។

Favicon ថាមវន្តជាធម្មតាត្រូវបានគូរលើ canvas ហើយប្តូរចូលដោយធ្វើបច្ចុប្បន្នភាព href នៃធាតុតំណរូបតំណាង។ កំណត់ល្បឿនការធ្វើបច្ចុប្បន្នភាព ព្រោះការផ្លាស់ប្ដូរ favicon ជាបន្តបន្ទាប់អាចប្រើ CPU និងរំខានអ្នកប្រើ។

9. ប្រសិទ្ធភាព

Favicon តូច ប៉ុន្តែវានៅតែជាសំណើដែលអាចធ្វើបានមិនល្អ។

• រក្សាឯកសារឱ្យតូច។ PNG favicon ជាធម្មតាមានទំហំពីរាប់រយបៃ ទៅពីរបីគីឡូបៃ។ SVG សាមញ្ញអាចតិចជាង 1 KB។
• ជៀសវាងឯកសារ ICO ហើម។ ICO ច្រើនទំហំដែលមានរូបភាព 16, 32 និង 48 ភីកសែលគឺគ្រប់គ្រាន់។ ការបង្កប់រូបភាព 256x256 បង្កើនទំហំឯកសារច្រើនដងដោយគ្មានអត្ថប្រយោជន៍ដែលមើលឃើញក្នុងផ្ទាំងកម្មវិធីរុករក។
• កំណត់ header សម្រាប់ការរក្សាទុកក្នុងឃ្លាំងសម្ងាត់។ ផ្ដល់រូបតំណាងជាមួយអាយុកាល Cache-Control វែង ឧទាហរណ៍ public, max-age=31536000, immutable ហើយប្រើឈ្មោះឯកសារមានកំណែ ឬ hash នៅពេលអ្នកផ្លាស់ប្ដូរ។
• ប្រកាសរូបតំណាងឱ្យច្បាស់លាស់។ កម្មវិធីរុករកស្នើ /favicon.ico តាមលំនាំដើម ដូច្នេះត្រូវផ្ដល់មួយ ទោះបីអ្នកប្រកាសរូបតំណាងផ្សេងក៏ដោយ ដើម្បីជៀសវាងសំលេងរំខាន 404 ក្នុងកំណត់ហេតុរបស់អ្នក។
• បង្ហាប់។ ដំណើរការ PNG តាមកម្មវិធី optimiser គ្មានការបាត់បង់ ហើយ minify SVG។

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

ប្រសិនបើអ្នកចង់បង្កើតឯកសារទាំងអស់នេះពីរូបភាពប្រភពតែមួយ កម្មវិធីបង្កើត favicon MakeFav បង្កើតក្រុមស្តង់ដារ ហើយទំព័រអ្នកអភិវឌ្ឍន៍គ្របដណ្ដប់លើជម្រើសសមាហរណកម្ម។

10. ភាពងាយស្រួលប្រើ

Favicon មិនមានអត្ថបទ alt ហើយកម្មវិធីអានអេក្រង់មិនប្រកាសវាទេ ដូច្នេះឧបករណ៍ភាពងាយស្រួលប្រើបែបប្រពៃណីដូចជាគុណលក្ខណៈ alt មិនអាចអនុវត្តបានទេ។ អ្វីដែលសំខាន់៖

• ចំណងជើងទំព័របង្ហាញអត្ថន័យ។ សរសេរធាតុ <title> ដែលប្លែក និងពិពណ៌នា។ កុំពឹងលើរូបតំណាងដើម្បីបង្ហាញស្ថានភាព ត្រូវឆ្លុះបញ្ចាំងស្លាកណាមួយក្នុងចំណងជើង។
• ភាពមើលឃើញសម្រាប់អ្នកមានចក្ខុវិស័យទាប។ ភាពផ្ទុយពណ៌ខ្ពស់ រូបរាងដិត និងនិមិត្តសញ្ញាធំ ជួយអ្នកប្រើដែលស្កេនផ្ទាំងដោយភ្នែក។
• មិនពឹងលើពណ៌។ ធានាថារូបរាង ឬអក្សរសម្គាល់ស្ថានភាព មិនមែនគ្រាន់តែពណ៌ទេ។
• កាត់បន្ថយការរំខាន។ ជៀសវាង favicon ដែលភ្លឹបភ្លែត ឬមានចលនា ដែលអាចជាបញ្ហាសម្រាប់អ្នកប្រើដែលងាយប្រតិកម្មនឹងចលនា។

បញ្ជីត្រួតពិនិត្យ Favicon UX

បញ្ជីត្រួតពិនិត្យការសាកល្បង

កុំទុកចិត្តការមើលជាមុនធំៗក្នុងឧបករណ៍រចនារបស់អ្នក។ សាកល្បងរូបតំណាងពិតក្នុងលក្ខខណ្ឌពិត៖

1. កម្មវិធីរុករកច្រើន។ ពិនិត្យ Chrome, Firefox, Safari និង Edge ព្រោះនីមួយៗជ្រើសរូបតំណាង និងទំហំខុសគ្នាបន្តិច។
2. ម៉ូដភ្លឺ និងងងឹត។ ប្ដូរធីមប្រព័ន្ធប្រតិបត្តិការ និងកម្មវិធីរុករក ហើយមើលរបារផ្ទាំងរាល់ពេល។
3. អេក្រង់ Retina និងស្តង់ដារ។ ពិនិត្យលើម៉ូនីទ័រ 1x និងអេក្រង់ 2x ឬ 3x ហើយពង្រីកក្នុងកម្មវិធីរុករក។
4. របាររក្សាទុកទំព័រ។ រក្សាទុកទំព័រ ហើយមើលថារូបតំណាងនៅតែអានបានក្បែរគេហទំព័រផ្សេងទៀតឬទេ។
5. ផ្ទាំងច្រើន។ បើកផ្ទាំង 20 ហើយមើលថាតើអ្នកអាចរកផ្ទាំងរបស់អ្នកឃើញភ្លាមៗឬទេ។
6. ការមើលជាមុន Google SERP។ ពិនិត្យលទ្ធផលស្វែងរកលើទូរសព្ទ បន្ទាប់ពីរូបតំណាងត្រូវបានវាឡើងវិញ។ សូមចងចាំថាវាអាចចំណាយពេលដើម្បីធ្វើបច្ចុប្បន្នភាព។
7. អេក្រង់ដើម។ បន្ថែមគេហទំព័រទៅអេក្រង់ដើម iOS និង Android ហើយបញ្ជាក់ថារូបតំណាងមិនត្រូវបានកាត់ គ្មានជ្រុងខ្មៅ និងមិនតូចពេកក្នុងម៉ាស្ករបស់វា។
8. ការត្រួតពិនិត្យបច្ចេកទេស។ ដំណើរការដែនរបស់អ្នកតាមកម្មវិធីពិនិត្យ favicon MakeFav ដើម្បីបញ្ជាក់ថាឯកសារមាន ត្រឡប់ស្ថានភាព 200 មានទំហំត្រឹមត្រូវ និងត្រូវបានប្រកាសត្រឹមត្រូវក្នុង HTML របស់អ្នក។

លំហូរការងារជាក់ស្តែង

1. ចាប់ផ្ដើមពីនិមិត្តសញ្ញាម៉ាករបស់អ្នក ហើយធ្វើឱ្យសាមញ្ញទៅជារូបរាង ឬអក្សរតែមួយ។
2. បង្កើតផ្ទាំងគំនូរការេដែលមានផ្ទៃខាងក្រោយដុំ ឬមានរូបរាង ដែលដំណើរការក្នុងធីមទាំងពីរ។
3. នាំចេញទំហំ 32x32 និង 16x16 ហើយកែសម្រួលជំនាន់តូចដោយដៃក្នុងកម្មវិធីកែភីកសែល។
4. បង្កើតក្រុមពេញលេញ (ICO, PNG, apple-touch-icon, រូបតំណាង manifest) ជាមួយកម្មវិធីបង្កើត។
5. បន្ថែមស្លាកតំណ កំណត់ header ឃ្លាំងសម្ងាត់ ដាក់ឱ្យប្រើ ហើយផ្ទៀងផ្ទាត់ជាមួយកម្មវិធីពិនិត្យ។

Favicon គឺជាទ្រព្យសម្បត្តិតូចបំផុតមួយនៅលើគេហទំព័ររបស់អ្នក និងជាអ្វីដែលគេឃើញញឹកញាប់បំផុតមួយ។ ការសម្រេចចិត្តប្រុងប្រយ័ត្នពីរបីអំពីភាពផ្ទុយពណ៌ ភាពសាមញ្ញ និងភាពស៊ីសង្វាក់ ធ្វើឱ្យវាដំណើរការក្នុងគ្រប់ផ្ទាំង ធីម និងឧបករណ៍។

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

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

រចនាសម្រាប់ 16x16 និង 32x32 សម្រាប់ផ្ទាំងកម្មវិធីរុករក (កម្មវិធីរុករកប្រើ 32x32 លើអេក្រង់ដង់ស៊ីតេខ្ពស់) ផ្ដល់ apple-touch-icon 180x180 សម្រាប់ iOS និង PNG 192x192 និង 512x512 សម្រាប់ Android និង PWA។ សម្រាប់លទ្ធផលស្វែងរករបស់ Google ត្រូវប្រើរូបតំណាងការេដែលទំហំជាគុណនៃ 48 ភីកសែល ដូចជា 48x48 ឬ 96x96។ ប្រភព SVG អាចធ្វើមាត្រដ្ឋានទៅទំហំទាំងអស់នោះ។

តើខ្ញុំគួរប្រើឡូហ្គោពេញជា favicon ទេ?

ជាធម្មតាមិនគួរទេ។ ឡូហ្គោពេញដែលមានអក្សរម៉ាកមានព័ត៌មានលម្អិតច្រើន និងទទឹងពេកសម្រាប់រូបតំណាងការេ 16x16។ ប្រើនិមិត្តសញ្ញាម៉ាក ឬអក្សរកាត់មួយ ឬពីរតួ ហើយធ្វើឱ្យសាមញ្ញដើម្បីឱ្យនៅតែអាចស្គាល់បាននៅពេលតូច។

តើធ្វើដូចម្តេចឱ្យ favicon ដំណើរការក្នុងម៉ូដងងឹត?

វិធីសុវត្ថិភាពបំផុតគឺផ្ដល់ឱ្យរូបតំណាងមានរូបរាងផ្ទៃខាងក្រោយដុំផ្ទាល់ខ្លួន ឬគ្រោងផ្ទុយពណ៌ ដើម្បីកុំឱ្យពឹងលើពណ៌ផ្ទាំង។ ម្យ៉ាងទៀត ប្រើ SVG favicon ជាមួយ media query prefers-color-scheme ដើម្បីប្ដូរពណ៌ ហើយរក្សា PNG ឬ ICO ជាជម្រើសបម្រុងសម្រាប់កម្មវិធីរុករកដែលមិនគាំទ្ររូបតំណាង SVG។ ត្រូវសាកល្បងក្នុងធីមទាំងភ្លឺ និងងងឹតជានិច្ច។

ហេតុអ្វី favicon ថ្មីរបស់ខ្ញុំមិនបង្ហាញ?

កម្មវិធីរុករករក្សា favicon ក្នុងឃ្លាំងសម្ងាត់យូរ ហើយ Google រក្សាច្បាប់ចម្លងផ្ទាល់ខ្លួន ដែលវាធ្វើឱ្យស្រស់តាមកាលវិភាគផ្ទាល់ខ្លួន ដែលច្រើនតែចំណាយពេលច្រើនថ្ងៃ ឬច្រើនសប្តាហ៍។ ត្រូវ hard-refresh ទំព័រ សម្អាតឃ្លាំងសម្ងាត់កម្មវិធីរុករក ប្រើឈ្មោះឯកសារមានកំណែថ្មី ហើយធានាថាស្លាកតំណ និង /favicon.ico នៅ root ចង្អុលទៅឯកសារត្រឹមត្រូវ។ អ្នកអាចផ្ទៀងផ្ទាត់ការដំឡើងជាមួយកម្មវិធីពិនិត្យ MakeFav។

តើវាជាគំនិតល្អទេក្នុងការបង្ហាញស្លាកជូនដំណឹងលើ favicon?

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