फ्री ऑनलाइन favicon maker
Favicon generator: अपने लोगो से favicon.ico बनाएँ
PNG, JPG, WebP या SVG को 16, 32 और 48 px वाली favicon.ico में बदलें, छोटे साइज़ पिक्सेल-दर-पिक्सेल सुधारें, ब्राउज़र टैब में प्रीव्यू देखें और <link> टैग कॉपी करें। फ्री, ट्रांसपेरेंट, कुछ स्टोर नहीं होता।
कैसे काम करता है
तीन स्टेप में favicon बनाएँ
लोगो से अपलोड करने लायक फ़ाइल तक करीब तीन मिनट। कम से कम 256 px की स्क्वायर इमेज से शुरू करें, या favicon शुरू से ख़ुद बनाएँ।
-
01अपना लोगो इम्पोर्ट करें
इम्पोर्ट दबाएँ, PNG, JPG, WebP या SVG चुनें (या पेज पर ड्रॉप करें), स्क्वायर फ़्रेम को मनचाहे हिस्से पर खींचें और इम्पोर्ट पर क्लिक करें।
-
0216 और 32 px साइज़ ठीक करें
छोटे साइज़ पिक्सेल ग्रिड पर खोलें, बारीक डिटेल हटाएँ और पतली लाइनें मोटी करें। प्रीव्यू खोलें और ब्राउज़र-टैब मॉकअप में आइकन देखें।
-
03favicon.ico एक्सपोर्ट करें
एक्सपोर्ट दबाएँ, सिर्फ़ 16, 32 और 48 px टिक करें, फ़ाइल का नाम
faviconलिखें और .ICO डाउनलोड करें पर क्लिक करें। Web favicon टैब में पेस्ट करने वाला टैग दिखता है।
कौन-सी फ़ाइलें
favicon.ico, Apple touch icon, PNG और SVG
हर फ़ाइल किसलिए है, और इनमें से कौन-सी IconEditor आपके लिए बनाता है।
| फ़ाइल | किसलिए | IconEditor से मिलती है? |
|---|---|---|
favicon.ico (16, 32, 48 px) | हर डेस्कटॉप ब्राउज़र, बुकमार्क, और वे टूल जो आपका HTML पढ़े बिना /favicon.ico माँगते हैं | हाँ। एक्सपोर्ट करते समय 16, 32 और 48 px टिक करें। |
| 16 / 32 / 48 px की PNG | साफ़ <link rel="icon" type="image/png" sizes="32x32"> टैग | हाँ। एक साइज़ के लिए PNG डाउनलोड करें, या सभी टिक किए साइज़ की ZIP। |
apple-touch-icon.png (180 px) | iPhone और iPad की होम स्क्रीन | आंशिक रूप से। 256 px की PNG एक्सपोर्ट करें और इमेज टूल से उसे 180 px तक स्केल करें; 180 px का कोई स्लॉट नहीं है। |
| 192 और 512 px की PNG | Android, PWA, वेब ऐप मैनिफ़ेस्ट | नहीं। सबसे बड़ा साइज़ 256 px है। अपना मूल आर्टवर्क इमेज टूल से 192 और 512 px तक स्केल करें। |
icon.svg | आधुनिक ब्राउज़र; किसी भी साइज़ पर स्केल होता है | नहीं। IconEditor SVG नहीं लिखता। आपका लोगो पहले से SVG है तो उसे जैसा है वैसा .ico के बगल में अपलोड कर दें। |
manifest.webmanifest | इंस्टॉल हो सकने वाले वेब ऐप के नाम और आइकन | नहीं। यह फ़ाइल आप हाथ से लिखते हैं (शुरू करने को तीन लाइनें काफ़ी हैं)। |
आम वेबसाइट — ब्लॉग, दुकान, कंपनी का पेज — के लिए .ico और एक Apple touch icon काफ़ी है। बड़ी PNG तभी मायने रखती हैं जब लोग आपकी साइट को ऐप की तरह इंस्टॉल करें।
इसे अपनी साइट में जोड़ें
कॉपी करने वाले <link> टैग
फ़ाइलें साइट की रूट में अपलोड करें, फिर टैग <head> के अंदर जोड़ें।
न्यूनतम: सिर्फ़ .ico
<link rel="icon" href="/favicon.ico" sizes="any">यह ठीक वही स्निपेट है जो एक्सपोर्ट डायलॉग के Web favicon टैब में है। टैग न हो तब भी ब्राउज़र ख़ुद /favicon.ico माँगते हैं, इसलिए साइट की रूट में रखी फ़ाइल बिना टैग के भी काम करती है।
सुझाया गया: ico + SVG + Apple touch icon
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">अगर आप SVG आइकन भी देते हैं, तो .ico के link पर sizes="32x32" लिखें: वरना Chrome SVG की जगह .ico को तरजीह दे सकता है। जो फ़ाइलें आपके पास नहीं हैं, उनकी SVG और मैनिफ़ेस्ट वाली लाइनें छोड़ दें।
Google Search क्या देखता है
Google आपकी favicon को मोबाइल और डेस्कटॉप सर्च में रिज़ल्ट के पास दिखाता है। उसकी गाइडलाइन एक स्क्वायर इमेज माँगती है जिसका साइज़ 48 px का गुणज हो (आपकी .ico की 48 px एंट्री इस पर खरी उतरती है), पूरी साइट के लिए एक ही favicon, स्थिर URL, ऐसा पेज जिसे Googlebot क्रॉल कर सके, और ऐसी फ़ाइल जो robots.txt में ब्लॉक न हो। बदलाव के बाद रिज़ल्ट में दिखने में दिनों से हफ़्तों तक का समय दें।
डिज़ाइन
ऐसा favicon जो 16 पिक्सेल पर भी पढ़ा जाए
पूरा आइकन छोटे अक्षर जितनी ऊँचाई का ही होता है।
एक आकार, एक या दो रंग
नाम का पहला अक्षर या लोगो का सबसे सरल हिस्सा लें। जो वर्डमार्क 200 px पर पढ़ा जाता है, वह 16 px पर धब्बा बन जाता है।
16 px वर्ज़न हाथ से सुधारें
ऑटोमैटिक सिकोड़ना एक-पिक्सेल की लकीरों को धुँधला कर देता है। पिक्सेल ग्रिड पर आप हर एक पिक्सेल ख़ुद रख सकते हैं; पाँच मिनट लगते हैं और फ़र्क़ दिखता है।
लाइट और डार्क टैब दोनों जाँचें
ब्राउज़र favicon को लाइट और डार्क दोनों बैकग्राउंड पर दिखाते हैं। आइकन का प्रीव्यू दोनों पर देखें और ट्रांसपेरेंट बैकग्राउंड पर पूरी तरह काला या पूरी तरह सफ़ेद फ़िल न रखें।
ट्रांसपेरेंसी सोच-समझकर रखें
ट्रांसपेरेंट favicon टैब में घुल जाता है; रंगीन गोल कोनों वाला स्क्वायर हर थीम में दिखता रहता है। कैनवास के नीचे बैकग्राउंड और कोने (Corners) से चुनें।
सिद्धांत Windows एप्लिकेशन आइकन जैसे ही हैं, इसीलिए एक ही फ़ाइल दोनों काम कर सकती है। आइकन डिज़ाइन गाइड और साइज़ चीट शीट में और गहराई से बताया है।
Favicon क्या होता है?
Favicon वह छोटा आइकन है जो ब्राउज़र टैब में पेज के टाइटल के पास, बुकमार्क और हिस्ट्री में दिखाता है; Google जैसे सर्च इंजन मोबाइल पर आपके रिज़ल्ट के पास भी इसे दिखाते हैं। नाम "favorite icon" से आया है। तकनीकी रूप से यह एक छोटी इमेज है — परंपरागत रूप से साइट की रूट में रखी मल्टी-साइज़ favicon.ico, और आजकल अक्सर साथ में एक SVG और फ़ोन के लिए PNG भी।
मुझे कौन-से favicon साइज़ चाहिए?
16, 32 और 48 px वाली favicon.ico हर डेस्कटॉप ब्राउज़र को कवर करती है और Google के "48 px के गुणज" वाले नियम को भी पूरा करती है। iOS होम स्क्रीन के लिए 180 × 180 px का apple-touch-icon जोड़ें और, अगर आप वेब ऐप चला रहे हैं, तो वेब मैनिफ़ेस्ट में 192 और 512 px की PNG। IconEditor .ico और अपने सात साइज़ (256 px तक) की PNG बनाता है; 180, 192 और 512 px की फ़ाइलें आपको किसी इमेज टूल से बनानी होंगी।
क्या यह generator पूरा favicon पैकेज बनाता है?
नहीं, और यह इस बारे में ईमानदार है। यह favicon.ico बनाता है और 16, 24, 32, 48, 64, 128 और 256 px की PNG देता है, साथ में <link> स्निपेट। यह 180, 192 या 512 px की फ़ाइलें, वेब मैनिफ़ेस्ट या browserconfig फ़ाइल नहीं बनाता। ज़्यादातर साइटों के लिए .ico और एक apple-touch-icon काफ़ी है; पूरा सेट चाहिए तो आइकन यहाँ डिज़ाइन करें और साइज़ बनाने के लिए पैकेज generator इस्तेमाल करें।
Favicon के लिए ICO, PNG या SVG में से क्या इस्तेमाल करूँ?
तीनों चलते हैं। .ico वही है जिसे हर ब्राउज़र और कई टूल आज भी अपने आप /favicon.ico पर माँगते हैं, इसलिए इसे रखें। SVG किसी भी साइज़ पर स्केल होता है और डार्क मोड को फ़ॉलो कर सकता है, पर पुराने ब्राउज़र उसे अनदेखा करते हैं। Apple touch icon के लिए PNG सबसे आसान फ़ॉर्मैट है। एक आम और भरोसेमंद सेट है favicon.ico + SVG + 180 px की PNG।
क्या JPG या SVG से favicon बना सकते हैं?
हाँ। JPG, PNG, WebP, GIF, BMP और SVG सब एक ही तरह इम्पोर्ट होते हैं। JPG में ट्रांसपेरेंसी नहीं होती, इसलिए favicon पूरा स्क्वायर होता है, जब तक आप बैकग्राउंड न मिटाएँ या कोने सेट न करें। SVG 1024 px में रास्टराइज़ होकर छोटा किया जाता है, जिससे सबसे साफ़ नतीजा मिलता है।
नई favicon अपलोड करने के बाद वह बदलती क्यों नहीं?
ब्राउज़र favicon को बहुत आक्रामक तरीके से कैश करते हैं, अक्सर पेज से अलग। Ctrl+F5 से रीलोड करें, फ़ाइल का URL सीधे खोलकर रीफ़्रेश करें, या नई फ़ाइल को दूसरा नाम दें (जैसे favicon-v2.ico) और link अपडेट करें। सर्च रिज़ल्ट में बदलाव दिखने में दिन या हफ़्ते लग सकते हैं।
क्या generator फ्री है, और क्या मेरी इमेज स्टोर होती हैं?
फ्री है, न अकाउंट, न वॉटरमार्क। आपकी इमेज हमारे सर्वर की मेमोरी में कन्वर्ट होकर तुरंत फेंक दी जाती है; आपका काम सिर्फ़ आपके अपने ब्राउज़र में सेव रहता है। देखें प्राइवेसी पॉलिसी।
संबंधित
आगे बढ़ें
अभी अपनी favicon बनाएँ
एडिटर इम्पोर्ट डायलॉग के साथ खुलता है। फ्री, ब्राउज़र में, कुछ इंस्टॉल नहीं करना, कुछ स्टोर नहीं होता।