Favicon जनरेटर
एक छवि आयात करें और सभी मानक फ़ेविकॉन आकार PNG में उत्पन्न करें।
यहाँ एक छवि खींचें और छोड़ें, या चुनने के लिए क्लिक करें
वर्गाकार छवियाँ सर्वोत्तम परिणाम देती हैं (PNG, JPG, SVG)
फ़ेविकॉन आकारों की व्याख्या
16×16 · मानक ब्राउज़र टैब फ़ेविकॉन
32×32 · Retina टैब, टास्कबार शॉर्टकट
48×48 · Windows साइट शॉर्टकट
180×180 · Apple Touch आइकॉन (iOS होम स्क्रीन)
192×192 · Android Chrome, PWA मेनिफ़ेस्ट आइकॉन
512×512 · PWA स्प्लैश स्क्रीन, Google खोज
फ़ेविकॉन का संक्षिप्त इतिहास
फ़ेविकॉन की शुरुआत Microsoft की एक विशेषता के रूप में Internet Explorer 5 में हुई, जो मार्च 1999 में जारी हुआ। Microsoft ने साइट के रूट में /favicon.ico ढूँढने और इसे Favorites बार में बुकमार्क की गई साइटों के बगल में दिखाने की परंपरा शुरू की, इसी से नाम पड़ा «फ़ेविकॉन» (favorite icon)। मूल विकल्प Windows का स्वामित्व ICO फ़ॉर्मेट था, जो एक ही फ़ाइल में कई बिटमैप आकार रख सकता है। दूसरे ब्राउज़रों ने यह परंपरा लगभग तुरंत अपनाई और PNG फ़ेविकॉन भी समर्थित करने लगे, जिन्हें डॉक्यूमेंट हेड में <link rel="icon"> टैग द्वारा संकेतित किया जाता है। Apple के iPhone (2007 में लॉन्च) ने apple-touch-icon परंपरा जोड़ी, एक 180×180 PNG जो तब उपयोग होता है जब उपयोगकर्ता किसी वेबसाइट को iOS होम स्क्रीन पर जोड़ता है, उसी आकार में दिखता है जैसे कोई नेटिव ऐप आइकन। Progressive Web Apps (PWA, लगभग 2015 में औपचारिक) ने manifest.json फ़ाइल जोड़ी, जिसकी icons सरणी 192×192 (Chrome का इंस्टॉलेशन प्रॉम्प्ट) और 512×512 (PWA स्प्लैश स्क्रीन, Android होम स्क्रीन, Windows स्टार्ट मेनू पिन) PNG वैरिएंट माँगती है। SVG फ़ेविकॉन (Firefox में 2015 के संस्करण 41 से, Chrome में फ़रवरी 2020 के संस्करण 80 से, Safari में 2019 के संस्करण 12.1 से समर्थित) अब आधुनिक अनुशंसा हैं जब आइकन सरल आकार का हो, एक फ़ाइल किसी भी डिस्प्ले घनत्व पर पूर्ण रूप से स्केल होती है। पुरानी favicon.ico फ़ाइल अभी भी Internet Explorer 11 और पुराने ब्राउज़रों के लिए ज़रूरी है; आधुनिक स्टैक SVG के साथ एक fallback ICO और apple-touch-icon PNG भेजते हैं।
इतने सारे आकार क्यों?
फ़ेविकॉन सेट का प्रत्येक आकार एक अलग रेंडरिंग संदर्भ की सेवा करता है। 16×16 मानक DPI पर क्लासिक ब्राउज़र-टैब फ़ेविकॉन है, वही आकार जिसने डिज़ाइनरों को सिखाया कि पिक्सेल अड़चनें कितनी क्रूर हो सकती हैं। 32×32 उच्च DPI (Retina) टैब आकार है; कई आधुनिक ब्राउज़र «मानक» डिस्प्ले के लिए भी इसे प्राथमिकता देते हैं क्योंकि यह 16×16 के बढ़ने से बेहतर घटता है। 48×48 वह आकार है जिसे Windows टास्कबार शॉर्टकट और पिन की गई साइटों के फ़ेविकॉन के लिए उपयोग करता है। 180×180 apple-touch-icon है, जो तब प्रदर्शित होता है जब उपयोगकर्ता किसी साइट को iOS होम स्क्रीन पर जोड़ता है। 192×192 Chrome वेब ऐप इंस्टॉल प्रॉम्प्ट और मानक Android होम स्क्रीन आइकन है। 512×512 PWA स्प्लैश-स्क्रीन आइकन, Google खोज परिणाम थंबनेल, और Windows स्टार्ट मेनू टाइल आइकन है। एकल उच्च-रिज़ॉल्यूशन फ़ाइल पर्याप्त क्यों नहीं है: सबसे छोटे आकारों पर आइकन को पठनीय बने रहने के लिए अक्सर हाथ से ट्यून किए गए सरलीकरण की ज़रूरत होती है (16×16 पर एक जटिल लोगो रंगीन धब्बा बन जाता है), इसलिए पेशेवर फ़ेविकॉन डिज़ाइन में आम तौर पर दो या तीन वैरिएंट बनाने पड़ते हैं, बड़े आकारों के लिए विस्तृत संस्करण, मध्यम के लिए सरलीकृत, और सबसे छोटे के लिए «केवल मार्क» संस्करण। यह जनरेटर एकल स्रोत को मानक नज़दीकी-पड़ोसी या द्विरेखीय डाउनसैम्पलिंग से स्केल करता है, जो सरल आकारों के लिए अच्छा है; जटिल लोगो को सबसे छोटे आकारों पर मैन्युअल टच-अप की ज़रूरत हो सकती है।
फ़ाइलों के साथ जाने वाला HTML
फ़ाइलें बनाना आधा काम है; दूसरा आधा है आपके <head> में मेटा टैग जो ब्राउज़र को बताते हैं कि किस संदर्भ में किस फ़ाइल का उपयोग करना है। 2026 का न्यूनतम-व्यवहार्य फ़ेविकॉन स्टैक:
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">ब्राउज़र डिवाइस के पिक्सेल घनत्व और समर्थित प्रारूपों के आधार पर सबसे उपयुक्त फ़ाइल चुनता है। आधुनिक ब्राउज़र मौजूद होने पर SVG को प्राथमिकता देते हैं; पुराने ब्राउज़र PNG आकारों पर लौटते हैं; iOS apple-touch-icon का उपयोग करता है; PWA इंस्टॉलेशन मैनिफ़ेस्ट पढ़ता है। रूट पर favicon.ico स्पष्ट लिंक टैग के बिना भी डिफ़ॉल्ट fallback के रूप में स्वतः उठाया जाता है, हर साइट के पास बहुत पुराने ब्राउज़रों और टूलिंग के साथ पिछड़े संगतता के लिए एक होना ही चाहिए।
जब आपको वास्तव में फ़ेविकॉन बनाने की ज़रूरत होती है
- नई साइट लॉन्च। हर नई वेबसाइट को फ़ेविकॉन सेट चाहिए। 2026 की अपेक्षा है कई आकारों में पूर्ण PNG स्टैक प्लस एक SVG प्लस एक ICO, कुल मिलाकर छह से दस फ़ाइलें। उन्हें एकल स्रोत से बनाना ही इस उपकरण का पूरा उद्देश्य है।
- ब्रांड नवीनीकरण। लोगो अपडेट का अर्थ है नए फ़ेविकॉन। स्रोत छवि को बदलकर पुनः उत्पन्न करना वेक्टर एडिटर में हर आकार को व्यक्तिगत रूप से फिर से बनाने से तेज़ है।
- PWA रूपांतरण। मौजूदा साइट में PWA क्षमताएँ जोड़ने के लिए मौजूदा फ़ेविकॉन सेट के अलावा मैनिफ़ेस्ट आइकन (न्यूनतम 192×192 और 512×512) चाहिए। कई साइटें PWA कार्य के दौरान पाती हैं कि उनका मौजूदा फ़ेविकॉन सेट पुराना और अधूरा है।
- त्वरित प्रोटोटाइप या आंतरिक उपकरण। प्रोटोटाइप साइटों को भी पहचाने जाने योग्य टैब आइकन से लाभ होता है, अचिह्नित टैब को व्यस्त ब्राउज़र में ढूँढना मुश्किल है। कोई प्लेसहोल्डर छवि डालें, पूरा सेट निकालें।
- बहु-वातावरण ब्रांडिंग। उत्पादन, स्टेजिंग और विकास साइटों को दृष्टिगत रूप से अलग फ़ेविकॉन (अलग रंग, या «DEV»/«STG» ओवरले) से लाभ होता है ताकि डेवलपर्स बता सकें कि एक साथ खुले होने पर कौन सा टैब कौन सा है। प्रति वातावरण एक आइकन बनाएँ।
16×16 की सीमा के लिए डिज़ाइन करना
16×16 फ़ेविकॉन आधुनिक इंटरफ़ेस डिज़ाइन की सबसे माँग वाली सीमा है। 256 पिक्सेल (पूरा आइकन कैनवास) को इतनी ब्रांड पहचान देनी होती है कि उपयोगकर्ता बीस अन्य के बीच आपका टैब ढूँढ सके। उन डिज़ाइनरों से व्यावहारिक मार्गदर्शन जिन्होंने इसे कई बार किया है: आक्रामक रूप से सरल बनाएँ। 16×16 पर एक जटिल लोगो रंगीन धब्बा है। तब तक विवरण हटाते रहें जब तक न्यूनतम पहचानने योग्य आकार न बचे। टैब पृष्ठभूमि के विरुद्ध कंट्रास्ट को अधिकतम करें। ब्राउज़र टैब आम तौर पर हल्के या गहरे ग्रे होते हैं; कमज़ोर कंट्रास्ट वाला आइकन क्रोम में गायब हो जाता है। पतली रेखाओं की बजाय एकल मोटी आकृतियाँ पसंद करें। 2 पिक्सेल से कम चौड़ाई की रेखाएँ 16 पिक्सेल पर ग्रे में एलियास हो जाती हैं और अदृश्य हो जाती हैं। अपने ब्राउज़र में वास्तविक आकार पर परीक्षण करें। जो आपके डिज़ाइन उपकरण में 256×256 पर ठीक दिखता है, 16×16 पर अपठनीय हो सकता है। अपनी साइट के कई टैब खोलें और टैब बार में देखें, यही असली परीक्षण है। डार्क-मोड मामले पर विचार करें। सफ़ेद टैब बार के लिए डिज़ाइन किया गया आइकन गहरे टैब बार पर अदृश्य हो सकता है। SVG फ़ेविकॉन स्वचालित प्रकाश/अंधेरा अनुकूलन के लिए SVG के अंदर prefers-color-scheme मीडिया क्वेरी शामिल कर सकते हैं; ICO और PNG fallback के लिए, ऐसा कुछ डिज़ाइन करें जो दोनों पृष्ठभूमियों पर काम करे।
यह जनरेटर क्या उत्पन्न करता है
- favicon.ico: पुराने ब्राउज़र fallback के लिए मल्टी-साइज़ ICO (16×16 + 32×32), रूट पर
/favicon.icoरखा गया। - favicon-16x16.png: उन ब्राउज़रों के लिए स्पष्ट 16×16 PNG जो ICO के बजाय PNG को प्राथमिकता देते हैं।
- favicon-32x32.png: उच्च DPI ब्राउज़र टैब आइकन।
- apple-touch-icon.png: iOS होम स्क्रीन बुकमार्क के लिए 180×180। उचित iOS रेंडरिंग के लिए अपारदर्शी (पारदर्शिता के बिना) होना चाहिए।
- icon-192.png: Android Chrome वेब-ऐप इंस्टॉल प्रॉम्प्ट और PWA होम स्क्रीन आइकन।
- icon-512.png: PWA स्प्लैश स्क्रीन, Google खोज परिणाम, Windows स्टार्ट मेनू पिन।
गोपनीयता: छवि प्रसंस्करण केवल ब्राउज़र में
फ़ेविकॉन बनाने के लिए जो लोगो या ब्रांडिंग छवि आप अपलोड करते हैं वह गोपनीय हो सकती है, पूर्व-लॉन्च ब्रांड कार्य, आंतरिक उपकरण ब्रांडिंग, NDA-संरक्षित ग्राहक लोगो। सर्वर-साइड फ़ेविकॉन जनरेटर (बहुत लोकप्रिय RealFaviconGenerator और समान) हर अपलोड की गई छवि की एक प्रति अपने इन्फ्रास्ट्रक्चर में लेते हैं, जहाँ यह लॉग और कैश में बैठती है। यह जनरेटर पूरी तरह आपके ब्राउज़र में Canvas API के माध्यम से चलता है: छवि ब्राउज़र में पढ़ी जाती है, ब्राउज़र की अंतर्निहित छवि-आकार बदलने की पाइपलाइन द्वारा प्रत्येक फ़ेविकॉन आकार में स्केल की जाती है, और डाउनलोड के लिए पैकेज की जाती है, सब आपके टैब में। अपलोड करते समय DevTools के नेटवर्क टैब में सत्यापित करें (पृष्ठ लोड होने के बाद कोई अनुरोध नहीं चलता), या लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) करें और जनरेटर अब भी स्थानीय फ़ाइलों पर काम करता है। अनघोषित ब्रांड कार्य, NDA-संरक्षित ग्राहक लोगो, आंतरिक उपकरण ब्रांडिंग या किसी भी छवि के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी होते देखना नहीं चाहेंगे।