ஃபேவிகான் UX: சிறந்த ஃபேவிகானை உருவாக்குவது எது

சிறந்த ஃபேவிகான் என்பது எளிமையான, அதிக கான்ட்ராஸ்ட் கொண்ட குறியீடு. பொதுவாக அது உங்கள் லோகோமார்க் அல்லது ஒன்று இரண்டு எழுத்துகளாக இருக்கும். ஒளி மற்றும் இருண்ட உலாவி டேப்கள் இரண்டிலும் 16x16 பிக்சலில் படிக்கும்படி இருக்கும், உங்கள் பிராண்டுடன் பொருந்தும், அரிதாகவே மாறும். இந்த வழிகாட்டியில் உள்ள மற்ற அனைத்தும் (பிக்சல் சீரமைப்பு, நிறம், பேடிங், ஊடுருவும் தன்மை, கோப்பு அளவு) இந்த இலக்குகளுக்காகவே: திறந்திருக்கும் பல டேப்களுக்கு நடுவே உங்கள் தளத்தை உடனே கண்டுபிடிக்க வைப்பது.

ஃபேவிகான் மிகச் சிறியது, ஆனால் பல இடங்களில் தோன்றும்: உலாவி டேப்கள், புக்மார்க் பட்டைகள், வரலாற்றுப் பட்டியல்கள், டேப்-தேடல் மெனு, மொபைல் மற்றும் டெஸ்க்டாப்பில் Google தேடல் முடிவுகள், தொலைபேசி முகப்புத் திரைகள். பல டேப்களைத் திறந்து வைத்திருக்கும் பயனர்களுக்கு, தலைப்பு பெரும்பாலும் முழுவதும் வெட்டப்பட்டுவிடும்; ஐகான் மட்டுமே எஞ்சியிருக்கும் அடையாளம். எனவே இது அலங்காரம் அல்ல, உண்மையான வழிசெலுத்தல் கூறு.

1. 16x16 அளவில் தெளிவு

பாரம்பரிய ஃபேவிகான் அளவு 16x16 CSS பிக்சல்கள். சாதாரணத் திரையில் அது நேரடியாக 256 பிக்சல்கள்; 2x ரெட்டினா திரையில் அதே இடத்துக்கு உலாவி வழக்கமாக 32x32 படத்தைத் தேர்ந்தெடுக்கும். நீங்கள் வடிவமைப்பது எதுவாக இருந்தாலும் இந்தச் சுருக்கத்தைத் தாங்க வேண்டும்.

எளிமையாக வைத்திருங்கள்

• ஒரு வடிவம் அல்லது ஒன்று இரண்டு எழுத்துகள். ஒரு தடித்த எழுத்து, சின்னத்துடன் கூடிய வட்டம் அல்லது எளிய வடிவியல் குறியீடு சரியாக வேலை செய்யும். மூன்று எழுத்துகள் அல்லது ஒரு சொல் வெறும் இரைச்சலாக மாறிவிடும்.
• ஒரே மையப்புள்ளி. ஐகானை ஐந்து சொற்களில் விவரிக்க முடியாவிட்டால், அது மிகவும் சிக்கலானது.
• கிரேடியன்ட், நிழல், நுண்ணிய அமைப்புகள் வேண்டாம். சிறிய அளவுகளில் அவை மங்கலான கறைகளாகிவிடும்.

பிக்சல் கட்டத்துடன் சீரமையுங்கள்

16x16 அளவில், கட்டத்திலிருந்து அரை பிக்சல் விலகியிருக்கும் கோடு இரண்டு வரிசை பிக்சல்களில் ஆன்டி-அலியாஸ் ஆகி சாம்பல் நிறத்தில் மென்மையாகத் தெரியும். விளிம்புகளை முழு பிக்சல் எல்லைகளில் வையுங்கள்; வடிவம் சமச்சீராக இருந்தால் இரட்டைப்படை அகலங்களைப் பயன்படுத்துங்கள். வெக்டர் கருவியிலிருந்து ஏற்றுமதி செய்தால், பிக்சல் ஸ்னாப்பிங்கை இயக்குங்கள்; அல்லது சுருக்கப்பட்ட முடிவைச் சரிபார்த்து கையால் சரிசெய்யுங்கள்.

