2026లో మీకు ఏ ఫేవికాన్ సైజులు కావాలి? ఆదర్శ సెట్

2026లో ఆదర్శ ఫేవికాన్ సెట్ ఇదే: 16, 32, 48 px చిత్రాలు ఉన్న favicon.ico, (Google Search కోసం) ఒక 96x96 PNG, ఐచ్ఛికంగా ఒక SVG ఫేవికాన్, ఒక 180x180 apple-touch-icon.png, మరియు వెబ్ యాప్ మానిఫెస్ట్‌లో ప్రకటించిన 192x192, 512x512 PNGలు (అలాగే ఒక maskable 512). చాలా పాత పరికరాలకు మద్దతు ఇవ్వాల్సి వస్తేనే Windows టైల్స్, పాత Apple సైజులు అవసరం. దిగువన ఉన్నదంతా దీనికి కారణాలను సైజుల పట్టిక, వెంటనే వాడుకోగల HTML మరియు తప్పించుకోవాల్సిన సాధారణ పొరపాట్లతో వివరిస్తుంది.

ఫేవికాన్ రంగం ఒకప్పుడు గందరగోళంగా ఉండేది: ప్రతి బ్రౌజర్, ఆపరేటింగ్ సిస్టమ్ తనదైన సైజు అడిగేది, దాంతో 20 లైన్ల పొడవైన <head> బ్లాక్‌లు తయారయ్యేవి. ఇప్పుడు వాటిలో చాలావరకు వాడుకలో లేవు. ఆధునిక బ్రౌజర్లు ఒక మంచి ఐకాన్‌నే స్కేల్ చేస్తాయి, iOSకు ఒకే సైజు కావాలి, Android మానిఫెస్ట్‌ను చదువుతుంది. నిజంగా అవసరమైనవి, ఉంటే బాగుండేవి ఏవో ఈ వ్యాసం వేరు చేసి చూపిస్తుంది.

సంక్షిప్త సమాధానం: ఫేవికాన్ ఫైళ్ల ఆదర్శ సెట్

• సైట్ రూట్‌లో favicon.ico (ఒకే ఫైల్‌లో 16, 32, 48 px). బ్రౌజర్లు, ఫీడ్ రీడర్లు, చాలా టూల్స్ ఇప్పటికీ /favicon.icoను ఆటోమేటిక్‌గా అడుగుతాయి.
• ఏ సైజులోనైనా స్పష్టమైన రెండరింగ్, డార్క్ మోడ్ మద్దతు కోసం favicon.svg (ఐచ్ఛికం కానీ సిఫార్సు).
• స్పష్టమైన ఫాల్‌బ్యాక్‌లుగా PNG 16x16, 32x32, 96x96. 96 px వెర్షన్ Google Searchకు సహాయపడుతుంది, అది 48 px గుణిజాన్ని కోరుతుంది.
• 180x180 సైజులో apple-touch-icon.png, అపారదర్శకంగా (ట్రాన్స్‌పరెన్సీ లేకుండా).
• manifest.jsonలో 192x192, 512x512 PNG, అలాగే Android కోసం maskable 512x512 ఐకాన్.
• మొబైల్‌లో బ్రౌజర్ UI రంగు కోసం theme-color మెటా ట్యాగ్.
• పాత Windows, IE11 పిన్ చేసిన సైట్ల కోసం మాత్రమే browserconfig.xmlతో Windows టైల్స్ (70, 150, 310 px).

ఫేవికాన్ సైజుల పట్టిక: ఉద్దేశం, ఫైల్ పేర్లు, ప్రాధాన్యత

ఈ పట్టికను చెక్‌లిస్ట్‌గా వాడండి. "తప్పనిసరి" అంటే అది లేకపోతే సాధారణ సైట్ చెడిపోయినట్లు లేదా అసంపూర్ణంగా కనిపిస్తుంది; "సిఫార్సు" అంటే స్పష్టమైన నాణ్యత మెరుగుదల; "ఐచ్ఛికం" అంటే ప్రత్యేక లేదా పాత వినియోగం.

