फेविकॉन जनरेटर

एक लोगो से पूरा फेविकॉन सेट बनाएं: हर साइज की PNG, कई साइज वाली ICO, मैनिफेस्ट और head में पेस्ट करने के लिए HTML टैग।

फाइलें यहां छोड़ें

.png, .jpg, .jpeg, .webp, .svg · 20 MB तक

फाइलें चुनें

फेविकॉन कैसे बनाएं

1
अपना लोगो जोड़ें
PNG, JPG, WebP या SVG, 20 MB तक। चौकोर फाइल सबसे अच्छा काम करती है, पर कोई भी आकार चल जाता है।
2
चुनें कि वह चौकोर में कैसे फिट हो
बीच से चौकोर में क्रॉप करें, या पूरी तस्वीर फिट करें और किनारों को अपने चुने रंग से भरें।
3
आइकन सेट ZIP में डाउनलोड करें
आठ फाइलें, या Android के मास्केबल आइकन के साथ नौ: ICO, चार PNG साइज, मैनिफेस्ट और head का तैयार कोड।

आर्काइव में क्या है, और हर फाइल क्यों है

favicon.ico एक ही कंटेनर में 16, 32 और 48 पिक्सल की तीन इमेज रखती है, और ब्राउजर आज भी साइट के रूट पर इसे ही मांगते हैं। icon-16.png और icon-32.png इनके आधुनिक रूप हैं। इनका जिक्र साफ-साफ किया जाता है, ताकि PNG पसंद करने वाले ब्राउजर को ICO खोलनी ही न पड़े। 180 पिक्सल की apple-touch-icon.png वह फाइल है जिसे iOS तब इस्तेमाल करता है, जब कोई आपकी साइट को होम स्क्रीन पर जोड़ता है। icon-192.png और icon-512.png वे दो साइज हैं जिन्हें प्रोग्रेसिव वेब ऐप के मैनिफेस्ट में लिखना जरूरी है। manifest.json इन आखिरी दो को आपके ऐप के नाम और थीम के रंग से जोड़ती है। head-snippet.html में link और meta टैग का वह सटीक हिस्सा है जिसे आपके पेज में पेस्ट करना है, ताकि attribute के नाम या फाइलों के पाथ का अंदाजा न लगाना पड़े।

apple-touch-icon में पारदर्शिता कभी क्यों नहीं रहती

iOS पारदर्शी होम स्क्रीन आइकन को किसी ठीक-ठाक चीज के ऊपर नहीं रखता। वह खाली जगहों को काले रंग से भर देता है, जिससे साफ-सुथरा लोगो एक गहरे रंग की टाइल बन जाता है। इसलिए उस एक फाइल का अल्फा चैनल हमेशा फ्लैट किया जाता है: आपके चुने बैकग्राउंड रंग पर, या अगर आपने बैकग्राउंड पारदर्शी छोड़ा है तो सफेद पर। बाकी हर साइज में पारदर्शिता रहती है, जब आपकी फाइल में वह है और आपने उसे चुना है, क्योंकि ब्राउजर टैब या डेस्कटॉप शॉर्टकट पर ठीक यही चाहिए। अगर आप बैकग्राउंड रंग चुनते हैं, तो वह सभी साइज पर एक जैसा लगता है, ताकि पूरा सेट एक जैसा रहे।

वेक्टर से शुरू, तीखा परिणाम

जब फाइल SVG है, तो हर साइज एक बड़े बिटमैप को छोटा करके नहीं, सीधे वेक्टर से बनाया जाता है। यह सबसे ज्यादा 16 पिक्सल पर मायने रखता है, जहां छोटा किया गया लोगो धुंधला धब्बा बन जाता है और नए सिरे से बना लोगो अपनी लकीरें बनाए रखता है। SVG फाइलों को बनाने से पहले साफ किया जाता है: स्क्रिप्ट, इवेंट हैंडलर और किसी बाहरी सर्वर का हर हवाला हटा दिया जाता है, ठीक वैसे जैसे हमारा “SVG को PNG में कन्वर्ट करें” टूल करता है। रास्टर फाइल पहले चौकोर बनाई जाती है, फिर Lanczos फिल्टर से रीसैंपल की जाती है, जो आर्टवर्क छोटा करने के व्यावहारिक विकल्पों में सबसे तीखा है।

आपका लोगो आपके डिवाइस पर ही रहता है

डिकोडिंग, रिसाइज, PNG एनकोडिंग, ICO कंटेनर और ZIP, सब इसी ब्राउजर टैब के अंदर बनते हैं। कुछ भी अपलोड नहीं होता, और ऐसे ब्रांड मार्क के लिए यह मायने रखता है जो अभी सामने नहीं आया। ज्यादातर ऑनलाइन फेविकॉन जनरेटर कुछ भी लौटाने से पहले आपके लोगो की कॉपी अपने सर्वर पर ले जाते हैं।