மெல்லிய கோடுகளைத் தவிருங்கள்

16x16 அளவில் 2 பிக்சலுக்கும் குறைவான கோடுகள் (ஐகான் அகலத்தில் சுமார் 12 சதவீதம்) மறைந்துவிடும் அல்லது அளவுகளுக்கு இடையே ஒளிரும். கோடுகளைத் தடிமனாக்குங்கள், உள் விவரங்களை நீக்குங்கள், சிறிய இடைவெளிகளை இணையுங்கள். விரிவான லோகோவின் நுணுக்கமான சிறிய வடிவத்தை விட, தடித்த, சற்று கனமான எழுத்து வடிவம் பொதுவாக நன்றாகப் படிக்கப்படும்.

கையால் ஹிண்டிங் செய்யுங்கள்

ICO மற்றும் PNG கோப்புகளில் எழுத்துரு பாணி ஹிண்டிங் இல்லை; எனவே கைமுறை பிக்சல் திருத்தமே அதற்கு இணை: வளைவுகள், மூலைவிட்டங்கள், கவுண்டர்கள் ("a" அல்லது "e" போன்ற எழுத்துகளில் உள்ள துளைகள்) தெளிவாக இருக்க தனிப்பட்ட பிக்சல்களை நீங்கள் சரிசெய்கிறீர்கள். தானியங்கி சுருக்கம் நல்ல முதல் வரைவு, ஆனால் கையால் வைக்கப்படும் சில பிக்சல்கள் ஒரு கறைக்கும் அடையாளம் காணக்கூடிய எழுத்துக்கும் இடையிலான வேறுபாட்டை உருவாக்கும். MakeFav பிக்சல் எடிட்டர் இதற்காகவே உருவாக்கப்பட்டது: 16x16 கேன்வாஸைத் திறந்து, சிக்கலான பிக்சல்களைத் திருத்தி, ஏற்றுமதி செய்யுங்கள்.

2. ஒளி மற்றும் இருண்ட டேப்களில் கான்ட்ராஸ்ட்

உலாவிகள் இப்போது பொதுவாக டார்க் மோடில் இயங்குகின்றன; பல பயனர்களின் டேப் பட்டை பக்கத்தின் தீமிலிருந்து வேறுபட்டிருக்கும். ஊடுருவும் பின்னணியுடன் கூடிய அடர் நேவி ஐகான் வெள்ளை டேப்பில் சரியாகத் தெரியும், ஆனால் அடர் சாம்பல் டேப்பில் கிட்டத்தட்ட தெரியாமல் போகலாம். எப்போதும் இரண்டையும் சோதியுங்கள்.

நடைமுறைத் தீர்வுகள்

• பின்னணி வடிவத்தைச் சேருங்கள். பிராண்ட் நிறத்தில் திடமான வட்டமான சதுரம் அல்லது வட்டம், டேப் எதுவாக இருந்தாலும் குறியீட்டுக்குத் தனக்கே உரிய கான்ட்ராஸ்டை உறுதி செய்கிறது.
• மெல்லிய அவுட்லைன் அல்லது ஒளிவட்டம் பயன்படுத்துங்கள். அடர் எழுத்து வடிவத்தைச் சுற்றி 1px இலகுவான விளிம்பு (அல்லது நேர்மாறாக) எந்தத் தீமிலும் வடிவம் தெரியும்படி வைக்கும்; ஆனால் 16x16 அளவில் அது தெளிவாக இருக்க வேண்டும், எனவே சோதியுங்கள்.
• நடுத்தர டோன் பிராண்ட் நிறங்களைத் தேர்ந்தெடுங்கள். அடர் நீலம், ஆரஞ்சு, பச்சை அல்லது மஜென்டா போன்ற நிறங்கள் பொதுவாக வெள்ளை மற்றும் கிட்டத்தட்ட கருப்பு பரப்புகள் இரண்டிலும் வேலை செய்யும். மிக இலகுவான மஞ்சள் அல்லது மிக அடர் நேவி ஆபத்தானவை.
• தகவமைக்கும் SVG ஃபேவிகானைப் பயன்படுத்துங்கள். SVG-யில் prefers-color-scheme மீடியா வினவலைச் சேர்க்கலாம்; அப்போது கணினித் தீமுக்கு ஏற்ப ஐகான் மாறும்.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