favicon.ico: ఒకే ఫైల్‌లో 16, 32, 48 px

ICO ఫైల్ అనేక బిట్‌మ్యాప్‌లను కలిగి ఉండే కంటైనర్. మంచి favicon.icoలో 16x16, 32x32, 48x48 చిత్రాలు ఉంటాయి, తద్వారా బ్రౌజర్ లేదా OS అత్యంత దగ్గరి సైజును ఎంచుకోగలదు. దీన్ని మీ డొమైన్ రూట్‌లో ఉంచండి (https://example.com/favicon.ico). మీ HTML వేరే చోటికి సూచించినా, చాలా క్రాలర్లు, RSS రీడర్లు, పాత బ్రౌజర్లు ఇప్పటికీ ఆ ఖచ్చితమైన URLను అడుగుతాయి, కాబట్టి అది ఉంటే మీ లాగ్‌లలో 404 గోల తప్పుతుంది.

ఒక PNGని కేవలం .icoగా పేరు మార్చకండి. చాలా బ్రౌజర్లు దాన్ని సహిస్తాయి, కానీ కొన్ని టూల్స్ తిరస్కరిస్తాయి, బహుళ-రిజల్యూషన్ ప్రయోజనం కూడా పోతుంది. నిజమైన ICOను ఎగుమతి చేయండి.

PNG ఫేవికాన్లు: 16, 32, 96 px

స్పష్టమైన sizes ఉన్న PNG లింక్‌లు ICOను పార్స్ చేయకుండానే బ్రౌజర్ ఉత్తమ బిట్‌మ్యాప్‌ను ఎంచుకునేలా చేస్తాయి. ఆచరణలో 32x32 హై-DPI ట్యాబ్‌లను కవర్ చేస్తుంది, 16x16 ఇప్పుడు దాదాపు అనవసరం. 96x96 సైజును చేర్చడం విలువైనది, ఎందుకంటే Google Search ఫలితాల పక్కన ఫేవికాన్లను చూపిస్తుంది మరియు సైజు 48 px గుణిజంగా ఉండే చతురస్ర ఐకాన్‌ను కోరుతుంది (48x48, 96x96, 144x144 ఇలా). మొబైల్ ఫలితాల కోసం డౌన్‌సాంపుల్ చేసేటప్పుడు 48 px ఫైల్ కంటే 96 px ఫైల్ Googleకు మరింత స్పష్టమైన మూలాన్ని ఇస్తుంది.

డిజైన్ చిట్కా: 16 px వద్ద సూక్ష్మ వివరాలు మాయమవుతాయి. బలమైన, సరళమైన ఆకృతి, అధిక కాంట్రాస్ట్ వాడండి, టెక్స్ట్ తక్కువగా లేదా అసలు లేకుండా ఉంచండి. ఎగుమతి చేసే ముందు MakeFav ఎడిటర్లో మీ ఐకాన్‌ను సరిచేసి ప్రివ్యూ చూడవచ్చు.

SVG ఫేవికాన్ మరియు డార్క్ మోడ్

SVG ఫేవికాన్ అనేది ఏ స్క్రీన్ డెన్సిటీలోనైనా స్పష్టంగా ఉండే ఒకే చిన్న ఫైల్. Chromium ఆధారిత బ్రౌజర్లు, Firefox దీనికి మద్దతిస్తాయి. Safari మద్దతు చారిత్రకంగా పరిమితం, కాబట్టి SVGపై మాత్రమే ఆధారపడకండి: ICO, PNG ఫాల్‌బ్యాక్‌లను ఉంచండి.

అతిపెద్ద ప్రయోజనం థీమింగ్. SVGలో CSS ఉండగలదు కాబట్టి, prefers-color-schemeతో వినియోగదారు రంగు పథకానికి ఐకాన్‌ను అనుగుణంగా మార్చవచ్చు:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

మీడియా క్వెరీ బ్రౌజర్ లేదా OS థీమ్‌ను ప్రతిబింబిస్తుందని గమనించండి, ట్యాబ్ బార్ వాడేది అదే. ఇది మీ సొంత వెబ్‌సైట్‌లోని థీమ్ టోగుల్‌ను అనుసరించదు.

ఒక తెలిసిన చిక్కు: ICO, SVG రెండూ జాబితాలో ఉన్నప్పుడు Chrome ICOను ఎంచుకోవచ్చు. ICOను sizes="32x32"తో ప్రకటించి, SVGని ఆ తర్వాత జాబితా చేస్తే, దిగువ కోడ్‌లో చూపినట్లు Chrome SVGకి ప్రాధాన్యత ఇస్తుంది.

Apple touch icon: 180x180 మరియు పాత సైజులు

వినియోగదారు మీ సైట్‌ను iOS లేదా iPadOS హోమ్ స్క్రీన్‌కు జోడించినప్పుడు, Safari apple-touch-iconను వాడుతుంది. నేడు ఒకే 180x180 px PNG సరిపోతుంది: పాత పరికరాలు, iPadల కోసం iOS దాన్ని తగ్గించి వాడుతుంది. దీనికి apple-touch-icon.png అని పేరు పెట్టి రూట్‌లో ఉంచండి; link ట్యాగ్ లేకపోతే iOS ఆ ఫైల్‌ను డిఫాల్ట్‌గా వెతుకుతుంది.

Apple ఐకాన్ నియమాలు:

• ట్రాన్స్‌పరెన్సీ వద్దు. iOS పారదర్శక పిక్సెల్‌లను నలుపుతో నింపుతుంది, కాబట్టి పారదర్శక లోగో తరచుగా నల్లని మచ్చగా మారుతుంది. ఘన నేపథ్య రంగును జోడించండి.
• గుండ్రని మూలలు వద్దు. iOS తన సొంత గుండ్రని మాస్క్‌ను వర్తింపజేస్తుంది. పూర్తి చతురస్రాన్ని ఇవ్వండి.
• మూలలు కత్తిరించబడతాయి కాబట్టి ముఖ్యమైన కంటెంట్‌ను అంచులకు దూరంగా ఉంచండి.

పాత సైజులు (57, 72, 76, 114, 120, 144, 152, 167) ఎప్పుడు అవసరం? మీరు iOS 6 లేదా అంతకంటే పాతదానికి మద్దతిస్తేనే, లేదా iPad Pro (167 px), iPad (152 px) కోసం పరికరం వారీగా ఖచ్చితమైన పిక్సెల్ నియంత్రణ కావాలంటేనే. 2026లో దాదాపు ప్రతి సైట్‌కు 180x180 ఫైల్ ఒక్కటే సరిపోతుంది. దిగువ గరిష్ట-అనుకూలత సెటప్‌లో పరిపూర్ణత కోసం కొన్నింటిని చేర్చాము.

Android మరియు PWA ఐకాన్లు: 192, 512 మరియు maskable

Androidలో Chrome మరియు ఇతర PWA-సామర్థ్యం ఉన్న బ్రౌజర్లు ఐకాన్లను <link rel="icon"> నుండి కాకుండా వెబ్ యాప్ మానిఫెస్ట్ నుండి చదువుతాయి. ఇన్‌స్టాల్ చేయగలిగేలా ఉండటానికి కనీసం ఒక 192x192, ఒక 512x512 PNG కావాలి. 192 px ఐకాన్ హోమ్ స్క్రీన్, యాప్ లాంచర్‌లో వాడబడుతుంది; 512 px ఐకాన్ స్ప్లాష్ స్క్రీన్లు, ఇన్‌స్టాల్ డైలాగ్‌లలో కనిపిస్తుంది.

Maskable ఐకాన్లు మరియు సేఫ్ జోన్

Android అడాప్టివ్ ఐకాన్లు పరికరాన్ని బట్టి వృత్తం, స్క్విర్కిల్ లేదా ఇతర ఆకారంలోకి కత్తిరించబడవచ్చు. Maskable ఐకాన్ సురక్షితంగా కత్తిరించబడేలా రూపొందించబడుతుంది: ముఖ్యమైన కంటెంట్ సేఫ్ జోన్ లోపల, అంటే చిత్రంలో 80% వ్యాసం ఉన్న మధ్య వృత్తం లోపల ఉండాలి (వ్యాసార్థం భుజంలో 40%). 512x512 ఫైల్‌కు, అంటే మీ లోగోను సుమారు 410 px వ్యాసం ఉన్న వృత్తంలో ఉంచాలి, మాస్కింగ్ తర్వాత ఖాళీలు కనిపించకుండా నేపథ్య రంగును నాలుగు అంచుల వరకు విస్తరించాలి.

Maskable ఐకాన్‌ను "purpose": "maskable"తో ప్రత్యేక ఎంట్రీగా ప్రకటించండి. ఒకే ఫైల్‌పై "any maskable" వాడకండి: మాస్కింగ్‌కు అవసరమైన ప్యాడింగ్, ఐకాన్ మాస్క్ లేకుండా చూపినప్పుడు మరీ చిన్నదిగా కనిపిస్తుంది.

manifest.json ఉదాహరణ

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

ఫైల్‌ను application/manifest+json (లేదా application/json)గా అందించండి మరియు ప్రతి పేజీ నుండి <link rel="manifest" href="/manifest.json">తో లింక్ చేయండి. కొన్ని ప్రాజెక్టులు దీనికి site.webmanifest అని పేరు పెడతాయి; పేరు ముఖ్యం కాదు, లింకే ముఖ్యం.

Windows టైల్స్ మరియు browserconfig.xml

Windows 8.1, 10 వినియోగదారులు సైట్‌ను Start మెనూకు పిన్ చేయడానికి అనుమతిస్తాయి, IE11, పాత Edge టైల్ చిత్రాలను browserconfig.xml నుండి చదువుతాయి. సాధారణ సైజులు 70x70 (చిన్నది), 150x150 (మధ్యస్థం), 310x150 (వెడల్పు), 310x310 (పెద్దది). Chromium ఆధారిత Edge బదులుగా మానిఫెస్ట్, సాధారణ ఫేవికాన్లను వాడుతుంది, కాబట్టి ఇది పాత ఫీచర్. మీ ప్రేక్షకుల్లో, ఉదాహరణకు కార్పొరేట్ వాతావరణాల్లో, ఇంకా పాత Windows సెటప్‌లు ఉంటేనే దీన్ని చేర్చండి.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: బ్రౌజర్ UIకి రంగు వేయడం

theme-color మెటా ట్యాగ్ అడ్రస్ బార్ లేదా టైటిల్ బార్‌కు ఏ రంగు వాడాలో మొబైల్ బ్రౌజర్లకు (మరియు కొన్ని డెస్క్‌టాప్ వాటికి) చెబుతుంది. ఇది ఫేవికాన్ కాదు, కానీ అదే బ్రాండింగ్ సెట్‌కు చెందినది. లైట్, డార్క్ మోడ్‌లకు వేర్వేరు విలువలను ఇవ్వవచ్చు:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

కనిష్ట ఆధునిక సెటప్ vs. గరిష్ట అనుకూలత

కనిష్ట ఆధునిక సెటప్ (చాలా సైట్లకు సిఫార్సు)

ఐదు ఫైళ్లు వాస్తవ వినియోగంలో 99% పైగా కవర్ చేస్తాయి: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), మరియు రెండు మానిఫెస్ట్ ఐకాన్లు (192, 512). Google Search దృశ్యమానత ముఖ్యమైతే 96x96 PNGని, PWA అందిస్తే maskable ఐకాన్‌ను జోడించండి.

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

