តើខ្ញុំបង្កើត favicon ពីឡូហ្គោរបស់ខ្ញុំយ៉ាងដូចម្តេច?

ទម្លាក់ឯកសារ PNG, JPEG, WebP ឬ SVG កំណត់ជម្រើសដូចជា រូបរាង គម្លាត និង ឈ្មោះកម្មវិធី រួចចុច បង្កើតកញ្ចប់ favicon (.zip)។ ចម្លងកូដ HTML ដែលបង្ហាញក្រោម បិទភ្ជាប់ក្នុង head។

តើមានឯកសារអ្វីខ្លះក្នុង ZIP favicon?

favicon-package.zip មាន favicon.ico, រូបតំណាង PNG (16, 32, 180, 192 និង 512 ភីកសែល), site.webmanifest ជាមួយឈ្មោះកម្មវិធីរបស់អ្នក និង favicon-snippet.html ជាមួយស្លាក link។

តើខ្ញុំគួរផ្ទុកឡើងរូបភាពទំហំ និងទ្រង់ទ្រាយអ្វី?

PNG, JPEG, WebP និង SVG ត្រូវបានទទួលយក ម្តងមួយឯកសារ។ ដើម្បីលទ្ធផលច្បាស់បំផុតសូមប្រើរូបភាពការ៉េយ៉ាងតិច 512x512 PNG ឬ SVG ថ្លាដំណើរការបានល្អបំផុត។

តើខ្ញុំទទួលបាន favicon មូល ឬមូលជ្រុងយ៉ាងដូចម្តេច?

បន្ទាប់ពីផ្ទុកឡើង ជ្រើស ការ៉េ, មូលជ្រុង ឬ រង្វង់ ក្រោម រូបរាង។ អ្នកក៏អាចលៃ គម្លាត ពី 0 ដល់ 25 ភាគរយ ហើយមើលលទ្ធផលជាមុនក្នុង ផ្ទាំងកម្មវិធីរុករក។

តើរូបភាពរបស់ខ្ញុំត្រូវបានផ្ទុកឡើងទេ ហើយហេតុអ្វីបានជាការបង្កើតបរាជ័យ?

រូបតំណាងត្រូវបានគូរដោយ Canvas របស់កម្មវិធីរុករក ហើយបង្ហាប់ដោយ JSZip លើឧបករណ៍របស់អ្នក។ ប្រសិនបើអ្នកឃើញ មិនអាចផ្ទុករូបភាពនេះបាន ឯកសារអាចខូច សូមសាកល្បងរូបភាព ឬកម្មវិធីរុករកផ្សេង។

តើវាឥតគិតថ្លៃពិតមែនទេ?

ពិតប្រាកដណាស់។ ឧបករណ៍ទាំងអស់គឺអាចប្រើបានដោយឥតគិតថ្លៃ ដោយមិនបាច់មានគណនី និងមិនបាច់ប្រើកាតឥណទានឡើយ។ ការងារទាំងអស់ដំណើរការនៅលើឧបករណ៍របស់អ្នកផ្ទាល់ ជាជាងនៅលើម៉ាស៊ីនបម្រើ (server) របស់យើង ដែលនេះហើយជាមូលហេតុធ្វើឱ្យវាដំណើរការដោយឥតគិតថ្លៃ។

តើឯកសាររបស់ខ្ញុំត្រូវបានផ្ទុកឡើងទេ?

ទេ។ ឯកសាររបស់អ្នកត្រូវបានបើក និងដំណើរការក្នុងកម្មវិធីរុករក ហើយមិនត្រូវបានផ្ញើទៅ LibraTool ទេ។ ឧបករណ៍មួយចំនួនទាញយកម៉ាស៊ីនដំណើរការ ឬម៉ូដែល AI ទៅកម្មវិធីរុករករបស់អ្នកជាមុនសិន ការទាញយកនោះមិនមានទិន្នន័យរបស់អ្នកទេ។

វាដំណើរការនៅលើទូរស័ព្ទទេ?

បាទ/ចាស។ វាដំណើរការលើកម្មវិធីរុករកទូរសព្ទទំនើបលើ iOS និង Android ដោយមិនចាំបាច់ដំឡើងអ្វីទេ។ ឯកសារធំខ្លាំងអាចយឺត ឬអស់ទំហំចងចាំលើទូរសព្ទ ដូច្នេះសូមប្រើកុំព្យូទ័រសម្រាប់ឯកសារទាំងនោះ។

🌟

បង្កើត Favicon ឥតគិតថ្លៃ

បំប្លែងរូបភាពណាមួយទៅជា favicon package ពេញ: favicon.ico ច្រើនទំហំ Apple touch icon, Android/PWA icon, web manifest, និង HTML snippet ត្រៀម paste — zip ទាំងអស់ ក្នុងកម្មវិធីរុករករបស់អ្នក។

ទំហំឯកសារអាស្រ័យលើឧបករណ៍របស់អ្នកឯកសារនៅជាឯកជនមិនចាំបាច់ចូលគណនីឥតគិតថ្លៃជារៀងរហូត

ទម្លាក់ឯកសារនៅទីនេះ ឬចុចដើម្បីរកមើល

PNG, JPG, WebP, SVG, HEIC, HEIF · ដំណើរការលើឧបករណ៍របស់អ្នក

ឬចុច Ctrl+V ដើម្បីបិទភ្ជាប់ពីក្ដារតម្បៀតខ្ទាស់

រុករកឯកសារ

ឯកសាររបស់អ្នកមិនដែលចេញពីឧបករណ៍របស់អ្នកទេ។ ការដំណើរការទាំងអស់កើតឡើងក្នុងស្រុកនៅក្នុងកម្មវិធីរុករករបស់អ្នក។

