ബ്രൗസർ അധിഷ്ഠിത ഫാവികോൺ ജനറേഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു
മുഴുവൻ ജനറേഷൻ പൈപ്പ്ലൈനും Canvas API ഉം fflate കംപ്രഷൻ ലൈബ്രറിയും ഉപയോഗിച്ച് നിങ്ങളുടെ ബ്രൗസർ ടാബിനുള്ളിൽ പ്രവർത്തിക്കുന്നു. സെർവർ-സൈഡ് പ്രോസസ്സിംഗ് ഇല്ല, അപ്ലോഡുകൾ ഇല്ല, മൂന്നാം കക്ഷി സേവനങ്ങൾ ഇല്ല.
- നിങ്ങളുടെ സോഴ്സ് ചിത്രം ലോഡ് ചെയ്യുക അല്ലെങ്കിൽ നിങ്ങളുടെ വാചകമോ ഇമോജിയോ ഉയർന്ന റെസല്യൂഷനിൽ ഒരു ഓഫ്സ്ക്രീൻ കാനവസിൽ റെൻഡർ ചെയ്യുക. നിങ്ങൾ ഒരു ചിത്രം തിരഞ്ഞെടുത്തെങ്കിൽ, അത് ബ്രൗസർ നേറ്റീവ് ആയി ഡീകോഡ് ചെയ്യുന്നു. നിങ്ങൾ ടെക്സ്റ്റ് മോഡ് തിരഞ്ഞെടുത്തെങ്കിൽ, പേജ് നിങ്ങളുടെ വാക്ക് തിരഞ്ഞെടുത്ത ഫോണ്ട്, മുൻഭാഗ നിറം, പശ്ചാത്തല നിറം എന്നിവ ഉപയോഗിച്ച് ഒരു കാനവസിൽ വരയ്ക്കുന്നു.
- ഓരോ ലക്ഷ്യ വലുപ്പത്തിനും (16, 32, 48, 180, 192, 512 പിക്സലുകൾ), പേജ് ആ കൃത്യമായ അളവിൽ ഒരു പുതിയ ഓഫ്സ്ക്രീൻ കാനവസ് സൃഷ്ടിക്കുന്നു, തുടർന്ന് Canvas API ഉപയോഗിച്ച് സോഴ്സ് ഉള്ളടക്കം അതിൽ വരയ്ക്കുന്നു. ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ ഇമേജ് റീസൈസിംഗ് ബിലീനിയർ അല്ലെങ്കിൽ ബൈക്യൂബിക് ഫിൽട്ടറിംഗ് ഉപയോഗിച്ച് ഡൗൺസ്കെയിൽ ഓട്ടോമാറ്റിക്കായി കൈകാര്യം ചെയ്യുന്നു, ഓരോ വലുപ്പത്തിലും മൂർച്ചയുള്ള ഫാവികോൺ നിർമ്മിക്കുന്നു.
- ഓരോ കാനവസും
canvas.toBlob()വഴി ഒരു PNG Blob ആയി എക്സ്പോർട്ട് ചെയ്യുന്നു. പ്രിവ്യൂ പാനൽ എല്ലാ ആറ് വലുപ്പങ്ങളും കാണിക്കുന്നു, അതിനാൽ ഡൗൺലോഡ് ചെയ്യുന്നതിന് മുമ്പ് ഫലം പരിശോധിക്കാം. ഒട്ടിക്കാൻ തയ്യാറായ HTML ബ്ലോക്കും ഒരു വെബ്-ആപ്പ് മാനിഫെസ്റ്റ് സ്നിപ്പറ്റും (manifest.json) ഫയൽനെയിമുകളിൽ നിന്ന് നിർമ്മിക്കുന്നു, അതിനാൽ നിങ്ങൾക്ക് അവ നേരിട്ട് നിങ്ങളുടെ സൈറ്റ് ഹെഡ് ടാഗിൽ ഇടാം. - നിങ്ങൾ Download ZIP ക്ലിക്ക് ചെയ്യുമ്പോൾ, പേജ് ഓരോ PNG Blob മെമ്മറിയിലേക്ക് വായിക്കുന്നു, fflate ഉപയോഗിച്ച് അവയെ ഒരു
manifest.jsonഫയലിനൊപ്പം ഒരൊറ്റ ZIP ആർക്കൈവിൽ പാക്കേജ് ചെയ്യുന്നു, ഒരു ക്ലിക്കിൽ ഡൗൺലോഡ് ട്രിഗർ ചെയ്യുന്നു. മുഴുവൻ ബണ്ടിലും നിങ്ങളുടെ ബ്രൗസറിൽ നിർമ്മിക്കുന്നു — ഒരു ഘട്ടത്തിലും ഒന്നും അപ്ലോഡ് ചെയ്യുന്നില്ല.
എന്തുകൊണ്ട് നിങ്ങളുടെ ബ്രൗസറിൽ ഫാവികോണുകൾ സൃഷ്ടിക്കണം?
- ഒരു സമ്പൂർണ്ണ ഫാവികോൺ സെറ്റ് ആദ്യ സന്ദർശനത്തിൽ തന്നെ ബ്രൗസറിന്റെ ഫാവികോൺ കണ്ടെത്തിയില്ല എന്ന 404 പിശക് ഇല്ലാതാക്കുകയും ബുക്ക്മാർക്കുകളിലും ബ്രൗസർ ടാബുകളിലും PWA ഇൻസ്റ്റാൾ സ്ക്രീനുകളിലും നിങ്ങളുടെ സൈറ്റ് പ്രൊഫഷണലായി കാണപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു. വലുപ്പങ്ങൾ കാണാത്തത് ബ്രൗസർ ഒന്നും ലോഡ് ചെയ്യുന്നില്ല അല്ലെങ്കിൽ മങ്ങിയ നിയറസ്റ്റ്-നെയ്ബർ സ്കെയിലിലേക്ക് വീഴ്ച്ച വരുത്തുന്നു എന്നാണ് അർത്ഥമാക്കുന്നത്.
- ബണ്ടിൽ ചെയ്ത HTML ഉം മാനിഫെസ്റ്റ് സ്നിപ്പറ്റും ആറ് ടാഗുകളും ഒരു JSON മാനിഫെസ്റ്റ് ബ്ലോക്കും കൈകൊണ്ട് എഴുതുന്നതിൽ നിന്ന് നിങ്ങളെ രക്ഷിക്കുന്നു. അവ നിങ്ങളുടെ സൈറ്റ് ഹെഡിൽ ഒട്ടിക്കുക, ആവശ്യമെങ്കിൽ പാത്തുകൾ ക്രമീകരിക്കുക, മിനിറ്റുകൾക്ക് പകരം സെക്കൻഡുകൾക്കുള്ളിൽ നിങ്ങൾ പൂർത്തിയാക്കുന്നു.
- ഫോട്ടോ എഡിറ്റർ ഇല്ലാത്ത നിയന്ത്രിത കോർപ്പറേറ്റ് ഉപകരണങ്ങളിൽ ക്ലയന്റ്-സൈഡ് ജനറേഷൻ മാത്രമാണ് ഏക ഓപ്ഷൻ. ഒന്നും അപ്ലോഡ് ചെയ്യാത്തതിനാൽ, ഡാറ്റ-ലീക്ക് സാധ്യതയില്ല, സെൻസിറ്റീവ് അല്ലെങ്കിൽ ബ്രാൻഡഡ് ഇമേജുകൾക്ക് കംപ്ലയിൻസ് അവലോകനം ആവശ്യമില്ല.
- ടെക്സ്റ്റ്, ഇമോജി മോഡ് ഒരു ചിത്രവുമില്ലാതെ തന്നെ ഫാവികോൺ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്നു. നിങ്ങളുടെ ബ്രാൻഡ് ഇനീഷ്യൽ, ഒരു അക്ഷരം, അല്ലെങ്കിൽ ഒരു ഇമോജി ടൈപ്പ് ചെയ്യുക, ഒരു ഫോണ്ടും നിറവും തിരഞ്ഞെടുക്കുക, ഒരു പൂർണ്ണ സെറ്റ് നേടുക — വ്യക്തിഗത പ്രോജക്ടുകൾ, പ്രോട്ടോടൈപ്പുകൾ, അല്ലെങ്കിൽ ഇപ്പോൾ ഒരു പ്ലെയ്സ്ഹോൾഡർ ഫാവികോൺ ആവശ്യമുള്ള സൈറ്റുകൾ എന്നിവയ്ക്ക് അനുയോജ്യം.
സാധാരണ ഫാവികോൺ ജനറേഷൻ ആപ്ലിക്കേഷനുകൾ
ആളുകൾ ബുക്ക്മാർക്ക് ചെയ്യുന്ന അല്ലെങ്കിൽ ഇൻസ്റ്റാൾ ചെയ്യുന്ന എല്ലാ സൈറ്റിനും ഒരു ഫാവികോൺ ആവശ്യമാണ്. ബ്രൗസർ അധിഷ്ഠിത ജനറേറ്റർ സമയം ലാഭിക്കുന്ന മൂന്ന് സാഹചര്യങ്ങൾ ഇതാ.
- ഒരു പുതിയ ലാൻഡിംഗ് പേജോ മൈക്രോസൈറ്റോ സജ്ജീകരിക്കുക. ഒരു മിനിറ്റിനുള്ളിൽ ഒരു ബ്രാൻഡ് ലോഗോയിൽ നിന്ന് പൂർണ്ണമായ ഫാവികോൺ സെറ്റ് സൃഷ്ടിക്കുക, ടാഗുകൾ സൈറ്റ് ഹെഡിലേക്ക് പകർത്തുക, വിന്യസിക്കുക. ഡിസൈൻ ടൂൾ ആവശ്യമില്ല.
- ഒരു പ്രോഗ്രസീവ് വെബ് ആപ്പിനായി PWA ഐക്കണുകൾ നിർമ്മിക്കുക. manifest.json-ന് 192×192, 512×512 PNG ഐക്കണുകൾ ആവശ്യമാണ്. ഒരു ലോഗോ സ്വമേധയാ വലുപ്പം മാറ്റുന്നതിന് പകരം ഒരു ഘട്ടത്തിൽ ഫാവികോൺ സെറ്റിനൊപ്പം അവ സൃഷ്ടിക്കുക.
- പ്രോട്ടോടൈപ്പുകൾക്കും സ്റ്റേജിംഗ് സൈറ്റുകൾക്കും പ്ലെയ്സ്ഹോൾഡറുകൾ സൃഷ്ടിക്കുക. ഒരൊറ്റ അക്ഷരമോ ഇമോജിയോ ടൈപ്പ് ചെയ്യുക, ഒരു പശ്ചാത്തല നിറം തിരഞ്ഞെടുക്കുക, ഡിസൈൻ ടീമിൽ നിന്നുള്ള അന്തിമ ബ്രാൻഡ് അസറ്റുകൾക്കായി കാത്തുനിൽക്കാതെ റിയലിസ്റ്റിക് ഫാവികോണുകൾ നേടുക.
ഒരു പ്രായോഗിക ഉദാഹരണം: ഒരു കമ്പനി ലോഗോയിൽ നിന്ന് ഫാവികോൺ സെറ്റ് സൃഷ്ടിക്കൽ
നിങ്ങൾക്ക് 500×500 PNG ലോഗോ ഉണ്ട്, ഒരു പുതിയ മാർക്കറ്റിംഗ് സൈറ്റിനായി പൂർണ്ണമായ ഫാവികോൺ സെറ്റ് ആവശ്യമാണ്.
ഈ പേജ് തുറന്ന് ലോഗോ PNG അപ്ലോഡ് സോണിൽ ഇടുക. ചിത്രം ലോഡ് ചെയ്യുകയും സൈസ് ഗ്രിഡിനൊപ്പം ഒരു പ്രിവ്യൂ ദൃശ്യമാവുകയും ചെയ്യുന്നു. ഫാവികോണുകൾ സൃഷ്ടിക്കുക ക്ലിക്ക് ചെയ്യുക. പേജ് ലോഗോ 16, 32, 48, 180, 192, 512 പിക്സലുകളിൽ ആറ് ഓഫ്സ്ക്രീൻ കാനവസുകളിൽ വരയ്ക്കുകയും ഓരോ ഫലവും കാണിക്കുകയും ചെയ്യുന്നു. പ്രിവ്യൂ പാനലിന് താഴെ, 16/32/48 വലുപ്പങ്ങൾക്കായി rel=\"icon\" എൻട്രികളും 180 വലുപ്പത്തിനായി ഒരു apple-touch-icon ലിങ്കും PWA ഐക്കണുകൾക്കായി ഒരു manifest ലിങ്കും ഉൾപ്പെടെ ഒട്ടിക്കാൻ തയ്യാറായ HTML ബ്ലോക്ക് ദൃശ്യമാകുന്നു. താഴെയുള്ള മാനിഫെസ്റ്റ് സ്നിപ്പറ്റ് 192, 512 ഐക്കണുകളെ പട്ടികപ്പെടുത്തുന്നു. ZIP ഡൗൺലോഡ് ചെയ്യുക ക്ലിക്ക് ചെയ്യുക — പേജ് എല്ലാ ആറ് PNGകളും manifest.json-ഉം fflate വഴി ഒരൊറ്റ ZIP ആർക്കൈവിലേക്ക് പാക്കേജ് ചെയ്യുന്നു. മുഴുവൻ റൗണ്ട്-ട്രിപ്പും രണ്ട് സെക്കൻഡ് എടുക്കുകയും പ്രാരംഭ പേജ് ലോഡിനപ്പുറം ബാൻഡ്വിഡ്ത്ത് ഉപയോഗിക്കുകയും ചെയ്യുന്നില്ല.
ഏത് ഫാവികോൺ വലുപ്പങ്ങളാണ് ഉപകരണം സൃഷ്ടിക്കുന്നത്?
ആറ് വലുപ്പങ്ങൾ: സാധാരണ ബ്രൗസർ ഫാവികോണുകൾക്കായി 16×16, 32×32, 48×48, Apple Touch Icon-നായി 180×180, PWA മാനിഫെസ്റ്റ് ഐക്കണുകൾക്കായി 192×192, 512×512. ഓരോ വലുപ്പവും PNG ആയി പുറപ്പെടുവിക്കുന്നു. ആധുനിക ബ്രൗസറുകൾ വഴി PNG ഫാവികോണുകൾ സ്വീകരിക്കുന്നു.
എനിക്ക് വാചകത്തിൽ നിന്നോ ഒരു ഇമോജിയിൽ നിന്നോ ഫാവികോൺ സൃഷ്ടിക്കാൻ കഴിയുമോ?
അതെ. ടെക്സ്റ്റ് അല്ലെങ്കിൽ ഇമോജി മോഡിലേക്ക് മാറുക, ഒരു വാക്ക് ടൈപ്പ് ചെയ്യുക അല്ലെങ്കിൽ ഒരു ഇമോജി ഒട്ടിക്കുക, ഒരു ഫോണ്ട്, മുൻഭാഗ നിറം, പശ്ചാത്തല നിറം എന്നിവ തിരഞ്ഞെടുത്ത് Generate ക്ലിക്ക് ചെയ്യുക. വാചകം ഉയർന്ന റെസല്യൂഷനിൽ ഒരു ഓഫ്സ്ക്രീൻ കാനവസിൽ റെൻഡർ ചെയ്യുകയും തുടർന്ന് ഓരോ ലക്ഷ്യ ഫാവികോൺ വലുപ്പത്തിലേക്കും വലുപ്പം മാറ്റുകയും ചെയ്യുന്നു.
ചിത്രം ഒരു സെർവറിലേക്ക് അപ്ലോഡ് ചെയ്യുന്നുണ്ടോ?
ഇല്ല. ചിത്രം ഒരിക്കലും നിങ്ങളുടെ ഉപകരണം വിട്ടുപോകുന്നില്ല. പേജ് ബ്രൗസറിന്റെ 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 Icon iOS, Safari എന്നിവ ഉൾക്കൊള്ളുന്നു. 192×192, 512×512 PWA ഐക്കണുകൾ Android-ലെ Chrome, മറ്റ് PWA പിന്തുണയുള്ള ബ്രൗസറുകൾ എന്നിവയുടെ മാനിഫെസ്റ്റ് ആവശ്യകതകൾ നിറവേറ്റുന്നു.
ഒരു യഥാർത്ഥ .ico ഫോർമാറ്റ് ഓപ്ഷൻ ഉണ്ടോ?
നിലവിലെ പതിപ്പ് PNGകൾ ഔട്ട്പുട്ട് ചെയ്യുന്നു, കാരണം എല്ലാ ആധുനിക ബ്രൗസറും വഴി അവ സ്വീകരിക്കുന്നു. ഒരു യഥാർത്ഥ മൾട്ടി-റെസല്യൂഷൻ .ico ഫോർമാറ്റ് ഇതുവരെ പിന്തുണയ്ക്കുന്നില്ല, ഭാവി റിലീസിൽ ചേർക്കാവുന്നതാണ്.