← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 1 of 26

HTML Favicon

जब आपके पास एक साथ पचास अलग-अलग browser tabs खुले हों, तो आप अपना मनचाहा page ढूंढने के लिए हर tab पर titles नहीं पढ़ते। इसके बजाय, आप text के बगल में वे छोटे, distinctive logos ढूंढते हैं। उस छोटी image को favicon कहते हैं। एक favicon आपकी website की brand identity के लिए एक miniature billboard जैसा है। यह browser tabs, bookmarks, browser history, और यहां तक कि search engine results में भी दिखता है, जिससे आपकी site तुरंत पहचानी जाती है। favicon के बिना, browsers एक generic, boring blank document icon दिखाएंगे, जिससे आपकी professional website अधूरी और अविश्वसनीय दिखती है।

In this page:

  1. Favicon क्या है?
  2. Favicon File Formats (ICO बनाम PNG बनाम SVG)
  3. अपने HTML में Favicon जोड़ना
  4. Mobile Devices के लिए Apple Touch Icons
  5. Favicon Caching समस्याओं को प्रबंधित करना
  6. PWA Manifest में Favicon Icons
Syntax
markup 
<link rel="icon" type="image/x-icon" href="favicon.ico">

Favicon क्या है?

favicon ('favorite icon' का संक्षिप्त रूप) एक बहुत छोटा graphic है जो किसी specific webpage या website से जुड़ा होता है। यह एक visual anchor की तरह काम करता है जो browser interface में आपके brand को represent करता है।

Note: अपना favicon design बेहद simple रखें क्योंकि इसे एक छोटे से 16x16 pixel square में scale किया जाएगा।
Warning: favicon न देने से आपके server पर annoying 404 error logs बन सकते हैं क्योंकि browsers अपने आप इसे ढूंढते हैं।

उदाहरण: What is a Favicon?

markup 
<!-- Favicon: the small icon shown in the browser tab -->

Favicon File Formats (ICO बनाम PNG बनाम SVG)

web के शुरुआती दिनों में, favicons को Microsoft ICO format में save करना पड़ता था। आज, modern ब्राउज़र PNG और scalable vector SVG formats को support करते हैं, जिससे कहीं अधिक sharp, translucent, और यहां तक कि responsive icons बनाना संभव है।

Note: standard modern layouts के लिए PNG का उपयोग करें और पुराने ब्राउज़रों के लिए एक legacy ICO fallback दें।
Warning: किसी PNG file का नाम बदलकर सिर्फ .ico करने से बचें क्योंकि browser invalid container को parse करने में fail हो जाएगा।

उदाहरण: Favicon File Formats (ICO vs. PNG vs. SVG)

markup 
<!-- favicon.ico, favicon.png, favicon.svg -->

अपने HTML में Favicon जोड़ना

favicon जोड़ने के लिए, आप अपने HTML document के head section के अंदर एक special link tag insert करते हैं। link tag को rel attribute icon पर set होना चाहिए और href attribute को आपके image path की ओर इशारा करना चाहिए।

Note:
  • अपने favicon link tags हमेशा head section के अंदर लिखें, आदर्श रूप से title tag के ठीक बाद।
  • Accepted attributes:
  • rel — icon | shortcut icon (legacy) | apple-touch-icon
  • href — icon file का URL
  • type — MIME type जैसे image/png | image/svg+xml | image/x-icon
  • sizes — WxH list (जैसे 32x32) | any
Warning: सुनिश्चित करें कि आपका link tag गलती से body section के अंदर न रखा गया हो, क्योंकि browser इसे नजरअंदाज कर देगा।

उदाहरण: Adding a Favicon to Your HTML

markup 
<head>
  <title>My Page</title>
  <link rel="icon" href="favicon.png">
</head>

Mobile Devices के लिए Apple Touch Icons

जब mobile users आपकी website को bookmark करते हैं या इसे सीधे अपने smartphone home screen पर जोड़ते हैं, तो standard favicons अक्सर धुंधले दिखते हैं। Apple ने उच्च-गुणवत्ता वाले home screen web clips देने के लिए apple-touch-icon format पेश किया।

Note:
  • बेहतरीन apple-touch-icon layout के लिए एक solid background के साथ 180x180 pixel PNG बनाएं।
  • Accepted attributes:
  • rel — apple-touch-icon
  • href — icon file का URL (PNG)
  • sizes — जैसे 180x180
Warning: standard favicons के विपरीत, mobile home screen icons में transparency नहीं होनी चाहिए, वरना वे black background distortions के साथ दिख सकते हैं।

उदाहरण: Apple Touch Icons for Mobile Devices

markup 
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Favicon Caching समस्याओं को प्रबंधित करना

network data बचाने के लिए वेब ब्राउज़र favicons को aggressively cache करते हैं। इसका मतलब है कि अगर आप अपने website logo icon को update करते हैं, तो users force browser refresh किए बिना हफ्तों तक पुराना version देखते रह सकते हैं।

Note: ब्राउज़रों को नया updated favicon लाने के लिए मजबूर करने के लिए अपने file paths पर query parameters का उपयोग करें।
Warning: same name के साथ बस एक नई image upload करने से returning visitors के लिए cached icons तुरंत clear नहीं होंगे।

उदाहरण: Managing Favicon Caching Issues

markup 
<link rel="icon" href="favicon.png?v=2">

PWA Manifest में Favicon Icons

जब किसी साइट को Progressive Web App के रूप में install किया जाता है, तो फोन की home screen पर दिखने वाले icons HTML head में favicon link tags से नहीं, बल्कि manifest.json के अंदर icons array से आते हैं।

ये manifest icons आमतौर पर एक सामान्य favicon से कहीं बड़े होते हैं, क्योंकि उन्हें पूरे home screen app icon के रूप में sharp दिखना होता है।

Note: अपने manifest में कम से कम एक 192x192 और एक 512x512 icon दें — ये दो sizes ज़्यादातर installed PWA home screen requirements को cover करते हैं।
Warning: अपनी छोटी 16x16 favicon file को अकेले manifest icon के रूप में reuse करने से जब यह एक full-size home screen app icon के रूप में display होगी तो यह बुरी तरह pixelated दिखेगी।

उदाहरण: Favicon Icons in the PWA Manifest

markup 
<link rel="manifest" href="manifest.json">
<!-- manifest.json icons array includes 192x192 and 512x512 sizes -->
Live Example
Related Topics

HTML Page Title · HTML Tables · HTML Lists · HTML Block & Inline

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Quotations Next Lesson → HTML Page Title

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.