గరిష్ట అనుకూలత సెటప్

మీరు విస్తృత లేదా ఎంటర్‌ప్రైజ్ ప్రేక్షకులకు సేవ చేస్తున్నప్పుడు, లేదా సాధ్యమైన ప్రతి క్లయింట్‌ను కవర్ చేయాలనుకున్నప్పుడు దీన్ని ఎంచుకోండి. ఇది స్పష్టమైన PNG సైజులు, పాత Apple సైజులు, Windows టైల్స్, థీమ్ రంగులను జోడిస్తుంది.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

/తో మొదలయ్యే రూట్-రిలేటివ్ పాత్‌లను గమనించండి. అవి ఏ పేజీ లోతులోనైనా పనిచేస్తాయి, ఇది మనల్ని అత్యంత సాధారణ పొరపాట్ల దగ్గరకు తీసుకెళ్తుంది.

సాధారణ ఫేవికాన్ పొరపాట్లు మరియు వాటిని సరిచేసే విధానం

1. తప్పు పాత్‌లు

href="favicon.ico" వంటి లింక్ ప్రస్తుత URLకు సాపేక్షంగా పరిష్కరించబడుతుంది, కాబట్టి అది / వద్ద పనిచేస్తుంది కానీ /blog/post/ వద్ద విఫలమవుతుంది. రూట్-రిలేటివ్ (/favicon.ico) లేదా సంపూర్ణ URLలను వాడండి. ఫైళ్లు నిజంగా ఉన్నాయో కూడా తనిఖీ చేయండి: ప్రతి URLను బ్రౌజర్‌లో నేరుగా తెరిచి, అది 404 పేజీకి లేదా లాగిన్ గోడకు రీడైరెక్ట్ కాకుండా HTTP 200 ఇస్తోందని నిర్ధారించుకోండి.

