ஃபேவிகான் தொகுப்பை உருவாக்கவும் _

உலாவி-அடிப்படையிலான ஃபேவிகான் உருவாக்கம் எவ்வாறு செயல்படுகிறது

முழு உருவாக்கக் குழாயும் Canvas API மற்றும் fflate சுருக்க நூலகத்தைப் பயன்படுத்தி உங்கள் உலாவி தாவலுக்குள் இயங்குகிறது. சர்வர்-பக்க செயலாக்கம் இல்லை, பதிவேற்றங்கள் இல்லை, மூன்றாம்-தரப்பு சேவைகள் இல்லை.

1. உங்கள் மூலப் படத்தை ஏற்றவும் அல்லது உங்கள் உரை அல்லது எமோஜியை உயர் தெளிவுத்திறனில் திரைக்கப்பாற் கேன்வாஸில் வழங்கவும். நீங்கள் ஒரு படத்தைத் தேர்ந்தெடுத்தால், அது உலாவியால் இயல்பாக டிகோட் செய்யப்படுகிறது. நீங்கள் உரை முறையைத் தேர்ந்தெடுத்தால், பக்கம் உங்கள் சொல்லை தேர்ந்தெடுக்கப்பட்ட எழுத்துரு, முன்புற நிறம் மற்றும் பின்னணி நிறத்துடன் ஒரு கேன்வாஸில் வரைகிறது.
2. ஒவ்வொரு இலக்கு அளவிற்கும் (16, 32, 48, 180, 192, 512 பிக்சல்கள்), பக்கம் அந்தத் துல்லியமான பரிமாணத்தில் ஒரு புதிய திரைக்கப்பாற் கேன்வாஸை உருவாக்குகிறது, பின்னர் Canvas API ஐப் பயன்படுத்தி அதில் மூல உள்ளடக்கத்தை வரைகிறது. உலாவியின் உள்ளமைந்த பட மறுஅளவிடுதல் பைலீனியர் அல்லது பைகியூபிக் வடிகட்டுதலுடன் தானாக கீழ்அளவிடுதலை கையாள்கிறது, ஒவ்வொரு அளவிலும் கூர்மையான ஃபேவிகானை உருவாக்குகிறது.
3. ஒவ்வொரு கேன்வாஸும் canvas.toBlob() மூலம் PNG Blob ஆக ஏற்றுமதி செய்யப்படுகிறது. முன்பார்வை பேனல் உங்களுக்கு ஆறு அளவுகளையும் காட்டுகிறது, இதனால் நீங்கள் பதிவிறக்கும் முன் முடிவை ஆய்வு செய்யலாம். ஒரு ஆயத்த-ஒட்டு HTML தொகுதி மற்றும் ஒரு வெப்-ஆப் மேனிஃபெஸ்ட் துணுக்கு (manifest.json) கோப்புப்பெயர்களிலிருந்து கட்டமைக்கப்படுகின்றன, இதனால் நீங்கள் அவற்றை நேரடியாக உங்கள் தளத்தின் ஹெட் டேக்கில் இடலாம்.
4. நீங்கள் ZIP பதிவிறக்கவும் என்பதைக் கிளிக் செய்யும் போது, பக்கம் ஒவ்வொரு PNG Blob ஐயும் நினைவகத்தில் படிக்கிறது, fflate ஐப் பயன்படுத்தி அவற்றை manifest.json கோப்புடன் ஒற்றை ZIP காப்பகத்தில் பேக்கேஜ் செய்கிறது, மற்றும் ஒரு கிளிக்கில் பதிவிறக்கத்தைத் தூண்டுகிறது. முழு தொகுப்பும் உங்கள் உலாவியில் கட்டமைக்கப்படுகிறது — எந்த கட்டத்திலும் எதுவும் பதிவேற்றப்படவில்லை.

ஏன் உங்கள் உலாவியில் ஃபேவிகான்களை உருவாக்க வேண்டும்?

