उन्नत फ़ेविकॉन तकनीकें

डार्क मोड के अनुकूल ढलने वाला फ़ेविकॉन

सिर्फ़ SVG ब्राउज़र की थीम पर प्रतिक्रिया दे सकता है। SVG के अंदर ही prefers-color-scheme क्वेरी वाला एक <style> एम्बेड करें: ब्राउज़र आइकन रेंडर करते समय इसे लागू करता है। इस तरह एक गहरा लोगो गहरी टैब बार पर दृश्यमान बना रहता है:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="…your icon path…"/>
</svg>

इसे <link rel="icon" href="/icon.svg" type="image/svg+xml"> के रूप में संदर्भित करें। इसके साथ एक सामान्य favicon.ico रखें ब्राउज़र और Google Search के लिए, जो मीडिया क्वेरी नहीं चलाएँगे।

Safari की पिन की गई टैब आइकन

जब कोई डेस्कटॉप Safari में आपकी टैब पिन करता है, तो यह एक अलग, सपाट, एकल-रंग SVG («mask icon») का उपयोग करता है: सिर्फ़ आकार, कोई ग्रेडिएंट नहीं:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">

color गुण पिन का रंग तय करता है। इसके लिए अपने प्रतीक का एक मोनोक्रोम संस्करण निर्यात करें; कोई भी चीज़ जिसमें बारीक विवरण या कई रंग हों, एक ठोस धब्बे के रूप में रेंडर होगी।

Maskable आइकन और सुरक्षित क्षेत्र

Android की अनुकूली आइकन आपकी छवि को लॉन्चर के अनुसार एक वृत्त, स्क्विरकल या गोल वर्ग में क्रॉप करती हैं। एक सामान्य आइकन के कोने कट जाते हैं। मैनिफ़ेस्ट आइकन को maskable के रूप में चिह्नित करें और महत्वपूर्ण सामग्री को केंद्रीय «सुरक्षित क्षेत्र» के भीतर रखें: लगभग केंद्रीय 80%, यानी हर तरफ़ ~10% का मार्जिन:

{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
  "type": "image/png", "purpose": "any maskable" }

पूरी तरह किनारे तक जाते पृष्ठभूमि रंग के साथ डिज़ाइन करें और लोगो को उस मार्जिन के भीतर आराम से रखें, ताकि कोई आकार उसे न काटे।

theme-color: आइकन के चारों ओर की पट्टी

यह फ़ेविकॉन नहीं है, लेकिन मोबाइल पर यह ठीक उसके बगल में आता है: theme-color ब्राउज़र के इंटरफ़ेस और एड्रेस बार को रंगता है। यह भी थीम पर प्रतिक्रिया दे सकता है:

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

एक असली .ico में वास्तव में क्या होता है

एक उचित .ico एक कंटेनर है जो एक साथ कई बिटमैप रखता है, आमतौर पर 16, 32 और 48 पिक्सेल। ब्राउज़र हर सतह (टैब, बुकमार्क बार या Windows शॉर्टकट) के लिए ज़रूरी आकार चुनता है, इसलिए उसे कभी 16 px की छवि को बड़ा या 512 px की को छोटा नहीं करना पड़ता। एक «favicon.ico» जो वास्तव में एक ही नाम बदला हुआ PNG है, यह खो देता है और कुछ आकारों में धुंधला दिखता है। यह जनरेटर एक असली मल्टी-साइज़ ICO लिखता है।

Google Search के फ़ेविकॉन नियम

आपके आइकन को आपके परिणाम के बगल में दिखाने के लिए, Google निम्नलिखित सब कुछ माँगता है: फ़ेविकॉन एक स्थिर URL पर रहे; यह वर्गाकार हो और 48×48 का गुणज हो (48, 96, 144…); यह साइट के उसी होस्ट पर हो; उसे रखने वाला पेज अनुक्रमणीय हो; और आइकन दृश्य रूप से स्पष्ट हो। Google इसे अपने खुद के क्रॉलर से प्राप्त और कैश करता है, पेज से अलग, इसलिए बदलाव के बाद दिनों से हफ़्तों तक का समय दें और पुष्टि करें कि /favicon.ico Googlebot को 200 लौटाता है।

फ़ाइलें छोटी रखें

• SVG: एडिटर के मेटाडेटा और टिप्पणियाँ हटाएँ; एक साफ़ आइकन SVG आमतौर पर 1 KB से कम का होता है।
• ICO: सिर्फ़ 16/32/48; 64/128/256 जोड़ने के प्रलोभन का विरोध करें, जो बिना किसी लाभ के फ़ाइल को फुलाते हैं।
• PNG: 512 आइकन सबसे भारी है; इसे एक lossless ऑप्टिमाइज़र से गुज़ारें।

इसे वहाँ जाँचें जहाँ यह वाकई दिखता है

एक ही ब्राउज़र पर भरोसा न करें। जाँचें: एक सामान्य टैब (हल्की और गहरी), एक बुकमार्क, एक iOS «होम स्क्रीन पर जोड़ें», एक Android इंस्टॉल और Google का परिणाम जब वह दोबारा क्रॉल कर ले। परीक्षण करते समय साफ़ पठन बाध्य करने का एक त्वरित तरीका है एक निजी विंडो और आइकन URL में एक ?v= पैरामीटर।

← जनरेटर पर वापस जाएँ