लोगो या छोटे ब्रांड अक्षरों से ब्राउज़र, बुकमार्क, मोबाइल होम स्क्रीन और PWA के लिए पूरा फेविकॉन सेट बनाएँ।
डाउनलोड से पहले छोटे, मोबाइल और PWA आकार जाँचें। छोटे आइकन में साफ आकार और मजबूत रंग अंतर जरूरी है।
स्रोत
टेक्स्ट आइकन
6 आकार
संभव हो तो वर्गाकार लोगो उपयोग करें। पारदर्शी PNG, JPG, WebP और SVG अच्छे रहते हैं।
हर PNG आकार डाउनलोड करें या लागू करने का कोड कॉपी करें।
डाउनलोड फाइलें /favicon में रखने के बाद ये टैग पेज के head में जोड़ें।
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon/favicon-48x48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
PWA इंस्टॉल सुविधा के लिए ये आइकन वेब ऐप manifest में जोड़ें।
{
"icons": [
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}ध्यान देने योग्य बातें
गणना मानक सूत्रों पर आधारित है। प्रदर्शित मान पढ़ने में आसानी के लिए राउंड किए जा सकते हैं। महत्वपूर्ण निर्णय के लिए आधिकारिक स्रोत भी जांचें।
इस परिणाम को सहेजें, पुराने परिणामों से तुलना करें या रिपोर्ट साझा करें।
अच्छे फेविकॉन सेट में केवल एक 16px इमेज नहीं होती। यह टूल सामान्य PNG आकार और साइट के head में लगाने योग्य HTML टैग तैयार करता है।
नहीं। इमेज आपके ब्राउज़र में कैनवस से पढ़ी और आकार बदली जाती है।
आधुनिक साइटों के लिए PNG पर्याप्त है। बहुत पुराने ब्राउज़र हेतु 32px PNG को अलग से .ico बना सकते हैं।