SVG फ़ेविकॉन जेनरेटर - जिसमें SVG ही मुख्य आइकन है
ज़्यादातर फ़ेविकॉन जेनरेटर आपको PNG से भरा फ़ोल्डर और उन iOS संस्करणों के लिए एक दर्जन लिंक टैग थमा देते हैं जो सालों पहले बनना बंद हो चुके - और चुपचाप वही फ़ाइल छोड़ देते हैं जो आज की साइट पर सबसे ज़्यादा मायने रखती है। नतीजा एक साथ फूला हुआ भी है और अधूरा भी। आपकी SVG आपके पास मौजूद सबसे अच्छा फ़ेविकॉन है: एक वेक्टर फ़ाइल हर उस स्क्रीन घनत्व को संभाल लेती है जो कभी होगा, और आम तौर पर उस 32 पिक्सेल PNG से भी हल्की होती है जिससे लोग उसे बदल देते हैं। इसलिए यह पैकेज उसे favicon.svg के रूप में भेजता है और मार्कअप को सबसे पहले उसी पर लगाता है, ICO को ठीक नीचे सहारे के रूप में रखते हुए। PNG सब वहीं हैं उन जगहों के लिए जिन्हें उनकी ज़रूरत है, हर एक आपके वेक्टर से अपने ही माप पर बनाया गया, किसी बड़े रेंडर से छोटा किया हुआ नहीं। सब कुछ आपके ब्राउज़र में बनता है और कुछ अपलोड नहीं होता।
इस टूल का उपयोग कैसे करें
अपनी SVG छोड़ें
अपना लोगो या चिह्न ऊपर वाले बक्से पर खींचकर छोड़िए, 5 MB तक। वर्गाकार कलाकृति सबसे अच्छी रहती है - बाक़ी कुछ भी वर्गाकार खाँचे में बैठाया जाता है, और बची जगह पारदर्शी रहती है।
छोटे आकार जाँचें
झलक 16, 32 और 48 पिक्सेल असली आकार में दिखाती है, आपके वेक्टर से उसी रास्ते बनाकर जिससे पैकेज बनता है। अगर चिह्न यहाँ 16 पिक्सेल पर पढ़ा नहीं जा रहा, तो आपके आगंतुक अपने टैब में यही देखेंगे।
अपनी साइट का नाम दें
आप जो लिखेंगे वह site.webmanifest में नाम और छोटे नाम के रूप में जाएगा, और Android तथा डेस्कटॉप Chrome यही दिखाते हैं जब कोई आपकी साइट को होम स्क्रीन पर लगाता है। ख़ाली छोड़ेंगे तो मैनिफ़ेस्ट में बाद में बदलने लायक एक तटस्थ प्लेसहोल्डर चला जाएगा।
पैकेज बनाएँ और डाउनलोड करें
“फ़ेविकॉन पैकेज बनाएँ” दबाइए। आपका चित्र 16, 32, 48, 180, 192 और 512 पिक्सेल पर बनता है, इनमें से तीन favicon.ico में जाते हैं, और सब कुछ मैनिफ़ेस्ट और README के साथ ज़िप हो जाता है।
चारों टैग कॉपी करें
सब कुछ अपनी साइट की मूल निर्देशिका में खोलिए, फिर डाउनलोड बटन के पास दिखने वाले चारों लिंक टैग अपने <head> में चिपका दीजिए। पूरी स्थापना बस इतनी है - कोई बिल्ड चरण नहीं, कोई अतिरिक्त सेटिंग नहीं।
अक्सर पूछे जाने वाले प्रश्न
ZIP में ठीक-ठीक क्या है?
सात फ़ाइलें: favicon.svg, यानी आपकी मूल कलाकृति, साथ में 16, 32 और 48 पिक्सेल वाली favicon.ico, 180 पर apple-touch-icon.png, Android और इंस्टॉल होने वाले ऐप्स के लिए icon-192.png और icon-512.png, site.webmanifest, और टैग दोहराने वाली एक README। जिस भी फ़ाइल की ओर स्निपेट इशारा करता है वह संग्रह में मौजूद है।
SVG को ICO से पहले क्यों रखा गया है?
क्योंकि वह बेहतर आइकन है और ब्राउज़र वही आख़िरी प्रारूप चुनते हैं जिसे वे समझते हैं। एक वेक्टर फ़ाइल हर मौजूदा स्क्रीन घनत्व पर तीखी रहती है, उसे आकार के अलग रूप नहीं चाहिए, और वह अक्सर 32 पिक्सेल PNG से भी हल्की होती है। जो ब्राउज़र उसे नहीं संभाल सकते वे बस अगली पंक्ति की ICO पर उतर आते हैं।
क्या सचमुच सिर्फ़ चार टैग चाहिए?
हाँ, आज बनने वाली किसी भी साइट पर। apple-touch-icon-precomposed के जो लंबे रूप जेनरेटर आज भी उगलते हैं वे iOS 6 और उससे पुराने को निशाना बनाते हैं। मौजूदा iOS एक ही apple-touch-icon पढ़ता है, Android मैनिफ़ेस्ट पढ़ता है, और बाक़ी सब आइकन लिंक पढ़ते हैं। चार टैग यह सब संभाल लेते हैं।
क्या मेरा फ़ेविकॉन डार्क मोड के साथ बदल सकता है?
सिर्फ़ SVG ऐसा कर सकती है, और यह भी उसे पहले रखने की एक वजह है। SVG के भीतर ही मीडिया क्वेरी डाल दीजिए - किसी भराई पर prefers-color-scheme नियम - और ब्राउज़र उसे टैब में तुरंत लागू करेगा। ICO और PNG ठहरी हुई छवियाँ हैं और उन्हीं रंगों में रहेंगी जिनमें बनी थीं।
छोटे आकार अलग से क्यों बनाए जाते हैं?
क्योंकि बड़े रेंडर को छोटा करने पर ठीक वही बारीकी चली जाती है जिस पर छोटे आइकन टिके होते हैं। पिक्सेल-आर्ट चिह्न पर 16 × 16 पर मापा गया: वेक्टर से बनाने पर 141 ठोस पिक्सेल और एक भी आधा-पारदर्शी नहीं, जबकि वही कलाकृति 512 से छोटी करने पर 98 ठोस और 64 धुँधले। यानी 40% स्याही लुगदी बन गई।
मेरे सर्वर पर ये फ़ाइलें कहाँ जाएँगी?
सब साइट की जड़ में, index.html के साथ, ताकि वे /favicon.svg, /favicon.ico वग़ैरह पर मिलें। स्निपेट में रास्ते स्लैश से इसीलिए शुरू होते हैं। अगर आपका फ़्रेमवर्क स्थैतिक फ़ाइलें public या static फ़ोल्डर से देता है तो उन्हें वहाँ रखिए, URL वही रहेंगे।
नया फ़ेविकॉन चढ़ाने के बाद भी वही पुराना दिख रहा है।
ब्राउज़र फ़ेविकॉन को लगभग हर चीज़ से ज़्यादा ज़िद से कैश करते हैं और अक्सर सामान्य रीलोड को अनदेखा कर देते हैं। आइकन का URL सीधे खोलकर रीलोड कीजिए, या निजी विंडो में जाँचिए। यह लगभग हमेशा कैश होता है, टूटी फ़ाइल नहीं, इसलिए और कुछ बदलने से पहले पक्का कर लीजिए कि URL लोड होता है।
मेरी स्रोत SVG कितनी बड़ी होनी चाहिए?
viewBox का आकार लगभग मायने नहीं रखता, क्योंकि सब कुछ ज्यामिति से दोबारा बनता है - पर वर्गाकार अनुपात ज़रूर मायने रखता है। चिह्न पहले इस तरह बनाइए कि वह 16 पिक्सेल पर पढ़ा जाए, फिर वहीं से बड़ा कीजिए। जो लोगो विज़िटिंग कार्ड पर चलता है उसमें अक्सर ब्राउज़र टैब में बचने के लिए कहीं ज़्यादा बारीकी होती है।
क्या मुझे ICO की ज़रूरत भी है?
रखिए। वह कुछ किलोबाइट की है और उन जगहों को संभालती है जिन्हें कोई जाँचता नहीं: Windows डेस्कटॉप शॉर्टकट, RSS और पॉडकास्ट रीडर, पुराने चैट क्लाइंट में लिंक की झलकियाँ, और डेस्कटॉप ऐप्स के भीतर अंतर्निहित ब्राउज़र। इनमें से ज़्यादातर परंपरा के मुताबिक़ /favicon.ico माँगते हैं और आपका मार्कअप जो कहे उसे अनदेखा कर देते हैं।
पैकेज बनाने के लिए क्या कुछ अपलोड होता है?
नहीं। हर रेंडर, ICO की पैकिंग और ZIP सब आपके ब्राउज़र में बनते हैं। आपका लोगो कभी किसी सर्वर तक नहीं पहुँचता, जिसका मतलब यह भी है कि पैकेज कतार के बाद नहीं, क्लिक करते ही तैयार होता है, और आपकी कलाकृति की कोई नक़ल कहीं पीछे नहीं छूटती।
आपको इनकी भी ज़रूरत हो सकती है
कुछ काम नहीं कर रहा? बग रिपोर्ट करें