यह टूल क्या करता है
फ़ेविकॉन जनरेटर किसी अक्षर, इमोजी या आपके लोगो को वे सभी आइकन बना देता है जिनकी एक मॉडर्न वेबसाइट को ज़रूरत होती है। यह हर साइज़ पर आइकन रेंडर करता है, favicon.ico पैक करता है, web app manifest लिखता है, और आपके पेज के <head> में पेस्ट करने के लिए <link> टैग देता है। सब कुछ एक ZIP में डाउनलोड करें।
साफ़ आइकन पाने का सबसे तेज़ तरीका टेक्स्ट से शुरू करना है: एक से तीन कैरेक्टर या कोई इमोजी टाइप करें, रंग, फ़ॉन्ट और आकार (चौकोर, गोल कोने या गोला) चुनें। टेक्स्ट आइकन को एक स्केलेबल favicon.svg भी मिलता है, जो हर साइज़ पर और हाई-डेंसिटी स्क्रीन पर शार्प रहता है।
इसे कैसे इस्तेमाल करें
- सोर्स के रूप में टेक्स्ट या इमेज चुनें। इमेज के लिए, इमेज चुनें… दबाएँ और एक चौकोर PNG, SVG या JPG चुनें।
- आकार सेट करें, और आइकन को रंगीन टाइल पर रखने के लिए बैकग्राउंड भरें चालू करें, या पारदर्शी रखने के लिए बंद करें।
- अपना साइट का नाम डालें: जब कोई आपकी साइट को फ़ोन की होम स्क्रीन पर जोड़ता है, तो आइकन के नीचे यही नाम दिखता है; यह
site.webmanifest(Android) औरapple-mobile-web-app-titleटैग (iOS) में लिखा जाता है। फिर वह आइकन फ़ोल्डर सेट करें जहाँ आप फ़ाइलें अपलोड करेंगे, आम तौर पर/। - प्रीव्यू देखें: ब्राउज़र टैब में लोगों को 16 px वाला आइकन दिखता है।
- ZIP डाउनलोड करें दबाएँ, फ़ाइलें अपनी साइट पर अपलोड करें, और HTML को
<head>में पेस्ट करें।
उदाहरण
डिफ़ॉल्ट सेटिंग्स ये टैग बनाती हैं:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">सुझाव
- ब्राउज़र फ़ेविकॉन को बहुत ज़्यादा कैश करते हैं। आइकन बदलने के बाद बदलाव देखने के लिए पेज को प्राइवेट विंडो में खोलें।
- iOS, Apple touch icon में पारदर्शिता को अनदेखा करके उसे काले रंग से भर देता है, इसलिए होम-स्क्रीन पर साफ़ आइकन के लिए बैकग्राउंड भरा रखें।
अक्सर पूछे जाने वाले सवाल
› मुझे कौन-सी फ़ाइलें मिलती हैं?
favicon.ico (16, 32 और 48 px), 16, 32 और 48 px के PNG आइकन, 180 px का Apple touch icon, 192 और 512 px के Android आइकन, site.webmanifest, HTML टैग, और टेक्स्ट से शुरू करने पर favicon.svg।
› क्या मेरा लोगो कहीं अपलोड होता है?
नहीं। इमेज आपके ब्राउज़र में canvas से पढ़ी और रीसाइज़ की जाती है; ZIP भी आपके डिवाइस पर ही बनता है।
› कौन-सी इमेज सबसे अच्छी रहती है?
कम से कम 512 × 512 px की चौकोर PNG या SVG, पारदर्शी बैकग्राउंड के साथ। सरल, मोटे आकार 16 px पर भी पढ़ने लायक रहते हैं; बारीक डिटेल और पतला टेक्स्ट नहीं।
› क्या मुझे अब भी favicon.ico चाहिए?
हाँ, पुराने ब्राउज़र्स और उन टूल्स के लिए जो सीधे /favicon.ico माँगते हैं। मॉडर्न ब्राउज़र HTML में दिए PNG या SVG लिंक इस्तेमाल करते हैं।