மீடியா வினவல் இயக்க முறைமை அல்லது உலாவியின் தீமைப் பிரதிபலிக்கிறது; டேப் பட்டை பொதுவாக அதையே பின்பற்றும், ஆனால் எப்போதும் அல்ல என்பதைக் கவனியுங்கள். SVG ஃபேவிகான்களுக்கான ஆதரவும் மாறுபடும்: Chrome மற்றும் Firefox அவற்றைக் கையாளும், Safari வரலாற்று ரீதியாகப் பின்தங்கியுள்ளது; எனவே எப்போதும் PNG அல்லது ICO மாற்று வழிகளை வைத்திருங்கள். திடமான பின்னணி வடிவமைப்பு மிகவும் உறுதியான தேர்வு, ஏனெனில் அதற்குத் தீம் தர்க்கமே தேவையில்லை.

3. அடையாளம் காணும் தன்மை மற்றும் பிராண்ட் ஒருமைப்பாடு

வார்த்தைக்குறியுடன் கூடிய முழு லோகோ அமைப்பை அல்ல, லோகோமார்க்கை (சின்னம் அல்லது மோனோகிராம்) பயன்படுத்துங்கள். 16x16 ஐகானுக்குள் உள்ள எழுத்து படிக்க முடியாது; அகலமான கிடைமட்ட லோகோவைச் சதுரத்துக்குள் சுருக்கினால் நடுவில் ஒரு சிறிய கீற்று மட்டுமே மிஞ்சும்.

• உங்கள் பிராண்டுக்குச் சின்னம் இருந்தால், அதை வெறுமனே சிறிதாக்காமல் சிறிய அளவுகளுக்கு எளிமைப்படுத்துங்கள். குறைந்த விவரங்களுடன் "ஃபேவிகான் பதிப்பு" வைத்திருப்பது நிலையான நடைமுறை.
• உங்கள் பிராண்ட் வார்த்தைக்குறி மட்டுமே என்றால், முதல் எழுத்து அல்லது தனித்துவமான இரு எழுத்துகளை எடுத்து, பிராண்ட் எழுத்துருவில் கனமான எடையில் அமையுங்கள்.
• லோகோ, செயலி ஐகான், சமூக ஊடக அவதார்களுடன் நிறங்களைச் சீராக வைத்திருங்கள்; அப்போது பயனர் எல்லா இடங்களிலும் அதே பிராண்டை அடையாளம் காண்பார்.

நம்பகத்தன்மையைப் போலவே தனித்துவமும் முக்கியம். டேப்களின் வரிசையைப் பாருங்கள்: வேறு மூன்று தளங்களும் நீல வட்டத்தைப் பயன்படுத்தினால், உங்களுடையது தனித்து நிற்காது. முழுமையான சுருக்கத்தை விட வித்தியாசமான வடிவம் அல்லது நிறம் அதிகப் பயனுள்ளது.

4. நிறம்: வரையறுக்கப்பட்ட, செறிவான வண்ணத் தொகுப்பு

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

அணுகல்தன்மைச் சிந்தனையிலிருந்து சிறிது கடன் வாங்குங்கள். அர்த்தமுள்ள கிராஃபிக் பொருள்களுக்கு குறைந்தது 3:1 கான்ட்ராஸ்டை WCAG கோருகிறது (வெற்றி அளவுகோல் 1.4.11, உரையற்ற கான்ட்ராஸ்ட்). ஃபேவிகான் பக்க உள்ளடக்கம் அல்ல, உலாவியின் சட்டகப் பகுதி என்பதால் அது முறைப்படி இதில் அடங்காது; ஆனால் எழுத்து வடிவத்துக்கும் அதன் பின்னணிக்கும், ஐகானுக்கும் டேப்புக்கும் இடையே 3:1 என்பது சரியான இலக்கு. மேலும், நிறத்தின் மூலம் மட்டும் எதையும் தெரிவிக்க வேண்டாம்: ஒரே ஐகானின் சிவப்பு மற்றும் பச்சை வகைகளை பல நிறக்குருடு பயனர்களால் வேறுபடுத்த முடியாது; எனவே வடிவத்தை மாற்றுங்கள் அல்லது சின்னத்தைச் சேருங்கள்.