• ஒரு முழுமையான ஃபேவிகான் தொகுப்பு முதல் வருகையில் உலாவியின் ஃபேவிகான்-கிடைக்கவில்லை 404 ஐ நீக்குகிறது மற்றும் உங்கள் தளம் புக்மார்க்குகள், உலாவி தாவல்கள் மற்றும் PWA நிறுவல் திரைகளில் தொழில்முறையாக தோற்றமளிப்பதை உறுதி செய்கிறது. விடுபட்ட அளவுகள் என்றால் உலாவி எதையும் ஏற்றவில்லை அல்லது மங்கலான அருகிலுள்ள-அயல் அளவிற்கு திரும்புகிறது.
• தொகுக்கப்பட்ட HTML மற்றும் மேனிஃபெஸ்ட் துணுக்கு ஆறு டேகுகள் மற்றும் ஒரு JSON மேனிஃபெஸ்ட் தொகுதியை கையால் எழுதுவதிலிருந்து உங்களைக் காப்பாற்றுகிறது. அவற்றை உங்கள் தளத்தின் ஹெட்-ல் ஒட்டவும், தேவைப்பட்டால் பாதைகளை சரிசெய்யவும், மேலும் நீங்கள் நிமிடங்களுக்குப் பதிலாக வினாடிகளில் முடித்துவிடுகிறீர்கள்.
• கிளையண்ட்-பக்க உருவாக்கம் என்பது புகைப்பட எடிட்டர் இல்லாத பூட்டிய கார்ப்பரேட் சாதனங்களில் ஒரே விருப்பமாகும். எதுவும் பதிவேற்றப்படாததால், தரவு-கசிவு ஆபத்து இல்லை மற்றும் உணர்திறன் அல்லது பிராண்டட் படங்களுக்கு எந்த இணக்கம் மதிப்பாய்வும் தேவையில்லை.
• உரை மற்றும் எமோஜி முறை எந்த படமும் இல்லாமல் ஃபேவிகானை உருவாக்க உங்களை அனுமதிக்கிறது. உங்கள் பிராண்டின் முதலெழுத்து, ஒரு எழுத்து அல்லது எமோஜியை தட்டச்சு செய்யவும், எழுத்துரு மற்றும் நிறத்தை தேர்வுசெய்யவும், மேலும் ஒரு முழு தொகுப்பைப் பெறவும் — தனிப்பட்ட திட்டங்கள், முன்மாதிரிகள் அல்லது தற்போது ஒரு தற்காலிக ஃபேவிகான் தேவைப்படும் தளங்களுக்கு ஏற்றது.

பொதுவான ஃபேவிகான் உருவாக்க பயன்பாடுகள்

மக்கள் புக்மார்க் செய்யும் அல்லது நிறுவும் ஒவ்வொரு தளத்திற்கும் ஒரு ஃபேவிகான் தேவை. உலாவி-அடிப்படையிலான ஜெனரேட்டர் நேரத்தை மிச்சப்படுத்தும் மூன்று காட்சிகள் இங்கே உள்ளன.

• ஒரு புதிய லேண்டிங் பேஜ் அல்லது மைக்ரோசைட்டை அமைத்தல். ஒரு நிமிடத்திற்குள் பிராண்ட் லோகோவிலிருந்து முழு ஃபேவிகான் தொகுப்பை உருவாக்கவும், டேகுகளை தளத்தின் ஹெட்-ல் நகலெடுக்கவும், மற்றும் பயன்படுத்தவும். எந்த வடிவமைப்பு கருவியும் தேவையில்லை.
• ஒரு முற்போக்கு வெப் ஆப்பிற்கான PWA ஐகான்களை தயாரித்தல். 192×192 மற்றும் 512×512 PNG ஐகான்கள் manifest.json க்கு தேவை. ஒரு லோகோவை கைமுறையாக மறுஅளவிடுவதற்குப் பதிலாக ஒரே படியில் மீதமுள்ள ஃபேவிகான் தொகுப்புடன் அவற்றை உருவாக்கவும்.
• முன்மாதிரிகள் மற்றும் ஸ்டேஜிங் தளங்களுக்கான தற்காலிக இடங்களை உருவாக்குதல். ஒரு ஒற்றை எழுத்து அல்லது எமோஜியை தட்டச்சு செய்யவும், ஒரு பின்னணி நிறத்தை தேர்வுசெய்யவும், மற்றும் வடிவமைப்பு குழுவிடமிருந்து இறுதி பிராண்ட் சொத்துக்களுக்காக காத்திருக்காமல் யதார்த்தமான ஃபேவிகான்களைப் பெறவும்.

