कस्टम सफारी बुकमार्क आइकन और टच बार

Question

मैकबुक प्रो 13 और 15 "लैपटॉप में कीबोर्ड पर एक टच बार (इंटरैक्टिव डिस्प्ले) है। सफारी का उपयोग करते समय सभी बुकमार्क टच बार पर प्रदर्शित होते हैं। कुछ वेबसाइटें (जैसे फेसबुक) टच बार पर एक कस्टम पृष्ठभूमि रंग के साथ एक कस्टम आइकन दिखाएं। मैं इसे वेब डेवलपर के रूप में कैसे कर सकता हूं?

क्या मुझे एक विशेष फेविकॉन का उपयोग करने की आवश्यकता है, या विशेष HTML मेटा टैग का उपयोग करने की आवश्यकता है (जैसे og: image) एक विशिष्ट छवि प्रारूप में

बुकमार्क टच बार पर उदाहरण:

Answer 1

मुझे एक सप्ताह के बाद मेरे प्रश्न का उत्तर मिला है। उम्मीद है कि यह किसी की मदद करता है।

सबसे पहले, आपको अपनी वेबसाइट पर अपने लोगो की एक विशेष वेक्टर छवि बनाने और अपलोड करने की आवश्यकता है। एक पारदर्शी पृष्ठभूमि के साथ वेक्टर छवि 100% काला होना चाहिए। फिर आपको अपनी वेबसाइट पर "मास्क-आइकन" मेटाटैग जोड़ने की आवश्यकता है। आप इस एचटीएमएल टैग में अपनी छवि के लिए एक रंग सेट कर सकते हैं। इस छवि का उपयोग टच बार और पिन किए गए टैब के लिए भी किया जाता है।

मुखौटा आइकन एचटीएमएल टैग:

<link rel="mask-icon" href="website_icon.svg" color="#121212"> 

चेक बाहर एप्पल डेवलपर दस्तावेज़: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html