5. வடிவம், பேடிங் மற்றும் பாதுகாப்பு மண்டலங்கள்

சதுரத்தை நிரப்புங்கள்

உலாவி டேப்கள் ஃபேவிகானை நிலையான சிறிய அளவில் காட்டுகின்றன; எனவே கூடுதல் ஓரம் உங்கள் குறியீட்டைச் சிறிதாக்கவே செய்யும். நிலையான டேப் ஐகான்களுக்கு, கேன்வாஸின் பெரும்பகுதியைப் பயன்படுத்தி, ஒன்று இரண்டு பிக்சல் மட்டும் இடைவெளி விடுங்கள்; அப்போது குறியீடு முடிந்தவரை பெரிதாக இருக்கும்.

வட்டமா, சதுரமா?

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

Apple touch ஐகான்கள்

iOS தனது சொந்த வட்டமான மூலைகளை apple-touch-icon-இல் சேர்க்கும் (வழக்கமான அளவு 180x180). ஏற்கனவே வட்டமாக்கப்பட்ட மூலைகள் இல்லாத முழு-விளிம்புச் சதுரத்தை வழங்குங்கள்; இல்லையெனில் மூலைகளில் தெரியும் கருப்பு அல்லது வெள்ளைக் கீற்றுகள் வரலாம்.

Android மற்றும் PWA-களுக்கான மாஸ்கபிள் ஐகான்கள்

மாஸ்கபிள் ஐகான்களை இயக்க முறைமை வட்டங்கள், ஸ்குவிர்கிள்கள் அல்லது பிற வடிவங்களாக வெட்டும். எல்லா முக்கிய உள்ளடக்கத்தையும் பாதுகாப்பு மண்டலத்துக்குள் வையுங்கள்: ஐகானின் மையத்தில், ஐகான் அகலத்தின் 40 சதவீத ஆரம் கொண்ட வட்டம். எந்த மாஸ்க் வந்தாலும் சரியாகத் தெரிய, பின்னணி நிறத்தை விளிம்புகள் வரை நீட்டுங்கள். விளிம்பு வரை நிரம்பிய இறுக்கமான டேப் ஃபேவிகானை மாஸ்கபிள் ஐகானாக மீண்டும் பயன்படுத்த வேண்டாம்; மாஸ்க் அதை வெட்டிவிடும்.

6. ஊடுருவும் தன்மை (Transparency)

டேப் ஃபேவிகான்களுக்கு ஊடுருவும் தன்மை சரியானது; எழுத்து வடிவம் மட்டுமே கொண்ட ஐகான் எந்த டேப் நிறத்திலும் தூய்மையாக அமர அதுவே உதவுகிறது. ஆனால் Apple touch ஐகான்களுக்கு இது சிக்கல்: iOS ஊடுருவும் பகுதிகளைத் திடமான நிறத்தால் (பொதுவாக கருப்பு) நிரப்பும்; அது வடிவமைப்பைக் கெடுக்கலாம். apple-touch-icon-க்கு எப்போதும் உங்கள் பிராண்ட் நிறத்தில் ஊடுருவாத பின்னணி கொடுங்கள். மாஸ்கபிள் ஐகான்களுக்கும் பெரும்பாலான Android முகப்புத் திரைப் பயன்பாடுகளுக்கும் இது பொருந்தும்; அங்கே ஊடுருவாத பின்னணி முன்கணிக்கக்கூடிய முடிவுகளைத் தரும்.

7. நிலைத்தன்மை: அடிக்கடி மாற்ற வேண்டாம்

மீண்டும் மீண்டும் காணப்படுவதன் மூலம் ஃபேவிகான் அடையாளத்தை உருவாக்குகிறது. அடிக்கடி மாற்றினால் எந்த டேப் உங்களுடையது என்பதைப் பயனர்கள் மீண்டும் கற்க வேண்டியிருக்கும்; தொழில்நுட்பத் தலைவலிகளும் ஏற்படும். உலாவிகள் ஃபேவிகான்களை தீவிரமாக கேஷ் செய்கின்றன; Google அவற்றை உங்கள் பக்கங்களிலிருந்து தனியாகப் பெற்று சேமிக்கிறது; எனவே புதிய ஐகான் தேடல் முடிவுகளில் தோன்ற நாட்கள் அல்லது வாரங்கள் ஆகலாம். நிலையான ஃபேவிகான் URL, 48 பிக்சலின் மடங்கான அளவு கொண்ட ஐகான் (48x48, 96x96 மற்றும் பல), கிராலிங் செய்யக்கூடிய கோப்பு (robots.txt-ஆல் தடுக்கப்படாதது) ஆகியவற்றையும் Google கோருகிறது. ஃபேவிகான் மாற்றத்தை பருவகால அலங்காரமாக அல்ல, மறுபிராண்டிங் அளவிலான முடிவாகக் கருதுங்கள்.

