Will the PNG-based favicon.ico work everywhere?

The .ico file embeds PNG images, which all modern browsers and Windows Vista or later support. Very old Windows XP-era tools may not read PNG-compressed ICO frames.

Why are the Apple touch and maskable icons not transparent?

iOS fills transparent areas with black and rounds the corners itself, and Android crops maskable icons into shapes, so both get an opaque background. The maskable icon also keeps your artwork inside a safe zone with at least 10% padding.

Favicon Generator

Generate favicon.ico, Apple touch, Android, and maskable icons with a manifest

स्रोत

PNG, JPEG, WebP या SVG लोगो यहाँ छोड़ें

कम से कम 512 × 512 px की चौकोर इमेज सबसे अच्छी रहती है। SVG फ़ाइलें रेंडर से पहले साफ़ की जाती हैं।

आप क्लिपबोर्ड से पेस्ट भी कर सकते हैं।

आइकन स्टाइल

पारदर्शी बैकग्राउंड

ब्राउज़र और Android आइकन पर लागू होता है। Apple touch और maskable आइकन हमेशा बैकग्राउंड रंग इस्तेमाल करते हैं।

बैकग्राउंड रंग

आकार

पैडिंग0%

वेब ऐप मैनिफ़ेस्ट

ऐप का नाम

छोटा नाम

थीम रंग

स्प्लैश बैकग्राउंड रंग

आइकन पाथ

आपकी साइट पर फ़ाइलें कहाँ रहेंगी, जैसे / या /icons/।

फ़ेविकॉन पैकेज

फ़ेविकॉन बनाने के लिए इमेज जोड़ें या टेक्स्ट पर जाएँ

सभी साइज़, favicon.ico और site.webmanifest एक साथ बनते हैं।

HTML <head> स्निपेट

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<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">
<meta name="theme-color" content="#ffffff">

site.webmanifest

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

अवतार जनरेटरसीड से छह शैली के अवतार बनाएँ: आद्याक्षर, ज्यामितीय, पशु, पात्र, पेशा और पहचान पैटर्न। स्थानीय SVG या PNG निर्यात करें।SVG से इमेजSVG को किसी भी आकार में साफ़ PNG, JPEG, WebP या AVIF इमेज में बदलें इमेज रीसाइज़रप्रतिशत, सटीक आकार या अधिकतम आयाम से कई इमेज का आकार बदलें

फ़ेविकॉन जनरेटर क्या बनाता है?

एक लोगो या कुछ अक्षरों से पूरा फ़ेविकॉन पैकेज: favicon.ico (16, 32 और 48 px), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png और site.webmanifest, साथ में इन्हें जोड़ने वाले HTML टैग।

इस्तेमाल कैसे करें

1.PNG, JPEG, WebP या SVG लोगो छोड़ें, या टेक्स्ट पर जाकर तीन अक्षर तक लिखें।
2.बैकग्राउंड (पारदर्शी या रंग), पैडिंग और आकार चुनें।
3.मैनिफ़ेस्ट के लिए ऐप का नाम, छोटा नाम, थीम रंग और आइकन पाथ भरें।
4.हल्के और गहरे प्रीव्यू तथा ब्राउज़र टैब मॉक देखें।
5.ZIP या अलग-अलग फ़ाइलें डाउनलोड करें, फिर HTML स्निपेट अपने <head> में पेस्ट करें।

हर आइकन कैसे बनता है

ब्राउज़र और Android आइकन आपकी आकार, पैडिंग और पारदर्शिता सेटिंग मानते हैं। Apple touch आइकन हमेशा अपारदर्शी वर्ग होता है क्योंकि iOS कोने खुद गोल करता है। Maskable आइकन अपारदर्शी होता है और चित्र को सुरक्षित क्षेत्र (कम से कम 10% पैडिंग) के भीतर रखता है ताकि Android उसे गोल या squircle आकार में काट सके। छोटे साइज़ चरणों में घटाए जाते हैं ताकि 16 px आइकन साफ़ दिखे।

फ़ॉर्मैट, सुरक्षा और सीमाएँ

favicon.ico में PNG इमेज होती हैं, जिन्हें सभी आधुनिक ब्राउज़र और Windows Vista या उसके बाद के संस्करण सपोर्ट करते हैं; बहुत पुराने Windows XP टूल इसे शायद न पढ़ सकें। अपलोड की गई SVG साफ़ की जाती है, यानी रेंडर से पहले स्क्रिप्ट, इवेंट हैंडलर और बाहरी रेफ़रेंस हटा दिए जाते हैं। टेक्स्ट आइकन सिस्टम UI फ़ॉन्ट इस्तेमाल करते हैं। सब कुछ आपके ब्राउज़र में स्थानीय रूप से बनता है।