இணையதளங்களை வடிவமைக்கும்போது, பிராண்டிங் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துவதில் ஃபேவிகான்கள் (Favicons) முக்கியப் பங்கு வகிக்கின்றன. ஒரு இணையதளத்தின் அடையாளமாக விளங்கும் இந்தச் சிறிய ஐகான்கள், உலாவி தாவல்கள் (browser tabs), புக்மார்க்குகள், மொபைல் சாதனங்களின் முகப்புத் திரைகள் மற்றும் முற்போக்கு இணையப் பயன்பாடுகள் (PWAs) ஆகியவற்றில் பயன்படுத்தப்படுகின்றன. "ஃபேவிகான் உருவாக்கி" கருவியானது, நீங்கள் வழங்கும் ஒரு படக் கோப்பை பல்வேறு சாதனங்கள் மற்றும் தளங்களுக்குப் பொருத்தமான ஐகான் தொகுப்பாக மாற்றுகிறது.
உள்ளீட்டுப் படத்திற்கான வழிகாட்டுதல்கள்
இந்தக் கருவியைப் பயன்படுத்த, நீங்கள் ஒரு PNG, JPG அல்லது SVG படக் கோப்பை உள்ளீடாக வழங்க வேண்டும். உள்ளீட்டுப் படத்தைக் கையாளும்போது பின்வரும் விதிகள் மற்றும் வரம்புகள் பொருந்தும்:
- கோப்பு அளவு வரம்பு: அதிகபட்சமாக 50 MB வரையிலான கோப்புகள் ஆதரிக்கப்படுகின்றன. இந்த வரம்பை மீறினால், "இந்தக் கோப்பு 50 MB-க்கு மேல் உள்ளது. சிறிய அளவிலான அசல் படத்தைப் பயன்படுத்தவும்." என்ற பிழை செய்தி காண்பிக்கப்படும்.
- ஆதரிக்கப்படும் வடிவங்கள்: PNG, JPG மற்றும் SVG கோப்புகள் மட்டுமே அனுமதிக்கப்படுகின்றன. பிற கோப்பு வடிவங்களை உள்ளீடு செய்ய முயன்றால், "PNG, JPG மற்றும் SVG படங்கள் மட்டுமே ஆதரிக்கப்படுகின்றன." என்ற பிழை செய்தி தோன்றும்.
- பரிமாணங்கள் (Dimensions): நீங்கள் ஏற்றும் படத்தின் அகலம் மற்றும் உயரத்தைக் கருவி கண்டறிந்து, "
{w}×{h}px" என்ற வடிவத்தில் காண்பிக்கும். - பரிந்துரைக்கப்படும் அளவு: ராஸ்டர் வடிவங்களான PNG அல்லது JPG கோப்புகளைப் பயன்படுத்தும்போது, குறைந்தபட்சம் 512 × 512 பிக்சல் அளவுள்ள படங்களைத் தேர்ந்தெடுப்பது நல்லது. சிறிய படங்களைப் பயன்படுத்தினால், "சிறிய அசல் படம் (
{w}×{h}px): பெரிய ஐகான்கள் மங்கலாகத் தோன்றலாம். சிறந்த முடிவுகளுக்கு 512 × 512 அல்லது அதற்கு மேல் — அல்லது ஒரு SVG — ஐப் பயன்படுத்தவும்." என்ற எச்சரிக்கை செய்தி காட்டப்படும். ஏனெனில், சிறிய படங்கள் பெரிய ஐகான் அளவுகளுக்காகப் பெரிதாக்கப்படும்போது அவற்றின் கூர்மைத்தன்மை குறைந்து மங்கலாகத் தோன்றும்.
சதுரமற்ற படங்களைக் கையாளுதல்
இணையதள ஐகான்கள் எப்போதும் சதுர வடிவிலேயே இருக்க வேண்டும். நீங்கள் உள்ளீடு செய்யும் படம் சதுர வடிவில் இல்லாத பட்சத்தில், அதைச் சதுரமாக மாற்ற இரண்டு விருப்பங்கள் வழங்கப்படுகின்றன:
- பொருத்து (இடைவெளியுடன்) (Fit - pad): இந்த விருப்பத்தைத் தேர்ந்தெடுக்கும்போது, முழுப் படமும் சுற்றிலும் இடைவெளியுடன் (padding) மையமாகத் தெரியும். படம் சிதைக்கப்படாமல் அதன் அசல் விகிதத்திலேயே இருக்கும்.
- நிரப்பு (கிராப்) (Fill - crop): இந்த விருப்பத்தைத் தேர்ந்தெடுக்கும்போது, படம் முழுச் சதுரப் பரப்பையும் நிரப்பும் வகையில் மாற்றியமைக்கப்படும், மேலும் சதுர எல்லைக்கு வெளியே நீட்டிக்கப்படும் விளிம்புகள் வெட்டப்படும்.
இயல்பாக, சதுரமற்ற படங்கள் சுற்றிலும் இடைவெளியுடன் மையப்படுத்தப்பட்டு வடிவமைக்கப்படுகின்றன.
பின்னணித் தேர்வு மற்றும் அதன் முக்கியத்துவம்
ஐகானின் பின்னணியை வடிவமைக்க இரண்டு முக்கிய விருப்பங்கள் உள்ளன:
- வெளிப்படையானது (Transparent): பின்னணி நிறம் ஏதுமின்றி ஐகான் உருவாக்கப்படும். உலாவி தாவல்களில் பயன்படுத்துவதற்கு வெளிப்படையான பின்னணி மிகவும் பொருத்தமானது.
- வண்ணம்: பயனர் விரும்பும் ஒரு குறிப்பிட்ட பின்னணி வண்ணத்தைத் தேர்ந்தெடுக்கலாம்.
ஐபோன் (iPhone) மற்றும் ஐபேட் (iPad) போன்ற iOS சாதனங்களின் முகப்புத் திரைகளில் ஐகான்களைப் பயன்படுத்தும்போது, வெளிப்படையான பகுதிகள் தானாகவே கருப்பு நிறமாக மாற்றப்படும். எனவே, மொபைல் சாதனங்களின் முகப்புத் திரை ஐகான்களுக்குப் பின்னணி வண்ணத்தை அமைப்பது பாதுகாப்பானது. இயல்பாக, இந்தக் கருவி வெளிப்படையான பின்னணியைக் கொண்டிருக்கும்.
உருவாக்கப்படும் கோப்புகளின் விவரங்கள்
படத்தைச் செயலாக்கிய பிறகு, "ZIP பதிவிறக்கு" பொத்தானை அழுத்தி முழு ஐகான் தொகுப்பையும் ஒரே கோப்பாகப் பதிவிறக்கலாம். இந்தத் தொகுப்பில் பின்வரும் கோப்புகள் அடங்கியிருக்கும்:
| கோப்பின் பெயர் | பிக்சல் அளவுகள் | பயன்பாடு / சாதனம் |
|---|---|---|
favicon.ico |
16, 32, 48 px | கிளாசிக் உலாவி தாவல் ஐகான் |
| PNG ஐகான்கள் | 16, 32 px | தாவல் ஐகான் (PNG) |
| PNG ஐகான் | 180 px | iPhone & iPad முகப்புத் திரை |
| PNG ஐகான்கள் | 192, 512 px | Android & நிறுவப்பட்ட இணையப் பயன்பாடுகள் (PWA) |
site.webmanifest |
- | பெரிய ஐகான்களைப் பட்டியலிடும் சிறிய உரை கோப்பு |
நீங்கள் உள்ளீடாக ஒரு SVG கோப்பை வழங்கியிருந்தால், அந்த அசல் வெக்டார் கோப்பும் ஐகான் பேக்கில் சேர்க்கப்படும். வெக்டார் கோப்புகள் எந்த அளவிலும் தங்களின் கூர்மைத்தன்மையை இழக்காமல் துல்லியமாகத் தோன்றும்.
இணையதளத்தில் நிறுவும் முறை
உருவாக்கப்பட்ட ஐகான்களை உங்கள் இணையதளத்தில் ஒருங்கிணைக்கப் பின்வரும் வழிமுறைகளைப் பின்பற்றவும்:
- பதிவிறக்கம் செய்யப்பட்ட ZIP கோப்பிலுள்ள அனைத்து ஐகான் கோப்புகளையும் உங்கள் இணையதளத்தின் ரூட் (root) கோப்புறையில் பதிவேற்றவும். இதனால்
favicon.icoகோப்பை/favicon.icoஎன்ற முகவரியில் அணுக முடியும். - கருவி வழங்கும் HTML குறியீட்டுப் பகுதியை நகலெடுத்து, உங்கள் இணையப் பக்கங்களின்
<head>பகுதிக்குள் ஒட்டவும்.
இந்தக் குறியீடு உலாவிகளுக்கு ஐகான்களின் இருப்பிடத்தைக் காட்டுகிறது, இதனால் சாதனங்கள் தங்களுக்குத் தேவையான பொருத்தமான அளவிலான ஐகானைத் தாங்களாகவே தேர்ந்தெடுத்துக் கொள்ளும்.
தரவுப் பாதுகாப்பு மற்றும் செயலாக்கம்
இந்தக் கருவியைப் பயன்படுத்தும்போது உங்கள் தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. நீங்கள் உள்ளீடு செய்யும் படம் எந்தவொரு வெளிப்புறச் சேவையகத்திற்கும் அல்லது BroBroGo-விற்கும் பதிவேற்றப்படுவதில்லை. அனைத்துப் பட மாற்றங்களும் கோப்பு உருவாக்கங்களும் நேரடியாக உங்கள் உலாவியிலேயே நிகழ்கின்றன.
பிழைகாணல் மற்றும் எச்சரிக்கைகள்
செயலாக்கத்தின்போது ஏதேனும் சிக்கல் ஏற்பட்டால் பின்வரும் பிழைச் செய்திகள் தோன்றக்கூடும்:
- கோப்புத் தேர்வு செய்யாதபோது: "முதலில் ஒரு PNG, JPG அல்லது SVG படத்தைத் தேர்ந்தெடுக்கவும்."
- சிதைந்த கோப்புகள்: "இந்தக் கோப்பை ஒரு படமாகத் திறக்க முடியவில்லை. இது சிதைந்திருக்கலாம், காலியாக இருக்கலாம் அல்லது உண்மையான படமாக இல்லாமல் இருக்கலாம்."
- தவறான SVG கோப்பு: "இந்த SVG கோப்பை வாசிக்க முடியவில்லை. கோப்பு செல்லுபடியாகும் SVG ஆவணம் தானா என்பதைச் சரிபார்க்கவும்."
- பொதுவான தோல்வி: "உருவாக்குதல் தோல்வியடைந்தது. வேறு படத்தை முயற்சிக்கவும்."
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
ஐகான் பேக்கில் என்னென்ன கோப்புகள் உள்ளன?
16, 32 மற்றும் 48 பிக்சல் பதிப்புகளைக் கொண்ட favicon.ico, 16, 32, 180, 192 மற்றும் 512 பிக்சல்களில் PNG ஐகான்கள் மற்றும் பெரிய ஐகான்களைப் பட்டியலிடும் site.webmanifest கோப்பு. நீங்கள் SVG கோப்பிலிருந்து தொடங்கினால், வெக்டாரும் சேர்க்கப்படும். இவை அனைத்தும் ஒரே ZIP கோப்பில் இருக்கும்.
எனது அசல் படம் என்ன அளவில் இருக்க வேண்டும்?
ஒரு SVG கோப்பு மிகவும் சிறந்தது — ஒவ்வொரு ஐகானும் வெக்டாரிலிருந்து வரையப்படுவதால், 16 பிக்சல்கள் கூட கூர்மையாக இருக்கும். PNG அல்லது JPG எனில், குறைந்தபட்சம் 512 × 512 பிக்சலில் தொடங்குங்கள்; சிறிய படங்கள் பெரிதாக்கப்படும்போது மங்கலாகத் தோன்றலாம்.
பின்னணி வெளிப்படையானதாக இருக்க வேண்டுமா அல்லது வண்ணமாக இருக்க வேண்டுமா?
உலாவி தாவல் ஐகான்கள் வெளிப்படையான பின்னணியுடன் நன்றாக இருக்கும். இருப்பினும், iPhone மற்றும் iPad முகப்புத் திரைகள் வெளிப்படையான பகுதிகளைக் கருப்பாகக் காட்டும் — பயனர்கள் உங்கள் தளத்தை முகப்புத் திரையில் சேர்க்கக்கூடும் எனில், பின்னணி வண்ணத்தைத் தேர்ந்தெடுக்கவும்.
சதுரமாக இல்லாத படத்திற்கு என்ன நடக்கும்?
ஐகான்கள் சதுர வடிவிலானவை, ஆனால் உங்கள் படம் ஒருபோதும் இழுக்கப்படாது. இயல்பாக இது சுற்றிலும் இடைவெளியுடன் (padding) மையப்படுத்தப்படும்; நீண்ட விளிம்புகளை வெட்ட "நிரப்பு (கிராப்)" (Fill) விருப்பத்திற்கு மாறலாம்.
கோப்புகள் எனது தளத்தில் எங்கு செல்ல வேண்டும்?
அவற்றை உங்கள் தளத்தின் ரூட் (root) கோப்புறையில் பதிவேற்றவும், இதனால் favicon.ico கோப்பை /favicon.ico என அணுக முடியும். பின்னர் உருவாக்கப்பட்ட வரிகளை உங்கள் பக்கங்களின் பகுதியில் ஒட்டவும். உலாவிகள் பொருத்தமான அளவைத் தாங்களாகவே தேர்ந்தெடுத்துக் கொள்ளும்.