2025 में Favicon कैसे तैयार करें

 (evilmartians.com)
50 पॉइंट द्वारा xguru 2025-02-13 | 4 टिप्पणियां | WhatsApp पर शेयर करें
  • favicon बनाने का तरीका जटिल होता गया है, इसलिए अक्सर सिर्फ browser tab या touchscreen पर वेबसाइट का लोगो दिखाने के लिए 20 से ज़्यादा PNG फाइलें इस्तेमाल की जाती हैं
  • इसके विकल्प के तौर पर, अपेक्षाकृत कम icon files और न्यूनतम settings के साथ ज़्यादातर environments को कवर करने का एक तरीका प्रस्तावित किया गया है

बहुत सरल संस्करण

  • जटिल setup के बिना सिर्फ पाँच मुख्य icons और एक JSON file पर्याप्त हैं

  • यह HTML में डालने के लिए basic link उदाहरण है

    <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"><!-- 180×180 -->

  • अगर आप PWA(Progressive Web App) support करते हैं, तो यह भी जोड़ें

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

  • यह manifest.webmanifest file structure का उदाहरण है

    {  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}

  • maskable icon में किनारों का कुछ हिस्सा कट सकता है, इसलिए 409×409 के circular area को safe zone रखना अच्छा है

  • सिर्फ इतनी configuration से भी प्रमुख browsers और ज़्यादातर devices में favicon ठीक से काम करता है

विस्तृत संस्करण

  • favicon, “favorite icon” से बना शब्द है, और यह browser tab आदि में दिखने वाला छोटा icon होता है
  • Safari भी अब हाल के समय में favicon को ठीक से support करता है
  • अलग-अलग resolutions के लिए icon sets बनाने के बजाय, SVG, कुछ PNG icons, और एक simple manifest से इसे कुशलता से संभाला जा सकता है

अंतिम Favicon विन्यास

  • एक SVG file, कुछ न्यूनतम PNG files, और web manifest file के ज़रिए अलग-अलग browsers और devices में icons को एकसमान तरीके से दिखाया जा सकता है
  • SVG एक vector format है, इसलिए ज़रूरत के अनुसार इसे आसानी से scale up या down किया जा सकता है, और background download होने से performance पर बोझ भी कम पड़ता है
  • PNG में सिर्फ ज़रूरी sizes ही तैयार करें, जैसे Apple के लिए apple-touch-icon और PWA के लिए icons
  • Windows tile icon, Safari Pinned Icon, rel=“shortcut” जैसे पुराने formats अब हाल के browsers में बहुत ज़रूरी नहीं रह गए हैं
  • पुराने browsers या tools कभी-कभी /favicon.ico path से सीधे icon लाते हैं, इसलिए root path पर favicon.ico अब भी महत्वपूर्ण है

Ultimate Favicon Set बनाने का तरीका

  • नीचे दिए गए चरण icons को सीधे बनाने और optimize करने की प्रक्रिया हैं
  • चरण 1: SVG तैयार करना
    • square ratio बनाए रखने वाली icon.svg file तैयार करनी होती है
    • <svg> के अंदर CSS media query के माध्यम से light·dark mode के लिए color switching लागू की जा सकती है
    • उदाहरण की तरह @media (prefers-color-scheme: dark) का उपयोग करके dark mode colors सेट किए जा सकते हैं
  • चरण 2: ICO file बनाना
    • icon.svg को 16×16 या 32×32 size की raster image में बदलकर favicon.ico बनाया जाता है
    • GIMP या Inkscape+ImageMagick जैसे tools इस्तेमाल किए जा सकते हैं
    • ध्यान रखें कि छोटे resolution में logo बहुत धुंधला या गड़बड़ न हो जाए
  • चरण 3: PNG images बनाना
    • 512×512, 192×192, 180×180, 512×512(maskable) sizes में PNG icons तैयार करें
    • iOS के लिए apple-touch-icon को 180×180 में बनाना अच्छा है, और background color जोड़ना या उचित padding देना उपयोगी हो सकता है
    • maskable icon में 409×409 area को safe zone रखना चाहिए
  • चरण 4: PNG और SVG optimize करना
    • SVG को SVGO जैसे tools से compress करें, और PNG को Squoosh से बेहतर compression दें
    • उपयोगकर्ता data-limited environment में हो सकते हैं, इसलिए file size कम रखना फ़ायदेमंद है
  • चरण 5: HTML में icons link करना
    • मूल रूप से favicon.ico, icon.svg, apple-touch-icon.png को <head> tag में link करें 
      <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">
    • अगर आप Webpack आदि इस्तेमाल करते हैं, तो build के समय hash शामिल करके cache manage कर सकते हैं
    • staging(development) environment और production environment को अलग दिखाने के लिए अलग favicon भी इस्तेमाल किया जा सकता है
  • चरण 6: Web Manifest बनाना
    • manifest.webmanifest file में PWA icon जानकारी डालें और <link rel="manifest" href="/manifest.webmanifest"> से link करें
    • नीचे का उदाहरण 192×192, 512×512(maskable), 512×512 icons को specify करता है 
      {  
  "name": "My website",  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}
    • Webpack environment में webpack-pwa-manifest जैसे plugin का उपयोग करके इसे automate किया जा सकता है
  • इस प्रक्रिया के बाद कम files के साथ भी ज़्यादातर browsers और devices में उपयुक्त favicon दिखाया जा सकता है
  • अगर automation tool बनाकर संचालित करें तो और अधिक सुविधाजनक होगा

संबंधित पढ़ाई

4 टिप्पणियां

 
carnoxen 2025-02-15

SVG Favicon अभी भी Firefox में सपोर्ट नहीं है...
 
carnoxen 2025-02-15

आह, वह Safari था
 
yeppyshiba 2025-02-13

मैंने अपनी पिछली कंपनी में किए गए एक प्रोजेक्ट में web game बनाया था.
यूँ ही मज़े के लिए Easter egg के तौर पर animated favicon बनाया,
और spritesheet से animation लागू किया तो वह काफ़ी बढ़िया लग रहा था।
 
xguru 2025-02-13

2021 के लिए Favicon गाइड
इसे 4 साल पहले एक बार पोस्ट किया था, और अब इसे आज के समय के मुताबिक अपडेट किया गया है.