HTML Academy · पाठ

Favicon और Apple Touch Icon

ब्राउज़र टैब और होम स्क्रीन पर दिखने वाले आइकन जोड़ें

पाठ 4, कुल 4 में से13 चरण

Favicon और Apple Touch Icon, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

फ़ेविकॉन क्या है

फ़ेविकॉन वह छोटा आइकन है जो इन स्थानों पर दिखाई देता है:

ब्राउज़र टैब
बुकमार्क सूचियाँ
ब्राउज़र इतिहास
खोज परिणाम (कभी-कभी)

यह उपयोगकर्ताओं को कई खुले टैब में आपकी साइट को एक नज़र में पहचानने में मदद करता है।

बुनियादी फ़ेविकॉन लिंक

head में लिंक तत्व के साथ फ़ेविकॉन जोड़ें:

<head>
  <!-- SVG favicon (modern, scales at any size) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Legacy ICO for Internet Explorer -->
  <link rel="shortcut icon" href="/favicon.ico">
</head>

फ़ेविकॉन के प्रारूप

फ़ेविकॉन के लिए अनुशंसित प्रारूप रणनीति:

SVG — वेक्टर, पूरी तरह स्केल होता है, फ़ाइल का आकार छोटा (पहले इसका उपयोग करें)
PNG 32x32 — SVG का समर्थन न करने वाले ब्राउज़र के लिए वैकल्पिक व्यवस्था
ICO — पुराना प्रारूप, जिसमें 16x16 और 32x32 आकार होते हैं

ICO फ़ाइल का स्थान

डोमेन के रूट में मौजूद favicon.ico फ़ाइल अपने-आप प्राप्त की जाती है:

<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico  -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

आकार विशेषता

sizes विशेषता आइकन के आयाम निर्धारित करती है:

<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">

Apple Touch आइकन

जब उपयोगकर्ता आपकी साइट को iOS की होम स्क्रीन पर जोड़ते हैं, तब Apple Touch आइकन दिखाई देता है:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->

Android के लिए मास्क योग्य आइकन

Android PWA ऐसे मास्क योग्य आइकन का उपयोग करते हैं जो आइकन का आकार पूरी तरह भर देते हैं:

<link rel="manifest" href="/manifest.json">

<!-- In manifest.json: -->
<!--
{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
-->

डार्क मोड फ़ेविकॉन

डार्क मोड के अनुसार बदलने वाला SVG फ़ेविकॉन दें:

<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: white; }
      .icon-mark { fill: black; }
    }
    .icon-bg { fill: #0070f3; }
    .icon-mark { fill: white; }
  </style>
  <circle class="icon-bg" cx="16" cy="16" r="16"/>
  <text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->

PWA आइकन के लिए वेब ऐप मेनिफ़ेस्ट

प्रोग्रेसिव वेब ऐप के लिए आइकन का पूरा सेटअप:

<link rel="manifest" href="/manifest.json">

<!-- manifest.json icons array: -->
<!--
"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->

पूरा फ़ेविकॉन सेटअप

एक पूरा आधुनिक फ़ेविकॉन कॉन्फ़िगरेशन:

<head>
  <!-- SVG: scales to any size, supports dark mode -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
  <!-- Apple home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- PWA manifest (for Android home screen) -->
  <link rel="manifest" href="/manifest.json">
</head>

फ़ेविकॉन की जाँच

फ़ेविकॉन सेटअप की पुष्टि कैसे करें:

कैश किया गया फ़ेविकॉन हटाने के लिए हार्ड रीलोड करें (Ctrl+Shift+R / Cmd+Shift+R)
Favicon Checker उपकरण का उपयोग करें (realfavicongenerator.net)
Apple Touch आइकन के लिए वास्तविक iOS उपकरण पर जाँच करें
Lighthouse → PWA ऑडिट से PWA मेनिफ़ेस्ट जाँचें

त्वरित जाँच

Apple Touch आइकन की छवियों के लिए अनुशंसित आकार क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: फ़ेविकॉन

फ़ेविकॉन के आवश्यक बिंदु:

SVG फ़ेविकॉन — आधुनिक, स्केलेबल, डार्क मोड के अनुसार बदलने वाला
PNG 32x32 — SVG समर्थन के बिना ब्राउज़र के लिए वैकल्पिक व्यवस्था
रूट में ICO — पुराने IE के लिए वैकल्पिक व्यवस्था
apple-touch-icon 180×180 — iOS होम स्क्रीन
वेब ऐप मेनिफ़ेस्ट — Android PWA आइकन (192px और 512px)

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Favicon और Apple Touch Icon” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Favicon और Apple Touch Icon” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Favicon और Apple Touch Icon” में मैं क्या सीखूँगा?

ब्राउज़र टैब और होम स्क्रीन पर दिखने वाले आइकन जोड़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Favicon और Apple Touch Icon” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

title और SEO में इसकी भूमिका
meta charset viewport author और description
Canonical URL और robots meta
Favicon और Apple Touch Icon

← HTML Academy पर वापस जाएँ