ഈ ടൂളിനെ കുറിച്ച്
ബ്രൗസർ ടാബുകളിലും ബുക്ക്മാർക്കുകളിലും ചരിത്ര ലിസ്റ്റുകളിലും ദൃശ്യമാകുന്ന ചെറിയ ഐക്കണാണ് ഫെവിക്കോൺ. യഥാർത്ഥ ഫേവിക്കോൺ — /favicon.ico-ലെ ഒരു 16×16 ICO ഫയൽ — വ്യത്യസ്ത പ്ലാറ്റ്ഫോമുകൾക്കായി വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ഐക്കണുകളുടെ ഒരു സങ്കീർണ്ണ സെറ്റായി വികസിപ്പിച്ചിരിക്കുന്നു: ബ്രൗസർ ടാബുകൾക്ക് 16×16, 32×32, iOS ഹോം സ്ക്രീനുകൾക്ക് 180×180, Android-ന് 192×192, 512×512 വലുപ്പങ്ങൾ. ഒരു സോഴ്സ് ഇമേജിൽ നിന്ന് ഇവയെല്ലാം നിർമ്മിക്കുക എന്നതാണ് ഒരു ആധുനിക ഫാവിക്കോൺ ജനറേറ്റർ ചെയ്യുന്നത്.
ഈ ടൂൾ ഒരൊറ്റ ഹൈ-റെസല്യൂഷൻ സോഴ്സ് ഇമേജ് (സാധാരണയായി ഒരു ചതുര ലോഗോ) എടുക്കുകയും ഫാവിക്കോൺ അസറ്റുകളുടെ മുഴുവൻ സെറ്റും അവ റഫറൻസ് ചെയ്യുന്നതിന് ആവശ്യമായ HTML ലിങ്ക് ടാഗുകളും സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. ഔട്ട്പുട്ടിൽ ICO, ഒന്നിലധികം PNG-കൾ, പുരോഗമന വെബ് ആപ്പ് മെറ്റാഡാറ്റയ്ക്കായി ഒരു manifest.json എന്നിവ ഉൾപ്പെടുന്നു. തത്ഫലമായുണ്ടാകുന്ന ഫയലുകൾ നിങ്ങളുടെ സൈറ്റിൻ്റെ റൂട്ടിൽ ഡ്രോപ്പ് ചെയ്യുകയും ജനറേറ്റുചെയ്ത HTML വഴി അവ റഫറൻസ് ചെയ്യുകയും ചെയ്യുക.
എല്ലാ പ്രോസസ്സിംഗും നിങ്ങളുടെ ബ്രൗസറിൽ നടക്കുന്നു. അപ്ലോഡ് ഇല്ല, API കോളില്ല, നിരക്ക് പരിധിയില്ല. ഫാവിക്കോണുകൾ പ്രദർശിപ്പിക്കുന്ന എല്ലാ ആധുനിക ബ്രൗസറിലും ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിലും ഔട്ട്പുട്ട് പ്രവർത്തിക്കുന്നു.
എന്തുകൊണ്ടാണ് ഒരു ഫാവിക്കോൺ സൃഷ്ടിക്കുന്നത്
ഫാവിക്കോണുകളില്ലാത്ത സൈറ്റുകൾ പൂർത്തിയാകാത്തതായി തോന്നുന്നു. ബ്രൗസർ ടാബുകൾ ഒരു പൊതു ഐക്കൺ കാണിക്കുന്നു; ബുക്ക്മാർക്കുകൾക്ക് വിഷ്വൽ ഐഡൻ്റിഫയർ ഇല്ല; സൈറ്റ് പ്രൊഫഷണലായി കാണുന്നില്ല. ശരിയായ ഫാവിക്കോൺ സെറ്റ് ചേർക്കുന്നത്, വിശദാംശങ്ങളിലേക്കുള്ള ശ്രദ്ധയെ സൂചിപ്പിക്കുന്ന ഒരു കുറഞ്ഞ പ്രയത്നമുള്ള ഉയർന്ന-ഇംപാക്ട് പോളിഷ് ഘട്ടമാണ്.
ആധുനിക ഫാവിക്കോൺ ആവശ്യകതകൾ /favicon.ico എന്നതിനപ്പുറം വളർന്നു. iOS ഹോം സ്ക്രീൻ ഐക്കണുകൾ, ആൻഡ്രോയിഡ് ക്രോം ഐക്കണുകൾ, വിൻഡോസ് ടൈൽ ഐക്കണുകൾ, ഡാർക്ക് മോഡ് വേരിയൻ്റുകൾ എന്നിവയെല്ലാം വ്യത്യസ്ത ഫയലുകൾ ഉപയോഗിക്കുന്നു. അവയെല്ലാം ഒരു ഉറവിടത്തിൽ നിന്ന് സൃഷ്ടിക്കുന്നത് ഓരോ ഫയലും കൈകൊണ്ട് കൈകാര്യം ചെയ്യാതെ സ്ഥിരമായ ബ്രാൻഡിംഗ് ഉറപ്പാക്കുന്നു.
സാങ്കേതിക വിശദാംശങ്ങൾ
സമ്പൂർണ്ണ ആധുനിക ഫാവിക്കോൺ സെറ്റ്: favicon.ico (16+32+48 മൾട്ടി-റെസല്യൂഷൻ), ഫേവിക്കോൺ-16x16.png, ഫേവിക്കോൺ-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png12chrome, android.png15 mstile-150x150.png. കൂടാതെ PWA-യ്ക്കുള്ള site.webmanifest, Windows-നായി browserconfig.xml.
ഓരോ പിഎൻജിയും ഉറവിടത്തിൽ നിന്ന് ക്യാൻവാസ് അടിസ്ഥാനമാക്കിയുള്ള ഡൗൺസാംപ്ലിംഗ് വഴിയാണ് സൃഷ്ടിക്കുന്നത്. DataView റൈറ്റുകൾ ഉപയോഗിച്ച് മൾട്ടി-റെസല്യൂഷൻ ICO ഫോർമാറ്റിലേക്ക് 16/32/48 പതിപ്പുകൾ സംയോജിപ്പിച്ചാണ് ICO നിർമ്മിച്ചിരിക്കുന്നത്.
HTML ലിങ്ക് ടാഗുകൾ ഓരോ ഫയലിനെയും ഉചിതമായ റെൽ, സൈസ് ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് പരാമർശിക്കുന്നു. നിങ്ങളുടെ സൈറ്റിൻ്റെ <head> എന്നതിനായുള്ള കോപ്പി-പേസ്റ്റ്-റെഡി സ്നിപ്പെറ്റായി ജനറേറ്റർ ഇവ നിർമ്മിക്കുന്നു.
പതിവ് ചോദ്യങ്ങള്
- ഏത് ചിത്ര ഫോർമാറ്റാണ് ഞാൻ അപ്ലോഡ് ചെയ്യേണ്ടത്?
- സുതാര്യമായ പശ്ചാത്തലമുള്ള PNG മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു. കുറഞ്ഞത് 512x512 പിക്സലുകളുള്ള ഒരു ചതുരാകൃതിയിലുള്ള ചിത്രം ഉപയോഗിക്കുക, അതുവഴി ഗുണനിലവാരം നഷ്ടപ്പെടാതെ ഉപകരണത്തിന് സ്കെയിൽ കുറയ്ക്കാനാകും. ഏത് വലുപ്പത്തിലും സ്കെയിൽ ചെയ്യുന്നതിനാൽ SVG നന്നായി പ്രവർത്തിക്കുന്നു.
- ഇത് എന്ത് വലുപ്പങ്ങളാണ് സൃഷ്ടിക്കുന്നത്?
- 16x16 (ബ്രൗസർ ടാബ്), 32x32 (ബ്രൗസർ ടാബ് @2x), 48x48 (വിൻഡോസ് ടാസ്ക്ബാർ), 180x180 (ആപ്പിൾ ടച്ച് ഐക്കൺ), 192x192 (ആൻഡ്രോയിഡ് ഹോം സ്ക്രീൻ), 512x512 (PWA സ്പ്ലാഷ് സ്ക്രീൻ). ICO ഫയലിൽ 16, 32, 48px വലുപ്പങ്ങൾ അടങ്ങിയിരിക്കുന്നു.
- ഫേവിക്കോൺ ഫയലുകൾ എവിടെ വയ്ക്കണം?
- നിങ്ങളുടെ വെബ്സൈറ്റ് റൂട്ട് ഡയറക്ടറിയിൽ favicon.ico സ്ഥാപിക്കുക. മറ്റ് PNG വലുപ്പങ്ങൾ നിങ്ങളുടെ പൊതു ഫോൾഡറിലോ ആക്സസ് ചെയ്യാവുന്ന ഏതെങ്കിലും പാതയിലോ പോകുന്നു. ഓരോ ഫയൽ ലൊക്കേഷനിലേക്കും പോയിൻ്റ് ചെയ്യുന്ന നിങ്ങളുടെ <head> വിഭാഗത്തിൽ HTML ലിങ്ക് ടാഗുകൾ ചേർക്കുക.
- എന്തുകൊണ്ടാണ് എൻ്റെ ഫേവിക്കോൺ ബ്രൗസറിൽ അപ്ഡേറ്റ് ചെയ്യാത്തത്?
- ബ്രൗസറുകൾ ആക്രമണാത്മകമായി ഫാവിക്കോണുകൾ കാഷെ ചെയ്യുന്നു. നിങ്ങളുടെ ബ്രൗസർ കാഷെ മായ്ക്കുക, ഒരു ആൾമാറാട്ട വിൻഡോയിൽ തുറക്കാൻ ശ്രമിക്കുക, അല്ലെങ്കിൽ ഒരു പുതുക്കൽ നിർബന്ധമാക്കുന്നതിന് ഫേവിക്കോൺ URL-ലേക്ക് ഒരു പതിപ്പ് അന്വേഷണ സ്ട്രിംഗ് (?v=2) ചേർക്കുക.
- എന്തുകൊണ്ടാണ് എൻ്റെ ഫാവിക്കോൺ അപ്ഡേറ്റ് ചെയ്യാത്തത്?
- ബ്രൗസറുകൾ ഫാവിക്കോണുകൾ ആക്രമണാത്മകമായി കാഷെ ചെയ്യുന്നു, ചിലപ്പോൾ ദിവസങ്ങളോളം. കാഷെ മായ്ക്കുന്നതിലൂടെയോ ഐക്കൺ URL നേരിട്ട് തുറക്കുന്നതിലൂടെയോ അല്ലെങ്കിൽ ലിങ്ക് ടാഗിലേക്ക് ഒരു പതിപ്പ് അന്വേഷണ പാരാമീറ്റർ ചേർത്തോ ഒരു പുതുക്കൽ നിർബന്ധമാക്കുക.
- എൻ്റെ ചിത്രം ഒരു സെർവറിലേക്ക് അപ്ലോഡ് ചെയ്തിട്ടുണ്ടോ?
- ഇല്ല. നിങ്ങളുടെ ബ്രൗസറിൽ ജനറേഷൻ സംഭവിക്കുന്നു.
- ഞാൻ SVG അല്ലെങ്കിൽ PNG ഉപയോഗിക്കണോ?
- ഉറവിടത്തിനായുള്ള SVG (റെസല്യൂഷൻ-സ്വതന്ത്രം). ജനറേറ്റർ പ്രത്യേക വലുപ്പത്തിൽ PNG-കൾ ഔട്ട്പുട്ട് ചെയ്യുന്നു; rel=icon type=image/svg+xml എന്ന ലിങ്ക് വഴി ആധുനിക ബ്രൗസറുകളും SVG ഫാവിക്കോണുകളെ പിന്തുണയ്ക്കുന്നു.
- എന്താണ് site.webmanifest?
- ഐക്കണുകളും വർണ്ണങ്ങളും മറ്റ് മെറ്റാഡാറ്റയും വിവരിക്കുന്ന പുരോഗമന വെബ് ആപ്പുകൾക്കായുള്ള ഒരു JSON മാനിഫെസ്റ്റ്. ഇൻസ്റ്റാൾ ചെയ്യാവുന്ന വെബ് ആപ്പുകൾക്ക് ആവശ്യമാണ്; സാധാരണ സൈറ്റുകളിൽ പോലും ഉൾപ്പെടുത്തുന്നത് നിരുപദ്രവകരമാണ്.