2. sizes అట్రిబ్యూట్ లేకపోవడం లేదా తప్పుగా ఉండటం

sizes లేకపోతే, బ్రౌజర్లు ఐకాన్లను పరిశీలించడానికి డౌన్‌లోడ్ చేయాలి, తప్పు దాన్ని ఎంచుకోవచ్చు. PNG లింక్‌లపై ఎల్లప్పుడూ sizes ప్రకటించండి, అది అసలు పిక్సెల్ కొలతలతో సరిపోలేలా చూడండి. 32x32 అని లేబుల్ చేసి అసలు 64x64 ఉన్న ఫైల్ అస్థిరమైన ఫలితాలను ఇస్తుంది.

3. తీవ్రమైన క్యాషింగ్

బ్రౌజర్లు ఫేవికాన్లను చాలా కాలం క్యాష్ చేస్తాయి, తరచుగా పేజీ క్యాష్‌తో సంబంధం లేకుండా. రీబ్రాండ్ తర్వాత పాత ఐకాన్ రోజుల తరబడి ఉండిపోవచ్చు. ఫైల్ పేరు మార్చండి లేదా వెర్షన్ క్వెరీ స్ట్రింగ్ జోడించండి (/favicon.ico?v=2) మరియు link ట్యాగ్‌లను అప్‌డేట్ చేయండి. హార్డ్ రీలోడ్ తరచుగా ట్యాబ్ ఐకాన్‌ను రిఫ్రెష్ చేయదు; ఐకాన్ URLను నేరుగా తెరిచి రీలోడ్ చేస్తే సాధారణంగా అవుతుంది.

