फ़ेविकॉन जनरेटर
एक ही इमेज से फ़ेविकॉन के सभी साइज़ बनाएँ।
अपना लोगो यहाँ छोड़ें या चुनने के लिए क्लिक करें
PNG, SVG, JPG, WebP या ICO। 512 × 512 px या उससे बड़ा स्क्वेयर लोगो सबसे अच्छा रहता है। फ़ाइलें आपके ब्राउज़र में ही प्रोसेस होती हैं और कभी अपलोड नहीं होतीं। जब तक आप इन्हें हटाते नहीं, ये इसी ब्राउज़र में रहती हैं।
Ctrl+OचुनेंCtrl+Vपेस्ट करें
फ़ेविकॉन वह छोटा आइकन है जो ब्राउज़र टैब और बुकमार्क में दिखाते हैं; जब कोई आपकी साइट को होम स्क्रीन पर जोड़ता है, तो फ़ोन उसके बड़े वर्शन इस्तेमाल करते हैं। एक लोगो छोड़ें और यह जनरेटर वेबसाइट की ज़रूरत की हर फ़ाइल बनाता है — favicon.ico, PNG फ़ेविकॉन, Apple touch आइकन, Android आइकन और वेब मैनिफ़ेस्ट — लाइव प्रीव्यू और आपके पेज में पेस्ट करने लायक HTML के साथ। यह आपके ब्राउज़र में चलता है, इसलिए आपका लोगो कभी आपके डिवाइस से बाहर नहीं जाता; यह मुफ़्त है और साइन-अप की ज़रूरत नहीं।
फ़ेविकॉन कैसे बनाएँ
- अपना लोगो (PNG, SVG, JPG या WebP) पेज पर कहीं भी छोड़ें, Ctrl+V से पेस्ट करें, या क्लिक करके चुनें। किसी दूसरे इमेज टूल में जोड़ी गई इमेज पहले से सूची में है, जैसी आपने उसे वहाँ छोड़ा था: इस्तेमाल करने के लिए उसके थंबनेल पर क्लिक करें। सैंपल लोगो से आप बिना फ़ाइल के भी इसे आज़मा सकते हैं।
- लोगो अपने-आप फ़्रेम हो जाता है: चौड़े लोगो का निशान (मार्क), या ख़ाली किनारों के बिना लोगो। बदलने के लिए लोगो पर स्क्वेयर खींचें, या “पूरा लोगो” चुनें। बैकग्राउंड (आपके लोगो के अपने रंग पहले आते हैं), पैडिंग और आकार चुनें; प्रीव्यू साथ-साथ अपडेट होते हैं।
- “सभी डाउनलोड करें (ZIP)” पर क्लिक करें, फ़ाइलें अपनी साइट के रूट फ़ोल्डर में रखें, फिर “HTML कॉपी करें” पर क्लिक करके टैग अपने पेज के <head> में पेस्ट करें।
सुविधाएँ
- 16, 32 और 48 px आइकन वाला favicon.ico, साथ में 16 और 32 px के PNG फ़ेविकॉन
- apple-touch-icon.png (180 px) और Android Chrome आइकन (192 और 512 px)
- आपके ऐप के नाम और थीम रंग के साथ site.webmanifest, और आपके <head> के लिए HTML टैग
- चौड़े लोगो का निशान अपने-आप ढूँढता है; कोई और हिस्सा लेने के लिए स्क्वेयर खींचें, या पूरा लोगो फ़िट करें
- बैकग्राउंड: पारदर्शी, आपके लोगो के अपने रंग या कोई भी रंग; 0 से 30% तक पैडिंग; स्क्वेयर, गोल कोनों वाला या गोल आकार
- हर साइज़, ब्राउज़र टैब और होम स्क्रीन के लाइव प्रीव्यू, लाइट और डार्क में
- PNG, SVG, JPG, WebP या ICO से शुरुआत; हर फ़ाइल एक ZIP में
क्या यह निजी है?
हाँ। आइकन आपके ब्राउज़र में एक WebAssembly इमेज इंजन बनाता है; आपका लोगो और फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं। लोगो इस ब्राउज़र में तब तक रहता है जब तक आप उसे सूची से हटा न दें।
अक्सर पूछे जाने वाले सवाल
मुझे फ़ेविकॉन के कौन-से साइज़ चाहिए?
चार फ़ाइलें लगभग सब कुछ कवर कर लेती हैं: ब्राउज़र टैब, बुकमार्क और Windows शॉर्टकट के लिए 16, 32 और 48 px वाला favicon.ico; iPhone और iPad की होम स्क्रीन के लिए 180 px का apple-touch-icon.png; और Android और इंस्टॉल होने वाले वेब ऐप के लिए site.webmanifest में दर्ज 192 और 512 px के PNG। ZIP में ये सब हैं, साथ में उन ब्राउज़रों के लिए 16 और 32 px के PNG जो PNG पसंद करते हैं।
फ़ेविकॉन को अपने HTML में कैसे जोड़ें?
फ़ाइलें अपनी साइट के रूट फ़ोल्डर में रखें, ताकि /favicon.ico खुले, फिर “HTML कॉपी करें” पर क्लिक करके टैग हर पेज के <head> में पेस्ट करें। ब्राउज़र बिना किसी टैग के भी /favicon.ico ढूँढते हैं; टैग PNG साइज़, Apple आइकन और मैनिफ़ेस्ट जोड़ते हैं।
apple-touch-icon.png में बैकग्राउंड क्यों है?
क्योंकि iPhone और iPad पारदर्शी पिक्सेल को काला दिखाते हैं और कोने ख़ुद गोल करते हैं, इसलिए Apple आइकन हमेशा एक पूरा, अपारदर्शी स्क्वेयर होता है: आपका बैकग्राउंड रंग, या बैकग्राउंड पारदर्शी हो तो सफ़ेद। बाकी आइकन अपनी पारदर्शिता और आकार रखते हैं।
क्या SVG लोगो इस्तेमाल कर सकते हैं?
हाँ। आपका ब्राउज़र SVG को उसके अपने साइज़ पर बनाता है, या छोटी हो तो 1024 px पर, और हर आइकन उसी से बनता है। जो SVG दूसरी फ़ाइलों (इमेज, फ़ॉन्ट या स्टाइलशीट) से लिंक करती है, उसे इमेज के रूप में पूरा नहीं बनाया जा सकता, इसलिए अधूरे आइकन बनाने के बजाय टूल यह बता देता है; पहले उसे PNG के रूप में एक्सपोर्ट करें, या उसकी इमेज उसी के अंदर एम्बेड करें।
मैंने फ़ेविकॉन बदल दिया, पर ब्राउज़र अब भी पुराना दिखाता है। क्यों?
ब्राउज़र फ़ेविकॉन को लंबे समय तक कैश में रखते हैं। नया आइकन देखने के लिए पेज को Ctrl+F5 (Mac पर Cmd+Shift+R) से रीलोड करें, या साइट को प्राइवेट विंडो में खोलें।