अक्सर पूछे जाने वाले सवाल

सेट में कौन-से साइज हैं?

PNG फाइलों के रूप में 16, 32, 180, 192 और 512 पिक्सल, साथ में एक favicon.ico जिसमें एक ही फाइल में 16, 32 और 48 हैं। 48 पिक्सल वाला वर्जन सिर्फ ICO के अंदर है, जहां Windows इसे बड़े शॉर्टकट व्यू के लिए इस्तेमाल करता है। यह अलग PNG के रूप में नहीं दिया जाता, क्योंकि वेब पर कोई इसे नहीं मांगता।

apple-touch-icon में पारदर्शिता क्यों नहीं है?

क्योंकि iOS होम स्क्रीन आइकन के पारदर्शी हिस्सों को काला दिखाता है। इसे यहां फ्लैट करने से, आपके बैकग्राउंड रंग पर या पारदर्शिता रखने पर सफेद पर, आइकन वैसा दिखता है जैसा आपने उसे डिजाइन किया है, गहरे चौकोर में बैठा हुआ नहीं। यही एक फाइल है जिसका फैसला आपके लिए पहले से कर दिया गया है।

मास्केबल आइकन क्या है?

Android ऐप आइकन को डिवाइस के चुने आकार में काटता है: सर्कल, स्क्वरकल या गोल कोनों वाला चौकोर। मास्केबल आइकन अपनी पूरी सामग्री बीच के 80% हिस्से में रखता है, ताकि कोई भी आकार लगे, कुछ अहम न कटे। विकल्प चालू करें, तो आपको icon-512-maskable.png मिलती है, साथ में मैनिफेस्ट में तीसरी एंट्री, जिस पर purpose "maskable" लिखा होता है।

क्या मुझे manifest.json चाहिए?

सिर्फ तब, जब आप चाहते हैं कि आपकी साइट प्रोग्रेसिव वेब ऐप के रूप में इंस्टॉल हो सके, या Android पर ब्राउजर के ऊपरी हिस्से का रंग आपके हाथ में रहे। इसकी कीमत एक फाइल और एक link टैग है, और अगर आप ये फीचर कभी इस्तेमाल न करें तो भी इससे कोई नुकसान नहीं। इसलिए यह डिफॉल्ट रूप से शामिल है, आपके ऐप के नाम और थीम के रंग के साथ भरा हुआ।

क्या SVG से शुरू कर सकते हैं?

हां, और इससे सबसे अच्छा परिणाम मिलता है। हर साइज एक बिटमैप से रीसैंपल होने की जगह वेक्टर से अपने रिजॉल्यूशन पर बनाया जाता है, इसलिए छोटे साइज भी पढ़ने लायक रहते हैं। SVG को पहले साफ किया जाता है: बनाने से पहले स्क्रिप्ट, इवेंट हैंडलर और हर बाहरी हवाला हटा दिया जाता है।

बने हुए टैग कहां लगाने हैं?

अपने पेजों के head एलिमेंट के अंदर। PNG, ICO और मैनिफेस्ट फाइलें आपकी साइट के रूट पर जाती हैं, ताकि कोड में लिखे पाथ सही जगह पहुंचें। अगर आप इन्हें किसी सबफोल्डर से देते हैं, तो head-snippet.html में href की वैल्यू उसी के हिसाब से बदलें।

मेरा आइकन धुंधला क्यों दिखता है?

लगभग हमेशा इसलिए कि मूल फाइल छोटी है। सब कुछ 512 पिक्सल की मास्टर इमेज से बनता है, इसलिए लगभग 260 पिक्सल से छोटी फाइल को वहां तक खींचना पड़ता है और सबसे बड़े साइज नरम दिखते हैं। कम से कम 512×512 से, या SVG से शुरू करें, तो पूरा सेट तीखा आता है। 32 पिक्सल से छोटी फाइल सीधे मना कर दी जाती है, क्योंकि उसमें काम करने लायक कुछ नहीं होता।

क्या लोगो किसी सर्वर पर अपलोड होता है?

नहीं। इमेज आपके ब्राउजर से बाहर नहीं जाती: वह यहीं डिकोड, रिसाइज और एनकोड होती है, ICO में पैक होती है और ZIP बनती है, और आर्काइव आपको मेमोरी से ही दिया जाता है।

गाइड

ऐसा फेविकॉन कैसे बनाएं जो Retina स्क्रीन पर धुंधला न दिखेकभी पूरे वेब के लिए एक छोटी favicon.ico काफी थी। कई साल से ऐसा नहीं है, और उसे अब भी काफी मान लेना ही वजह है कि इतने सारे आइकन धुंधले दिखते हैं।