ఫేవికాన్ 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 టచ్ ఐకాన్‌లు

iOS apple-touch-icon‌కు తన సొంత గుండ్రని మూలలను జోడిస్తుంది (180x180 సాధారణ పరిమాణం). ముందే గుండ్రం చేసిన మూలలు లేని ఫుల్-బ్లీడ్ చతురస్రాన్ని ఇవ్వండి, లేకపోతే మూలల్లో కనిపించే ముదురు లేదా తెల్లని సన్నని ముక్కలు వచ్చే అవకాశం ఉంది.

Android మరియు PWAల కోసం మాస్కబుల్ ఐకాన్‌లు

మాస్కబుల్ ఐకాన్‌లను ఆపరేటింగ్ సిస్టమ్ వృత్తాలుగా, స్క్విర్కిల్‌లుగా లేదా ఇతర ఆకారాలుగా క్రాప్ చేస్తుంది. ముఖ్యమైన కంటెంట్ అంతటినీ సేఫ్ జోన్‌లో ఉంచండి: ఐకాన్ మధ్యలో, ఐకాన్ వెడల్పులో 40 శాతం వ్యాసార్థంతో ఉన్న వృత్తం. ఏ మాస్క్ అయినా సరిగ్గా కనిపించేలా నేపథ్య రంగును అంచుల వరకు విస్తరించండి. అంచు నుండి అంచు వరకు ఉన్న ట్యాబ్ ఫేవికాన్‌ను మాస్కబుల్ ఐకాన్‌గా తిరిగి ఉపయోగించవద్దు, ఎందుకంటే మాస్క్ దాన్ని కత్తిరిస్తుంది.

6. పారదర్శకత

ట్యాబ్ ఫేవికాన్‌లకు పారదర్శకత సరైనదే, గ్లిఫ్-మాత్రమే ఐకాన్ ఏ ట్యాబ్ రంగుపైనైనా శుభ్రంగా కూర్చునేలా చేసేది అదే. Apple టచ్ ఐకాన్‌లకు ఇది సమస్య: iOS పారదర్శక ప్రాంతాలను ఘన రంగుతో (సాధారణంగా నలుపు) నింపుతుంది, ఇది డిజైన్‌ను పాడు చేయగలదు. apple-touch-icon‌కు ఎల్లప్పుడూ మీ బ్రాండ్ రంగులో అపారదర్శక నేపథ్యం ఇవ్వండి. మాస్కబుల్ ఐకాన్‌లకు మరియు చాలా Android హోమ్-స్క్రీన్ వినియోగాలకు కూడా ఇదే వర్తిస్తుంది, ఎందుకంటే అపారదర్శక నేపథ్యం ఊహించదగిన ఫలితాలను ఇస్తుంది.

7. స్థిరత్వం: తరచుగా మార్చవద్దు

ఫేవికాన్ పునరావృతం ద్వారా గుర్తింపును నిర్మిస్తుంది. దాన్ని తరచుగా మారిస్తే, ఏ ట్యాబ్ మీదో వినియోగదారులు మళ్లీ నేర్చుకోవాల్సి వస్తుంది, సాంకేతిక తలనొప్పులు కూడా వస్తాయి. బ్రౌజర్లు ఫేవికాన్‌లను గట్టిగా కాష్ చేస్తాయి, Google వాటిని మీ పేజీల నుండి వేరుగా తెచ్చి నిల్వ చేస్తుంది, కాబట్టి కొత్త ఐకాన్ సెర్చ్ ఫలితాల్లో కనిపించడానికి రోజులు లేదా వారాలు పట్టవచ్చు. Google స్థిరమైన ఫేవికాన్ URLను, పరిమాణం 48 పిక్సెల్స్ గుణిజంగా ఉన్న ఐకాన్‌ను (48x48, 96x96 మొదలైనవి), క్రాల్ చేయగల ఫైల్‌ను (robots.txt ద్వారా నిరోధించబడనిది) కూడా కోరుతుంది. ఫేవికాన్ మార్పును రీబ్రాండ్ స్థాయి నిర్ణయంగా పరిగణించండి, సీజనల్ అలంకరణగా కాదు.

8. నోటిఫికేషన్ స్థితులు మరియు డైనమిక్ ఫేవికాన్‌లు

కొన్ని వెబ్ యాప్‌లు చదవని సందేశాలు, రికార్డింగ్ స్థితి లేదా లోపాన్ని సూచించడానికి ఫేవికాన్‌ను మారుస్తాయి. బాగా చేస్తే ఇది ఉపయోగకరం; మితిమీరితే చిరాకు కలిగిస్తుంది.