ஒரு வேலை உதாரணம்: நிறுவன லோகோவிலிருந்து ஃபேவிகான் தொகுப்பை உருவாக்குதல்

உங்களிடம் 500×500 PNG லோகோ உள்ளது மற்றும் புதிய மார்க்கெட்டிங் தளத்திற்கு முழு ஃபேவிகான் தொகுப்பு தேவை.

இந்தப் பக்கத்தைத் திறந்து லோகோ PNG ஐ பதிவேற்ற மண்டலத்தில் இடவும். படம் ஏற்றப்படுகிறது மற்றும் அளவு கட்டத்துடன் ஒரு முன்பார்வை தோன்றுகிறது. ஃபேவிகான்களை உருவாக்கவும் என்பதைக் கிளிக் செய்யவும். பக்கம் லோகோவை 16, 32, 48, 180, 192 மற்றும் 512 பிக்சல்களில் ஆறு திரைக்கப்பாற் கேன்வாஸ்களில் வரைகிறது மற்றும் ஒவ்வொரு முடிவையும் உங்களுக்குக் காட்டுகிறது. முன்பார்வை பேனலுக்குக் கீழே, ஆயத்த-ஒட்டு HTML தொகுதி 16/32/48 அளவுகளுக்கு rel=\"icon\" உள்ளீடுகளுடன், 180 அளவிற்கு apple-touch-icon இணைப்பு மற்றும் PWA ஐகான்களுக்கு manifest இணைப்புடன் தோன்றுகிறது. கீழே உள்ள மேனிஃபெஸ்ட் துணுக்கு 192 மற்றும் 512 ஐகான்களைப் பட்டியலிடுகிறது. ZIP பதிவிறக்கவும் என்பதைக் கிளிக் செய்யவும் — பக்கம் ஆறு PNGகளையும் manifest.json ஐயும் fflate மூலம் ஒற்றை ZIP காப்பகத்தில் பேக்கேஜ் செய்கிறது. முழு சுற்றுப் பயணம் இரண்டு வினாடிகள் ஆகும் மற்றும் ஆரம்ப பக்கம் ஏற்றத்திற்கு அப்பால் எந்த அலைவரிசையையும் பயன்படுத்தாது.

கருவி எந்த ஃபேவிகான் அளவுகளை உருவாக்குகிறது?

ஆறு அளவுகள்: நிலையான உலாவி ஃபேவிகான்களுக்கு 16×16, 32×32 மற்றும் 48×48, Apple Touch ஐகானுக்கு 180×180, மற்றும் PWA மேனிஃபெஸ்ட் ஐகான்களுக்கு 192×192 மற்றும் 512×512. ஒவ்வொரு அளவும் PNG ஆக வெளியிடப்படுகிறது. நவீன உலாவிகள் வழியாக PNG ஃபேவிகான்களை ஏற்கின்றன.

நான் உரை அல்லது எமோஜியிலிருந்து ஒரு ஃபேவிகானை உருவாக்க முடியுமா?