💡 សម្រាប់លទ្ធផលច្បាស់ជាងគេ ផ្ទុករូបភាពជ្រុងច្រូតយ៉ាងហោចណាស់ 512×512។ PNG ឬ SVG ប្រើប្រាស់ល្អបំផុត។

ការប្រើប្រាស់ទូទៅ

បង្កើត Favicon គេហទំព័របង្កើតសំណុំ favicon ពេញលេញដែលគ្រប់កម្មវិធីរុករក និងឧបករណ៍ត្រូវការ។
ដំណើរការ PWA និងរូបតំណាង Manifestទទួលបាន 192px និង 512px រូបតំណាង និង Web Manifest ដែល PWA ត្រូវការ។
បង្កើតរូបតំណាង Apple Touchដំណើរការលើ 180×180 រូបតំណាង iOS ប្រើនៅពេលដែលគេហទំព័របានរក្សាទុកក្នុងអេក្រង់ដើម។
បង្វែរឡូហ្គូទៅ Faviconបម្លែងឡូហ្គូម៉ាកយីហោចនៃលក្ខណៈ favicon ដែលកើតឡើង។
ដំណើរការ Favicons សម្រាប់ក្របខណ្ឌណាមួយទទួលបាន favicon ឯកសារសម្រាប់ React, Next.js, WordPress និងលេខ។

វាដំណើរការដោយរបៀបណា

ឧបករណ៍នេះប្តូរ PNG, JPEG, WebP ឬ SVG ណាមួយទៅជាកញ្ចប់ favicon ពេញលេញ — .ico ច្រើនទំហំ Apple touch icon រូបតំណាង Android/PWA web manifest និងខ្លីៗ HTML ត្រៀមបិទភ្ជាប់ — ទាំងស្រុងនៅក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើ Canvas API និង JSZip។ គ្មានអ្វីត្រូវបានផ្ទុកឡើងទេ; ការបង្ហាញ និងការប្រមូលឯកសារទាំងអស់កើតឡើងនៅក្នុងស្រុក។

1
Canvas ធ្វើមាត្រដ្ឋានឡើងវិញលើកំណត់ត្រារបស់អ្នក
កម្មវិធីរុករកគូររូបភាពប្រភពរបស់អ្នកលើធាតុ HTML Canvas ក្រៅអេក្រង់នៅទំហំចាំបាច់នីមួយៗ (16, 32, 48, 180, 192 និង 512 px)។ SVGs ដែលគ្មានគុណលក្ខណៈទទឹង/កម្ពស់ច្បាស់លាស់ត្រូវបានធ្វើឱ្យស្តង់ដារដំបូងតាម DOMParser និង XMLSerializer ដូច្នេះ Firefox និង Chrome ផលិតលទ្ធផល pixel ដូចគ្នាបេះបិទជំនួសឱ្យ canvas ទទេ។
2
កម្មវិធីអ៊ិនកូដ ICO សរសេរដោយដៃវេចខ្ចប់ឯកសារ .ico
ធាតុ ICO តូច (16, 32, 48 px) ត្រូវបានអ៊ិនកូដជា bitmap DIB BGRA 32-ប៊ីតដើម — BITMAPINFOHEADER បូកជួរ XOR ចេញពីបាត និងម៉ាស់ AND 1bpp — ព្រោះសមាសធាតុសែល Windows ត្រូវការទម្រង់ DIB មិនបានបង្រួមនៅទំហំទាំងនោះ។ ឧបករណ៍សរសេរបឋមកថាកាតាឡុក ICO ហើយភ្ជាប់ធាតុទាំងស្រុងជាមួយ DataView និង Uint8Array ដោយគ្មានបណ្ណាល័យ ICO ខាងក្រៅពាក់ព័ន្ធទេ។
3
លទ្ធផល PNG ត្រូវបានផលិតតាម canvas.toBlob
ប្រភេទ PNG នីមួយៗ (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) ត្រូវបានចាប់យកដោយហៅ canvas.toBlob ជាមួយ 'image/png' ប្រគល់ការអ៊ិនកូដគ្មានការបាត់បង់ទៅម៉ាស៊ីនរូបភាពភ្ជាប់ជាមួយកម្មវិធីរុករក។ ចន្លោះជម្រើស ពណ៌ផ្ទៃខាងក្រោយ និងការកាត់រូបរាង (ការ៉េ ជុំ ឬរង្វង់) ត្រូវបានអនុវត្តទៅបរិបទ canvas មុននឹងការចាប់យក។
4
JSZip វេចខ្ចប់អ្វីៗទាំងអស់ទៅជាទាញយកតែមួយ
JSZip ប្រកបឯកសារដែលបានបង្កើតទាំងអស់ — favicon.ico, PNG ប្រាំ, site.webmanifest ជាមួយឈ្មោះកម្មវិធីរបស់អ្នក និង favicon-snippet.html ជាមួយ <link> tags ត្រឹមត្រូវ — ទៅជា blob .zip តែមួយដែលទាញយកដោយស្វ័យប្រវត្តិទៅឧបករណ៍របស់អ្នក។

រូបភាពរបស់អ្នកត្រូវបានផ្ទុកដោយផ្ទាល់ទៅ Canvas API របស់កម្មវិធីរុករក ហើយមិនដែលចាកចេញពីឧបករណ៍របស់អ្នកទេ — គ្មានទិន្នន័យឯកសារត្រូវបានបញ្ជូនទៅម៉ាស៊ីនមេណាមួយនៅចំណុចណាមួយទេ។