मुझे असल में फ़ेविकॉन के कौन-से साइज़ चाहिए?

16, 32 और 48 पिक्सल की इमेज वाली favicon.ico, टैब के लिए PNG आइकन, iOS के लिए 180 पिक्सल का आइकन, और Android आइकन जिनमें एक maskable संस्करण भी हो। यह पेज इन सबको एक ही ड्रॉइंग से बनाता है, साथ में manifest और पेस्ट करने लायक link टैग भी।

iOS आइकन को बैकग्राउंड क्यों दिया जाता है?

क्योंकि Safari पारदर्शी आइकन को काले बैकग्राउंड पर रखता है और गहरे रंग का लोगो ग़ायब हो जाता है। इसलिए यहाँ बाक़ी साइज़ कुछ भी हों, apple-touch-icon.png हमेशा बैकग्राउंड के साथ बनता है।

Android में maskable आइकन का क्या मतलब है?

Android अडैप्टिव आइकन को लॉन्चर के आकार में काटता है, चाहे गोला हो, squircle हो या गोल कोनों वाला चौकोर, और हर किनारे से लगभग बीस प्रतिशत हिस्सा हट सकता है। maskable फ़ाइल ड्रॉइंग को सुरक्षित क्षेत्र में रखती है, इसलिए वह किसी भी लॉन्चर में सही दिखती है।

क्या मुझे अब भी favicon.ico चाहिए?

हाँ, इसे शिप करना अब भी फ़ायदेमंद है। बुकमार्क, पुराने ब्राउज़र और कुछ फ़ीड रीडर /favicon.ico को नाम से माँगते हैं और link टैग को अनदेखा करते हैं। यहाँ बनी फ़ाइल में कंटेनर के भीतर 16, 32 और 48 पिक्सल की PNG इमेज होती हैं, जिन्हें Vista के बाद का हर ब्राउज़र पढ़ता है।

फ्रंटएंड स्टूडियोफ़ेविकॉन और ऐप आइकनटूल बदलें

फ़ेविकॉन और ऐप आइकन

एक ड्रॉइंग, हर वह साइज़ जो ब्राउज़र या फ़ोन माँगता है, जिसमें ठोस बैकग्राउंड वाला iOS आइकन और Android का maskable आइकन भी शामिल हैं, जो अक्सर ग़लत शिप हो जाते हैं। लोगो इसी टैब में बनता है और कभी अपलोड नहीं होता।

फ़ाइलें: 8 आइकन + manifest
इनपुट: PNG, JPG, WebP या SVG
आपका लोगो: टैब से बाहर नहीं जाता

आपका लोगो

चौकोर ड्रॉइंग सबसे अच्छी रहती है। SVG सबसे साफ़ नतीजा देता है।

मौजूदा फ़ाइल: placeholder.svg

बैकग्राउंडलोगो के पीछे का रंग। iOS और maskable आइकन हमेशा भरे जाते हैं।

पैडिंग: 8%ड्रॉइंग के चारों ओर की जगह। maskable आइकन को हमेशा कम से कम 20% मिलता है।कोनों की गोलाई: 0%आइकन के कोने गोल करता है। maskable आइकन पर लागू नहीं होता।

ऐप manifest सेटिंग

ऐप का नामआपकी साइट का पूरा नाम, जो manifest में सेव होता है।छोटा नामहोम स्क्रीन पर आइकन के नीचे दिखता है।

थीम का रंगAndroid पर और manifest में ब्राउज़र UI का रंग।

आपको क्या मिलेगा

प्रीव्यू जगह के अनुसार छोटे दिखाए जाते हैं, और हर फ़ाइल अपने बताए साइज़ में बनती है। किसी एक को अलग से डाउनलोड करने के लिए उस पर क्लिक करें।