8. அறிவிப்பு நிலைகள் மற்றும் மாறும் ஃபேவிகான்கள்

படிக்காத செய்திகள், பதிவு நிலை அல்லது பிழையைக் குறிக்க சில வலைச் செயலிகள் ஃபேவிகானை மாற்றுகின்றன. நன்றாகச் செய்தால் உதவியாக இருக்கும்; அளவுக்கு மீறினால் எரிச்சலூட்டும்.

• சிறிய பேட்ஜைப் பயன்படுத்துங்கள் (புள்ளி அல்லது குறுகிய எண்ணிக்கை); ஒரு மூலையில் வையுங்கள், முழு மறுவடிவமைப்பு வேண்டாம். அடிப்படை ஐகான் அடையாளம் காணக்கூடியதாகவே இருக்க வேண்டும்.
• குறைவாகப் பயன்படுத்துங்கள். பயனர் செயல் தேவைப்படும் நிகழ்வுகளுக்கு மட்டும் பேட்ஜ்களை ஒதுக்குங்கள். ஐகானைத் தொடர்ந்து அனிமேட் செய்யாதீர்கள்.
• எண்களுக்கு வரம்பு வையுங்கள். 16x16 அளவில் ஒன்று அல்லது இரண்டு இலக்கங்களே படிக்க முடியும்; "137" என்பதற்குப் பதிலாக "9+" அல்லது எளிய புள்ளியைக் காட்டுங்கள்.
• உடனே மீட்டமையுங்கள். பயனர் அந்த உருப்படியைக் கையாண்டவுடன் இயல்புநிலை ஐகானை மீட்டெடுங்கள்.
• நிறத்தை மட்டும் நம்ப வேண்டாம். சிவப்புப் புள்ளியை "(3) இன்பாக்ஸ்" போன்ற பக்கத் தலைப்பும் ஆதரிக்க வேண்டும்; அப்போது தகவல் அனைவருக்கும் கிடைக்கும்.

மாறும் ஃபேவிகான்கள் பொதுவாக கேன்வாஸில் வரையப்பட்டு, ஐகான் link உறுப்பின் href மதிப்பைப் புதுப்பிப்பதன் மூலம் மாற்றப்படும். புதுப்பிப்புகளைக் கட்டுப்படுத்துங்கள்; ஏனெனில் ஃபேவிகானை தொடர்ந்து மாற்றுவது CPU-வைப் பயன்படுத்தும், பயனர்களையும் திசைதிருப்பும்.

9. செயல்திறன்

ஃபேவிகான்கள் சிறியவை, ஆனால் அவையும் மோசமாகச் செய்யப்படக்கூடிய கோரிக்கைகளே.

• கோப்புகளைச் சிறியதாக வைத்திருங்கள். PNG ஃபேவிகான் பொதுவாக சில நூறு பைட்டுகள் முதல் சில கிலோபைட்டுகள் வரை இருக்கும். எளிய SVG 1 KB-க்கும் குறைவாக இருக்கலாம்.
• வீங்கிய ICO கோப்புகளைத் தவிருங்கள். 16, 32, 48 பிக்சல் படங்களுடன் கூடிய பல-அளவு ICO போதுமானது. 256x256 படத்தை உட்பொதித்தால் கோப்பு அளவு பன்மடங்காகும்; உலாவி டேப்களில் தெரியும் பலன் இல்லை.
• கேஷிங் தலைப்புகளை அமையுங்கள். ஐகான்களை நீண்ட Cache-Control காலத்துடன் வழங்குங்கள், உதாரணமாக public, max-age=31536000, immutable; அவற்றை மாற்றும்போது பதிப்புடன் கூடிய அல்லது ஹாஷ் செய்யப்பட்ட கோப்புப் பெயரைப் பயன்படுத்துங்கள்.
• ஐகான்களை வெளிப்படையாக அறிவியுங்கள். உலாவிகள் இயல்பாக /favicon.ico-ஐக் கோருகின்றன; எனவே வேறு ஐகான்களை அறிவித்தாலும் ஒன்றை வழங்குங்கள்; உங்கள் பதிவுகளில் 404 இரைச்சலைத் தவிர்க்கலாம்.
• சுருக்குங்கள். PNG-களை இழப்பற்ற ஆப்டிமைசர் வழியாக இயக்குங்கள்; SVG-களை minify செய்யுங்கள்.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

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