ஆம். உரை அல்லது எமோஜி முறைக்கு மாறவும், ஒரு சொல்லை தட்டச்சு செய்யவும் அல்லது எமோஜியை ஒட்டவும், எழுத்துரு, முன்புற நிறம் மற்றும் பின்னணி நிறத்தை தேர்வுசெய்யவும், மற்றும் உருவாக்கு என்பதைக் கிளிக் செய்யவும். உரை உயர் தெளிவுத்திறனில் திரைக்கப்பாற் கேன்வாஸில் வழங்கப்படுகிறது மற்றும் பின்னர் ஒவ்வொரு இலக்கு ஃபேவிகான் அளவிற்கும் மறுஅளவிடப்படுகிறது.

படம் ஒரு சர்வருக்கு பதிவேற்றப்படுகிறதா?

இல்லை. படம் ஒருபோதும் உங்கள் சாதனத்தை விட்டு வெளியேறாது. பக்கம் உலாவியின் File API ஐப் பயன்படுத்தி படத்தை நினைவகத்தில் படிக்கிறது மற்றும் Canvas API ஐப் பயன்படுத்தி ஒவ்வொரு ஃபேவிகானையும் மறுஅளவிட்டு ஏற்றுமதி செய்கிறது. உருவாக்கும் போது DevTools Network பேனலைத் திறக்கவும் — ஒரே வெளிச்செல்லும் கோரிக்கைகள் ஆரம்ப பக்கம் ஏற்றம் மற்றும் விளம்பர அழைப்புகள் மட்டுமே. எந்த பட தரவும் அனுப்பப்படவில்லை.

பட பதிவேற்றத்திற்கு என்ன வடிவங்கள் ஏற்கப்படுகின்றன?

உலாவி டிகோட் செய்யக்கூடிய எந்த வடிவமும்: PNG, JPEG, WebP, GIF மற்றும் SVG (உலாவியால் ராஸ்டரைஸ் செய்யப்பட்டது). கோப்பு அளவு வரம்பு ஒரு பதிவேற்றத்திற்கு 10 MB.

ZIP பதிவிறக்கம் எவ்வாறு செயல்படுகிறது?

பக்கம் fflate நூலகத்தை (பகிரப்பட்ட வெண்டர் பாதையில் இருந்து தேவைக்கேற்ப ஏற்றப்பட்டது) பயன்படுத்தி அனைத்து உருவாக்கப்பட்ட PNGகளையும் manifest.json ஐயும் ஒரு நிலையான ZIP காப்பகத்தில் பேக்கேஜ் செய்கிறது. பேக்கேஜிங் முற்றிலும் உலாவி நினைவகத்தில் நிகழ்கிறது — பதிவேற்றம் இல்லை, சர்வர் சுற்றுப் பயணம் இல்லை. ZIP ஒரு கிளிக்கில் Blob பதிவிறக்கமாக வழங்கப்படுகிறது.

இந்த ஃபேவிகான்களை நான் எந்த வெப்சைட்டிலும் பயன்படுத்தலாமா?

ஆம். உருவாக்கப்பட்ட PNG ஃபேவிகான்கள் டேக்கை ஆதரிக்கும் ஒவ்வொரு நவீன உலாவியிலும் வேலை செய்கின்றன. 180×180 Apple Touch ஐகான் iOS மற்றும் Safari ஐ உள்ளடக்குகிறது. 192×192 மற்றும் 512×512 PWA ஐகான்கள் Chrome on Android மற்றும் பிற PWA-ஆதரவு உலாவிகளுக்கான மேனிஃபெஸ்ட் தேவைகளை பூர்த்தி செய்கின்றன.

உண்மையான .ico வடிவ விருப்பம் உள்ளதா?

தற்போதைய பதிப்பு PNGகளை வெளியிடுகிறது, ஏனெனில் ஒவ்வொரு நவீன உலாவியும் அவற்றை வழியாக ஏற்கிறது. உண்மையான பல-தெளிவுத்திறன் .ico வடிவம் இன்னும் ஆதரிக்கப்படவில்லை மற்றும் எதிர்கால வெளியீட்டில் சேர்க்கப்படலாம்.