4. చతురస్రం కాని చిత్రాలు

ఫేవికాన్లు చతురస్రంగా ఉండాలి. దీర్ఘచతురస్ర లోగో ఊహించలేని విధంగా సాగుతుంది, కత్తిరించబడుతుంది లేదా లెటర్‌బాక్స్ అవుతుంది. వెడల్పైన వర్డ్‌మార్క్‌ను కుదించే బదులు, మొదటి అక్షరం లేదా చిహ్నం వంటి ప్రత్యేక చతురస్ర గుర్తును డిజైన్ చేయండి.

5. పారదర్శక Apple touch icon నల్లగా మారడం

iOS పారదర్శకతను నలుపుతో నింపుతుంది. 180x180 ఐకాన్‌కు అపారదర్శక నేపథ్యం ఇవ్వండి, మూలలను ముందే గుండ్రంగా చేయకండి.

6. సేఫ్ జోన్ లేని maskable ఐకాన్లు

లోగో maskable ఐకాన్ అంచులను తాకితే, Android దాన్ని కత్తిరించేస్తుంది. దాన్ని మధ్యలోని 80% వృత్తం లోపల ఉంచి, మొత్తం కాన్వాస్‌ను నేపథ్య రంగుతో నింపండి.

7. క్రాలర్ల నుండి ఐకాన్లను నిరోధించడం