favicon.ico
48×48
16, 32 और 48 एक ही फ़ाइल में, पुराने ब्राउज़र और बुकमार्क के लिए
favicon-16x16.png
16×16
टैब, सबसे छोटे साइज़ में
favicon-32x32.png
32×32
हाई-डेंसिटी स्क्रीन पर टैब
favicon-48x48.png
48×48
Windows टास्कबार और शॉर्टकट
apple-touch-icon.png
180×180
iOS होम स्क्रीन, पारदर्शिता काली दिखती है इसलिए यह आइकन भरा हुआ है
icon-192.png
192×192
Android होम स्क्रीन
icon-512.png
512×512
स्प्लैश स्क्रीन और ऐप लिस्टिंग
icon-maskable-512.png
512×512
Android अडैप्टिव आइकन, ड्रॉइंग सुरक्षित गोले के भीतर रखी गई

इसे अपने <head> में पेस्ट करें

स्निपेट और manifest .zip में भी हैं।

<link rel="icon" href="/favicon.ico" sizes="any">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

site.webmanifest

{
  "name": "My site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

iOS आइकन भरा हुआ क्यों है

Safari पारदर्शी होम-स्क्रीन आइकन को काले बैकग्राउंड पर रखता है, इसलिए गहरे रंग का लोगो ग़ायब हो जाता है। इसीलिए यहाँ दूसरे आइकन कुछ भी इस्तेमाल करें, apple-touch-icon.png को हमेशा बैकग्राउंड दिया जाता है।

maskable का मतलब

Android अडैप्टिव आइकन को लॉन्चर के आकार में काटता है, चाहे गोला हो, squircle हो या गोल कोनों वाला चौकोर, और हर किनारे से बीस प्रतिशत तक हिस्सा हट सकता है। इसलिए maskable फ़ाइल ड्रॉइंग को उस सुरक्षित क्षेत्र के भीतर अच्छे मार्जिन के साथ रखती है।

favicon.ico के बारे में

यहाँ की .ico फ़ाइल में कंटेनर के भीतर 16, 32 और 48 पिक्सल की PNG इमेज होती हैं, जिन्हें Vista के बाद का हर ब्राउज़र पढ़ता है। इसे शिप करना अब भी फ़ायदेमंद है: बुकमार्क, पुराने ब्राउज़र और कुछ फ़ीड रीडर /favicon.ico को नाम से माँगते हैं और link टैग को अनदेखा करते हैं।

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

मुझे असल में फ़ेविकॉन के कौन-से साइज़ चाहिए?: 16, 32 और 48 पिक्सल की इमेज वाली favicon.ico, टैब के लिए PNG आइकन, iOS के लिए 180 पिक्सल का आइकन, और Android आइकन जिनमें एक maskable संस्करण भी हो। यह पेज इन सबको एक ही ड्रॉइंग से बनाता है, साथ में manifest और पेस्ट करने लायक link टैग भी।
iOS आइकन को बैकग्राउंड क्यों दिया जाता है?: क्योंकि Safari पारदर्शी आइकन को काले बैकग्राउंड पर रखता है और गहरे रंग का लोगो ग़ायब हो जाता है। इसलिए यहाँ बाक़ी साइज़ कुछ भी हों, apple-touch-icon.png हमेशा बैकग्राउंड के साथ बनता है।
Android में maskable आइकन का क्या मतलब है?: Android अडैप्टिव आइकन को लॉन्चर के आकार में काटता है, चाहे गोला हो, squircle हो या गोल कोनों वाला चौकोर, और हर किनारे से लगभग बीस प्रतिशत हिस्सा हट सकता है। maskable फ़ाइल ड्रॉइंग को सुरक्षित क्षेत्र में रखती है, इसलिए वह किसी भी लॉन्चर में सही दिखती है।
क्या मुझे अब भी favicon.ico चाहिए?: हाँ, इसे शिप करना अब भी फ़ायदेमंद है। बुकमार्क, पुराने ब्राउज़र और कुछ फ़ीड रीडर /favicon.ico को नाम से माँगते हैं और link टैग को अनदेखा करते हैं। यहाँ बनी फ़ाइल में कंटेनर के भीतर 16, 32 और 48 पिक्सल की PNG इमेज होती हैं, जिन्हें Vista के बाद का हर ब्राउज़र पढ़ता है।