10. அணுகல்தன்மை

ஃபேவிகானுக்கு alt உரை இல்லை; திரை வாசிப்பான்களும் அதை அறிவிப்பதில்லை; எனவே alt பண்புக்கூறுகள் போன்ற பாரம்பரிய அணுகல்தன்மைக் கருவிகள் பொருந்தாது. முக்கியமானவை:

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

ஃபேவிகான் UX சரிபார்ப்புப் பட்டியல்

சோதனைச் சரிபார்ப்புப் பட்டியல்

உங்கள் வடிவமைப்புக் கருவியில் உள்ள பெரிய முன்னோட்டத்தை நம்ப வேண்டாம். உண்மையான ஐகானை உண்மையான சூழலில் சோதியுங்கள்:

1. பல உலாவிகள். Chrome, Firefox, Safari, Edge ஆகியவற்றைச் சரிபாருங்கள்; ஒவ்வொன்றும் ஐகான்களையும் அளவுகளையும் சற்று வேறுபட்ட முறையில் தேர்ந்தெடுக்கும்.
2. ஒளி மற்றும் இருண்ட மோட். OS மற்றும் உலாவித் தீமை மாற்றி, ஒவ்வொரு முறையும் டேப் பட்டையைப் பாருங்கள்.
3. ரெட்டினா மற்றும் சாதாரணத் திரைகள். 1x மானிட்டரிலும் 2x அல்லது 3x திரையிலும் சரிபார்த்து, உலாவியில் ஜூம் செய்து பாருங்கள்.
4. புக்மார்க் பட்டை. பக்கத்தை புக்மார்க் செய்து, மற்ற தளங்களுக்கு அருகில் ஐகான் இன்னும் தெளிவாக உள்ளதா என்று பாருங்கள்.
5. பல டேப்கள். 20 டேப்களைத் திறந்து, உங்களுடையதை ஒரே பார்வையில் கண்டுபிடிக்க முடிகிறதா என்று பாருங்கள்.
6. Google SERP முன்னோட்டம். ஐகான் மீண்டும் கிராலிங் செய்யப்பட்ட பிறகு மொபைல் தேடல் முடிவைச் சரிபாருங்கள். புதுப்பிக்க நேரம் ஆகலாம் என்பதை நினைவில் கொள்ளுங்கள்.
7. முகப்புத் திரை. தளத்தை iOS மற்றும் Android முகப்புத் திரைகளில் சேர்த்து, ஐகான் வெட்டப்படவில்லை, கருப்பு மூலைகள் இல்லை, மாஸ்க்குக்குள் மிகச் சிறியதாக இல்லை என்பதை உறுதிசெய்யுங்கள்.
8. தொழில்நுட்பச் சரிபார்ப்பு. கோப்புகள் உள்ளன, 200 நிலையைத் தருகின்றன, சரியான அளவுகளைக் கொண்டுள்ளன, உங்கள் HTML-இல் சரியாக அறிவிக்கப்பட்டுள்ளன என்பதை உறுதிசெய்ய உங்கள் டொமைனை MakeFav ஃபேவிகான் செக்கர் வழியாக இயக்குங்கள்.

நடைமுறைப் பணிப்பாய்வு

