इमेज को आइकन और फेविकॉन में कन्वर्ट करें
एक इमेज चुनें और हम उससे एक पूरा आइकन सेट बनाते हैं: अंदर छह साइज़ वाली एक favicon.ico, साथ ही हर उस साइज़ की PNG आइकन जो ब्राउज़र और ऑपरेटिंग सिस्टम मांगते हैं।
इसका इस्तेमाल कैसे करें
- 1
एक इमेज चुनें — आदर्श रूप से पारदर्शी बैकग्राउंड वाली एक स्क्वायर PNG।
- 2
फिट मोड और जो साइज़ चाहिए वे चुनें।
- 3
डाउनलोड करने से पहले हर साइज़ का पूर्वावलोकन करें।
- 4
अकेले favicon.ico डाउनलोड करें, या PNG आइकन और मैनिफेस्ट के साथ पूरा पैक।
एक इमेज क्यों काफी नहीं है
ब्राउज़र को टैब के लिए 16 और 32 पिक्सेल चाहिए, iOS को होम स्क्रीन के लिए 180, और Android को मैनिफेस्ट के लिए 192 और 512। एक बड़ी इमेज सौंप देने पर हर डिवाइस उसे खुद छोटा करता है, जो छोटे साइज़ पर धुंधला दिखता है, इसलिए हम हर साइज़ को हाई-क्वालिटी स्मूदिंग के साथ अलग-अलग रेंडर करते हैं।
ICO फाइल क्या होती है
एक ही फाइल में अलग-अलग साइज़ की कई इमेज होती हैं, जिनमें से सिस्टम हर जगह के लिए जो फिट बैठे उसे चुन लेता है। हम इसमें 16, 32, 48, 64, 128 और 256 पिक्सेल डालते हैं — जितना ब्राउज़र और Windows को मिलाकर चाहिए।
पूरा फिट करें या भरें और क्रॉप करें?
आइकन स्क्वायर होते हैं और आपकी इमेज आमतौर पर नहीं होती। पूरा फिट करें पूरी इमेज रखता है और पारदर्शी पैडिंग जोड़ता है, जो लोगो के लिए उपयुक्त है। भरें और क्रॉप करें स्क्वायर को भरता है और किनारे काट देता है, जो फोटोग्राफ के लिए उपयुक्त है।
सामान्य प्रश्न
- favicon.ico और PNG आइकन में क्या फर्क है?
- ICO में कई साइज़ एक साथ होते हैं और हर ब्राउज़र, पुराने भी, इसे समझता है। अलग PNG आइकन वे हैं जो iOS, Android और वेब मैनिफेस्ट मांगते हैं। पूरा पैक आपको दोनों देता है।
- फाइलें कहां रखनी हैं?
- अपनी साइट के रूट में, फिर टूल के नीचे दिखाए गए link टैग को अपने पेजों के head में जोड़ें।
- एक अच्छी सोर्स इमेज कैसी होनी चाहिए?
- पारदर्शी बैकग्राउंड वाली एक स्क्वायर इमेज, 512 पिक्सेल या उससे बड़ी। सरल लोगो, विस्तृत आर्टवर्क की तुलना में 16 पिक्सेल पर कहीं बेहतर दिखते हैं।
- क्या पारदर्शिता बनी रहती है?
- हां। हर साइज़ PNG के रूप में जनरेट होता है, ICO के अंदर और बाहर दोनों जगह, और PNG पूरी तरह पारदर्शिता सपोर्ट करता है।
- क्या SVG सपोर्टेड है?
- हां, और यह सबसे अच्छा संभव सोर्स है — इसे हर आइकन के सटीक साइज़ पर बनाया जाता है, इसलिए नतीजा बिल्कुल शार्प होता है।
- iOS आइकन का साइज़ क्या है?
- 180 पिक्सेल, apple-touch-icon टैग के लिए। यह साइज़ सूची में डिफॉल्ट रूप से चुना हुआ रहता है।
- क्या मेरी इमेज किसी सर्वर पर अपलोड होती है?
- नहीं। जनरेशन पूरी तरह आपके ब्राउज़र में होता है, और ICO फाइल खुद पेज पर बाइट-बाई-बाइट बनाई जाती है।
- site.webmanifest क्या है?
- एक फाइल जो Android को बताती है कि किसी के आपकी साइट को होम स्क्रीन पर जोड़ने पर कौन से आइकन इस्तेमाल करने हैं। हम इसे पैक के अंदर तैयार जनरेट करते हैं।