Safari Pinned Tab Icon (mask-icon)
macOS पर Safari pinned tabs के लिए एक समर्पित आइकन इस्तेमाल करता है, जिसे <link rel="mask-icon" href="..." color="#..."> से घोषित किया जाता है। फ़ाइल एक single-colour SVG है जो transparent background पर ठोस काली आकृतियों से बनी होती है, और Safari इसे color attribute का उपयोग करके फिर से रँगता है। यह आपके सामान्य favicon से अलग है और सिर्फ़ desktop Safari में pinned tabs को प्रभावित करता है।
एक monochrome SVG, Safari द्वारा फिर से रँगा गया
mask-icon एक सामान्य रंगीन graphic नहीं है। Safari इसे एक mask मानता है: आप transparent background पर ठोस काली आकृतियाँ देते हैं, और वह उन्हें tag के color attribute के रंग से भरता है — pinned होने पर एक रंग, hover पर दूसरा। Gradients, कई रंग, और strokes सब सपाट कर दिए जाते हैं, इसलिए artwork को एक ही silhouette की तरह पढ़ा जाना चाहिए।
यह सिर्फ़ desktop Safari में pinned tabs चलाता है। नए Safari संस्करण आपके नियमित SVG या PNG favicon पर भी fall back करते हैं, यही वजह है कि कई साइटें अब एक अलग mask-icon नहीं भेजतीं।
इसे घोषित करना
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />color attribute वही है जिससे Safari tab के pinned होने पर काली आकृतियों को रँगता है।
Safari pinned tab FAQ
क्या मुझे अब भी mask-icon चाहिए?
शायद ही। आधुनिक Safari pinned tabs के लिए आपके SVG या PNG favicon पर fall back करता है, इसलिए एक अलग mask-icon अब ज़रूरत के बजाय एक सुविधा है।
मेरा pinned tab आइकन एक ठोस धब्बा क्यों है?
क्योंकि Safari mask-icon को एक single silhouette में सपाट कर देता है और उसे color attribute से भर देता है। रंग या gradient द्वारा ढोई गई कोई भी डिटेल खो जाती है। आकृतियाँ ख़ुद ही mark को परिभाषित करें।
pinned tab आइकन को किस format की ज़रूरत है?
transparent background पर ठोस काले paths वाला एक SVG। PNG नहीं, और multi-colour SVG नहीं। Safari सिर्फ़ ज्यामिति का उपयोग करता है और अपना रंग लगाता है।