1. உங்கள் லோகோமார்க்கிலிருந்து தொடங்கி, அதை ஒரு வடிவம் அல்லது எழுத்தாக எளிமைப்படுத்துங்கள்.
2. இரு தீம்களிலும் வேலை செய்யும் திடமான அல்லது வடிவமுள்ள பின்னணியுடன் சதுரக் கேன்வாஸை உருவாக்குங்கள்.
3. 32x32 மற்றும் 16x16 அளவுகளை ஏற்றுமதி செய்து, சிறிய பதிப்பை பிக்சல் எடிட்டரில் கையால் செம்மைப்படுத்துங்கள்.
4. முழுத் தொகுப்பையும் (ICO, PNG, apple-touch-icon, மேனிஃபெஸ்ட் ஐகான்கள்) ஜெனரேட்டர் மூலம் உருவாக்குங்கள்.
5. link குறிச்சொற்களைச் சேர்த்து, கேஷ் தலைப்புகளை அமைத்து, வெளியிட்டு, செக்கர் மூலம் சரிபாருங்கள்.

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

அடிக்கடி கேட்கப்படும் கேள்விகள்

ஃபேவிகானின் அளவு என்னவாக இருக்க வேண்டும்?

உலாவி டேப்களுக்கு 16x16 மற்றும் 32x32 அளவில் வடிவமைக்கவும் (அதிக அடர்த்தித் திரைகளில் உலாவி 32x32-ஐப் பயன்படுத்தும்); iOS-க்கு 180x180 apple-touch-icon-ஐயும், Android மற்றும் PWA-களுக்கு 192x192 மற்றும் 512x512 PNG-களையும் வழங்கவும். Google தேடல் முடிவுகளுக்கு, 48x48 அல்லது 96x96 போல 48 பிக்சலின் மடங்கான அளவு கொண்ட சதுர ஐகானைப் பயன்படுத்தவும். SVG மூலம் இவை அனைத்துக்கும் அளவுமாற்றம் செய்யலாம்.

என் முழு லோகோவை ஃபேவிகானாகப் பயன்படுத்தலாமா?

பொதுவாக கூடாது. வார்த்தைக்குறியுடன் கூடிய முழு லோகோக்கள் சதுர 16x16 ஐகானுக்கு மிக விரிவானவை, மிக அகலமானவை. லோகோமார்க் அல்லது ஒன்று இரண்டு எழுத்துகள் கொண்ட மோனோகிராமைப் பயன்படுத்தி, மிகச் சிறியதாக இருக்கும்போதும் அடையாளம் காணக்கூடியதாக அதை எளிமைப்படுத்துங்கள்.

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

மிகப் பாதுகாப்பான வழி, டேப் நிறத்தைச் சார்ந்திருக்காமல் இருக்க ஐகானுக்குத் தனது சொந்தத் திடமான பின்னணி வடிவம் அல்லது மாறுபட்ட அவுட்லைன் கொடுப்பது. மாற்றாக, நிறங்களை மாற்ற prefers-color-scheme மீடியா வினவலுடன் கூடிய SVG ஃபேவிகானைப் பயன்படுத்தி, SVG ஐகான்களை ஆதரிக்காத உலாவிகளுக்கு PNG அல்லது ICO மாற்றுகளை வைத்திருங்கள். எப்போதும் ஒளி மற்றும் இருண்ட தீம்கள் இரண்டிலும் சோதியுங்கள்.

என் புதிய ஃபேவிகான் ஏன் தெரியவில்லை?

உலாவிகள் ஃபேவிகான்களை நீண்ட நேரம் கேஷ் செய்கின்றன; Google தனது சொந்த நகலைச் சேமித்துத் தன் அட்டவணைப்படி புதுப்பிக்கும், அதற்கு பெரும்பாலும் நாட்கள் அல்லது வாரங்கள் ஆகும். பக்கத்தை ஹார்ட்-ரிஃப்ரெஷ் செய்யுங்கள், உலாவி கேஷை அழியுங்கள், புதிய பதிப்புக் கோப்புப் பெயரைப் பயன்படுத்துங்கள், link குறிச்சொற்களும் ரூட் /favicon.ico-வும் சரியான கோப்பைச் சுட்டுகின்றனவா என்பதை உறுதிசெய்யுங்கள். MakeFav செக்கர் மூலம் அமைப்பைச் சரிபார்க்கலாம்.

ஃபேவிகானில் அறிவிப்புப் பேட்ஜ்களைக் காட்டுவது நல்ல யோசனையா?

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