• చిన్న బ్యాడ్జ్ ఉపయోగించండి (ఒక చుక్క లేదా చిన్న సంఖ్య) మూలలో, పూర్తి రీడిజైన్ కాకుండా. బేస్ ఐకాన్ గుర్తించదగినదిగానే ఉండాలి.
• తక్కువగా ఉంచండి. వినియోగదారు చర్య అవసరమైన సందర్భాల కోసమే బ్యాడ్జ్‌లను కేటాయించండి. ఐకాన్‌ను నిరంతరం యానిమేట్ చేయవద్దు.
• సంఖ్యలకు పరిమితి పెట్టండి. 16x16 వద్ద ఒకటి లేదా రెండు అంకెలు మాత్రమే చదవగలిగేలా ఉంటాయి; "137"కు బదులుగా "9+" లేదా సాధారణ చుక్కను చూపండి.
• వెంటనే రీసెట్ చేయండి వినియోగదారు ఆ అంశాన్ని పరిష్కరించిన తర్వాత, డిఫాల్ట్ ఐకాన్‌ను తిరిగి పెట్టండి.
• రంగుపై మాత్రమే ఆధారపడవద్దు. ఎరుపు చుక్కకు తోడుగా "(3) Inbox" వంటి పేజీ శీర్షిక కూడా ఉండాలి, తద్వారా సమాచారం అందరికీ అందుబాటులో ఉంటుంది.

డైనమిక్ ఫేవికాన్‌లను సాధారణంగా కాన్వాస్‌పై గీసి, ఐకాన్ లింక్ ఎలిమెంట్ యొక్క 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లను మినిఫై చేయండి.

<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. లింక్ ట్యాగ్‌లను జోడించండి, కాష్ హెడర్‌లను సెట్ చేయండి, డిప్లాయ్ చేయండి, చెకర్తో ధృవీకరించండి.

ఫేవికాన్ మీ సైట్‌లోని అతి చిన్న ఆస్తుల్లో ఒకటి, అదే సమయంలో అత్యంత తరచుగా కనిపించేవాటిలో ఒకటి. కాంట్రాస్ట్, సరళత మరియు స్థిరత్వం గురించి కొన్ని జాగ్రత్తైన నిర్ణయాలు దాన్ని ప్రతి ట్యాబ్‌లో, ప్రతి థీమ్‌లో, ప్రతి పరికరంలో పనిచేసేలా చేస్తాయి.

తరచుగా అడిగే ప్రశ్నలు

ఫేవికాన్ పరిమాణం ఎంత ఉండాలి?

బ్రౌజర్ ట్యాబ్‌ల కోసం 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 తన సొంత కాపీని నిల్వ చేసి తన షెడ్యూల్ ప్రకారం రిఫ్రెష్ చేస్తుంది, దీనికి తరచుగా రోజులు లేదా వారాలు పడుతుంది. పేజీని హార్డ్-రిఫ్రెష్ చేయండి, బ్రౌజర్ కాష్‌ను క్లియర్ చేయండి, కొత్త వెర్షన్ ఫైల్ పేరును ఉపయోగించండి, లింక్ ట్యాగ్‌లు మరియు రూట్ /favicon.ico సరైన ఫైల్‌ను సూచిస్తున్నాయని నిర్ధారించుకోండి. సెటప్‌ను MakeFav చెకర్తో ధృవీకరించవచ్చు.

ఫేవికాన్‌పై నోటిఫికేషన్ బ్యాడ్జ్‌లను చూపడం మంచి ఆలోచనేనా?

అవును, పొదుపుగా వాడితే. చిన్న చుక్క లేదా ఒకటి లేదా రెండు అంకెల సంఖ్య, చర్య అవసరమైన దాన్ని వినియోగదారులు గమనించేలా సహాయపడుతుంది, కానీ నిరంతర యానిమేషన్ లేదా పెద్ద సంఖ్యలు స్పష్టతను, శ్రద్ధను దెబ్బతీస్తాయి. స్థితిని ఎల్లప్పుడూ పేజీ శీర్షికలో ప్రతిబింబించండి, అంశం పరిష్కారమైనప్పుడు డిఫాల్ట్ ఐకాన్‌ను పునరుద్ధరించండి, రంగుపై మాత్రమే ఆధారపడవద్దు.