robots.txt మీ ఫేవికాన్ పాత్‌ను disallow చేస్తే, Google దాన్ని తీసుకోలేదు మరియు శోధన ఫలితాల్లో సాధారణ గ్లోబ్ ఐకాన్‌ను చూపుతుంది. అలాగే, Googleకు పేజీ ఉన్న హోస్ట్‌లోనే ఫేవికాన్ ఉండాలని, అది అప్పుడప్పుడే రిఫ్రెష్ చేస్తుందని గుర్తుంచుకోండి, కాబట్టి మార్పులు కనిపించడానికి రోజులు లేదా వారాలు పట్టవచ్చు.

8. మానిఫెస్ట్ లింక్ లేదా purposes మర్చిపోవడం

లింక్ చేయని మానిఫెస్ట్, లేదా 192, 512 px ఐకాన్లు లేని మానిఫెస్ట్ Chromeలో ఇన్‌స్టాల్ ప్రాంప్ట్‌ను నిరోధిస్తుంది. మీ బ్రౌజర్ డెవలపర్ టూల్స్‌లో Application ట్యాబ్ కింద దాన్ని ధృవీకరించండి.

మొత్తం సెట్‌ను ఒక్క క్లిక్‌తో జనరేట్ చేయండి

ఇమేజ్ ఎడిటర్‌లో డజను ఫైళ్లను చేతితో తయారు చేసి, ICOగా మార్చి, మానిఫెస్ట్ రాయడం ఇబ్బందికరం, పొరపాట్లకు ఆస్కారం ఎక్కువ. MakeFav పైన పేర్కొన్న అన్ని ఫైళ్లను ఒకే చిత్రం, టెక్స్ట్ లేదా ఎమోజీ నుండి జనరేట్ చేస్తుంది: బహుళ-సైజు favicon.ico, PNGలు, SVG, Apple touch icon, 192/512 PNGలు, maskable ఐకాన్, Windows టైల్స్, manifest.json, browserconfig.xml, అలాగే పేస్ట్ చేయడానికి సిద్ధమైన HTML స్నిప్పెట్, అన్నీ ఒకే ZIP డౌన్‌లోడ్‌లో. నేపథ్యం, ప్యాడింగ్, ఆకృతిని ఎడిటర్లో సరిచేయవచ్చు, ఇప్పటికే ఉన్న సైట్‌ను ఫేవికాన్ చెకర్తో పరిశీలించవచ్చు, డెవలపర్ వనరుల ద్వారా జనరేషన్‌ను ఆటోమేట్ చేయవచ్చు.

డిప్లాయ్‌మెంట్ చెక్‌లిస్ట్

1. అన్ని ఫైళ్లను మీ సైట్ రూట్‌కు అప్‌లోడ్ చేయండి.
2. HTML స్నిప్పెట్‌ను ప్రతి పేజీ <head>లో (లేదా మీ షేర్డ్ లేఅవుట్‌లో) పేస్ట్ చేయండి.
3. పాత్‌లు రూట్-రిలేటివ్‌గా ఉండి HTTP 200 ఇస్తున్నాయని నిర్ధారించుకోండి.
4. లైట్, డార్క్ మోడ్, iOS హోమ్-స్క్రీన్ ఇన్‌స్టాల్, Android ఇన్‌స్టాల్‌ను తనిఖీ చేయండి.
5. లేని లేదా సరిపోలని సైజులను పట్టుకోవడానికి చెకర్ను నడపండి.
6. పాత ఐకాన్‌ను మార్చి ఉంటే, వెర్షన్ స్ట్రింగ్‌తో క్యాష్‌లను బద్దలు కొట్టండి.

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

2026లో కూడా నాకు favicon.ico అవసరమా?

అవును. ఆధునిక బ్రౌజర్లు PNG, SVGలను అంగీకరించినా, చాలా క్రాలర్లు, ఫీడ్ రీడర్లు, ఇమెయిల్ క్లయింట్లు, పాత బ్రౌజర్లు ఇప్పటికీ /favicon.icoను నేరుగా అడుగుతాయి. 16, 32, 48 px చిత్రాలతో బహుళ-సైజు ICO ఒక చిన్న ఫైల్, ఐకాన్లు లేకపోవడాన్ని, 404 ఎర్రర్లను నివారిస్తుంది.

Google Search కోసం ఫేవికాన్ సైజు ఎంత ఉండాలి?

Google సైజు 48 px గుణిజంగా ఉండే చతురస్ర ఫేవికాన్‌ను, కనీసం 48x48ను కోరుతుంది. 96x96 PNG సురక్షితమైన ఎంపిక, SVGకి కూడా మద్దతు ఉంది. ఫైల్ క్రాల్ చేయదగినదిగా కూడా ఉండాలి, కాబట్టి robots.txtలో దాన్ని బ్లాక్ చేయకండి. అప్‌డేట్‌లు కనిపించడానికి రోజులు లేదా వారాలు పట్టవచ్చు.

Apple touch iconకి 180x180 సరిపోతుందా?

దాదాపు అన్ని సైట్లకు, అవును. iOS, iPadOS ప్రతి ప్రస్తుత పరికరానికి 180x180 PNGని తగ్గించి వాడతాయి. పాత సైజులు (57 నుండి 152 px) చాలా పాత iOS వెర్షన్లకు మాత్రమే ముఖ్యం. ఐకాన్ నల్లగా మారకుండా అపారదర్శక నేపథ్యాన్ని వాడటం గుర్తుంచుకోండి.

Maskable ఐకాన్ అంటే ఏమిటి, నాకు అది అవసరమా?

Maskable ఐకాన్ అనేది Android అడాప్టివ్ ఐకాన్ ఆకారాల కోసం రూపొందించిన 512x512 PNG. దాని ముఖ్యమైన కంటెంట్ మధ్యలోని 80% వ్యాసం ఉన్న వృత్తం లోపల ఉంటుంది, నేపథ్యం మొత్తం చతురస్రాన్ని నింపుతుంది. మీరు ఇన్‌స్టాల్ చేయగల PWA అందిస్తేనే ఇది అవసరం, కానీ ఇది ఐకాన్ తెల్లని వృత్తంలో కూర్చోకుండా స్థానికంగా కనిపించేలా చేస్తుంది.

నేను మార్చిన తర్వాత కూడా నా పాత ఫేవికాన్ ఎందుకు కనిపిస్తోంది?

బ్రౌజర్లు ఫేవికాన్లను విడిగా, చాలా కాలం క్యాష్ చేస్తాయి. ఫైల్ పేరు మార్చండి లేదా ?v=2 వంటి వెర్షన్ క్వెరీ స్ట్రింగ్ జోడించండి, link ట్యాగ్‌లను అప్‌డేట్ చేయండి, ఆ తర్వాత ఐకాన్ URLను నేరుగా తెరిచి రీలోడ్ చేయండి. సెర్చ్ ఇంజిన్లు తమ సొంత కాపీని రిఫ్రెష్ చేయడానికి ఎక్కువ సమయం తీసుకోవచ్చు.