साइट के लिए फ़ेविकॉन आकार

विषयसूची:

साइट के लिए फ़ेविकॉन आकार
साइट के लिए फ़ेविकॉन आकार
Anonim

वेब डिज़ाइन में, जैसा कि आप शायद जानते हैं, हर विवरण मायने रखता है। एक व्यक्ति जिसने आपके संसाधन पर स्विच किया है, वह प्रत्येक तत्व को अलग-अलग नहीं देखता है, लेकिन पूरी छवि को अन्य छोटे विवरणों से युक्त पैकेज के रूप में मानता है। इस प्रकार, यदि आप अपने संसाधन को विकसित करने की प्रक्रिया में कुछ चूक जाते हैं, तो यह विवरण बाद में पूरे परिसर, पूरी रचना को खराब कर सकता है।

ऐसा ट्रिफ़ल, उदाहरण के लिए, एक बटन की पृष्ठभूमि, कुछ छोटे तत्व का गलत तरीके से चुना गया फ़ॉन्ट और यहां तक कि एक फ़ेविकॉन भी हो सकता है। वास्तव में, अपने लिए देखें - बड़ी, प्रसिद्ध साइटों में एक व्यक्तिगत आइकन होता है जो इसे उपयोगकर्ता के ब्राउज़र के "बुकमार्क" अनुभाग में इंगित करता है। इसके बिना, संसाधन के विकासकर्ता उस रचना को बनाने में सक्षम नहीं होते जिसके लिए वे मूल रूप से प्रयास कर रहे थे।

इसलिए, अपनी साइट के लिए डिज़ाइन बनाते समय, आपको फ़ेविकॉन जैसे विवरण का ध्यान रखना चाहिए। इस लेख में, हम इस बारे में बात करेंगे कि इसे संसाधन की सामान्य शैली से कैसे जोड़ा जाए, साथ ही इस छवि का आकार क्या होना चाहिए।

साइट आइकन

फ़ेविकॉन आकार
फ़ेविकॉन आकार

सबसे पहले, आइए परिभाषित करें कि यह तत्व क्या है। अभी, अपने ब्राउज़र टैब के शीर्षक पर एक नज़र डालें। जैसा कि आप देख सकते हैं, इसके बाईं ओर एक छोटी सी छवि है, जो संसाधन के लोगो के सरलीकृत संस्करण को दर्शाती है। यही तस्वीर खोज परिणामों में प्रदर्शित साइट के नाम के पास भी है। जब उपयोगकर्ता शीर्षक देखते हैं, तो यह उनके द्वारा निर्देशित होता है।

कई वेबमास्टर समझते हैं कि ऐसी तस्वीर की आवश्यकता है - लेकिन कम ही लोग जानते हैं कि साइट के लिए कौन सा फ़ेविकॉन आकार सबसे उपयुक्त होगा। इसलिए, इस लेख में हम न केवल यह जानकारी देंगे कि ऐसा आइकन कैसे बनाया जाए और आप इसे अपने संसाधन पर कैसे स्थापित कर सकते हैं, बल्कि छवि आकार के बारे में भी बात करेंगे।

फ़ेविकॉन का उद्देश्य

तो, साइट हेडर के पास की तस्वीर का उपयोग पहचान के लिए किया जाता है। यह इसका मूल उद्देश्य है: जिस साइट का नाम हम देखते हैं, उसे व्यक्त करना और इसे बाकी लोगों की नज़र में खड़ा करना। यह ग्राफिक्स के उपयोग के माध्यम से यथासंभव सरलता से किया जाता है: हम चित्रों में जानकारी को पाठ प्रारूप की तुलना में बहुत तेज और आसान समझते हैं। फ़ेविकॉन ऐसा करने में हमारी मदद करते हैं। लेकिन यह मत भूलो कि उपयोगकर्ता की नज़र में फ़ेविकॉन का आकार न्यूनतम है। यह साइट के "हेडर" में एक लोगो नहीं है, जिसमें शिलालेख, कुछ स्पष्टीकरण या संपर्क जानकारी के रूप में अतिरिक्त जानकारी हो सकती है। नाम के आगे आइकन में प्रदर्शित होने वाली हर चीज फ़ेविकॉन के आकार में यथासंभव फिट होनी चाहिए। और वह, जैसा कि पहले ही संकेत दिया गया है, बस लघु है (केवल 16 गुणा 16 पिक्सेल)।

किस आकार का फ़ेविकॉन
किस आकार का फ़ेविकॉन

कैसे चुनेंफ़ेविकॉन?

तो एक वेबमास्टर अपनी साइट के लिए एक आइकन कैसे डिजाइन कर सकता है? यह ध्यान दिया जाना चाहिए कि साइट लोगो को केवल संपीड़ित करने से, अक्सर, काम नहीं करेगा। किसी विशेष संसाधन के लोगो के रूप में लगाए गए प्रतीकों पर अक्सर विभिन्न तत्व दिखाई देते हैं, जो हमेशा लघु रूप में सही ढंग से प्रदर्शित नहीं होंगे। इस तरह के उपक्रम को तुरंत छोड़ देना बेहतर है।

बेशक, फ़ेविकॉन का आकार वहां केवल एक शिलालेख डालने के बारे में बात करने की अनुमति नहीं देता है। इस संकल्प पर कोई भी पाठ बस अदृश्य हो जाएगा। हमें एक नया आइकन विकसित करने की जरूरत है जो साइट की शैली को बताए। समाधान खोजने के लिए, आइए फिर से सबसे बड़ी साइटों की ओर रुख करें।

कई लोग सेवा नाम के पहले अक्षर को फ़ेविकॉन के रूप में उपयोग करते हैं। यह तरीका है, उदाहरण के लिए, बिंग, याहू, यांडेक्स, विकिपीडिया, गूगल। एक और तरीका है - यदि आपके पास एक छोटा साइट नाम है, तो आप इसे अपने आइकन की पृष्ठभूमि के रूप में सेट कर सकते हैं। इस शिलालेख को सही ढंग से प्रदर्शित करने के लिए फ़ेविकॉन के आकार के लिए (पिक्सेल में यह पहुंचता है, मैं दोहराता हूं, 16 x 16 पिक्सल), यह 3 अक्षरों से अधिक नहीं होना चाहिए। उदाहरण के लिए, AOL सेवा यही करती है।

फ़ेविकॉन कैसे बनाएं?

वेबसाइट फ़ेविकॉन आकार
वेबसाइट फ़ेविकॉन आकार

साइट के नाम के लिए एक आइकन बनाने के कई तरीके हैं। बेशक, विभिन्न तैयार समाधानों के साथ काम करना सबसे आसान है। हम कुछ सेवाओं या कार्यक्रमों के बारे में बात कर सकते हैं जो आपको एक पूर्ण छवि से इसे कम करके एक आइकन बनाने की अनुमति देते हैं। हालाँकि, मैं आपको अपने दम पर ऐसे लोगो को विकसित करने की सलाह दूंगा। यह सबसे पहले देगाकुछ सीखने का अवसर; और दूसरी बात, यह अधिक उपकरण प्रदान करेगा। इसके लिए आपको केवल यह जानने की आवश्यकता है कि क्या आकर्षित करना है, और यह भी जानना है कि अंतिम संस्करण में फ़ेविकॉन किस आकार का होना चाहिए। हम साइट के लिए आइकन आकार के बारे में थोड़ी देर बाद बात करेंगे, लेकिन अभी के लिए हम ऐसी छवियों के साथ काम करने की कुछ सूक्ष्मताओं पर ध्यान देंगे। विशेष रूप से, साइट के लिए फ़ेविकॉन के आकार का उल्लेख किए बिना, ऐसी छवि के प्रारूप को स्पष्ट किया जाना चाहिए। जैसा कि अनुभवी डिजाइनर नोट करते हैं, चित्र को-p.webp

आप तस्वीर को सेव कर सकते हैं, उदाहरण के लिए, फोटोशॉप का उपयोग करके, जहां प्रतीक बनाया जाएगा।

फ़ेविकॉन आयाम

फ़ेविकॉन किस आकार का होना चाहिए
फ़ेविकॉन किस आकार का होना चाहिए

तो, अब बात करते हैं कि खोज परिणामों में साइट के नाम के आगे जो चित्र हमें दिखाई देता है वह कितना बड़ा होना चाहिए। डिफ़ॉल्ट रूप से, जैसा कि पहले ही उल्लेख किया गया है, इसका आकार केवल 16 पिक्सेल (प्रत्येक तरफ) है। हालाँकि, यदि आप फ़ोटोशॉप में इस छवि को संपादित करने का प्रयास करते हैं, तो आप स्वयं देखेंगे कि यह कितना असुविधाजनक है। इसलिए, हम एक बढ़े हुए चित्र के साथ काम करने की सलाह देते हैं, जिसे भविष्य में केवल किनारों के साथ संकुचित किया जा सकता है और आवश्यक प्रारूप में सहेजा जा सकता है।

मल्टीप्लेटफार्म

हालाँकि, आपकी साइट पर फ़ेविकॉन कितना बड़ा होना चाहिए, इसके बारे में बात करते हुए, एक और बात ध्यान में रखनी चाहिए। सभी प्लेटफ़ॉर्म एक ही तरह से संसाधन छवि प्रदर्शित नहीं करते हैं। उदाहरण के लिए, रेटिना वाले डिवाइस आपके फ़ेविकॉन को 32 गुणा 32 पिक्सेल पर "देखें" प्रदर्शित करते हैं। और सफारी में और नए विंडोज प्लेटफॉर्म पर, और बिल्कुल भी, ये आइकन 64. के आकार तक पहुंचते हैंपिक्सेल।

इसलिए, हम अनुशंसा करते हैं कि आप आइकन के विभिन्न संस्करणों को सहेज लें और भविष्य में उपयोगकर्ता के प्लेटफॉर्म के आधार पर इसके परिवर्तन के लिए प्रदान करें। एक और दिलचस्प बिंदु - आप आइकन को सबसे बड़े प्रारूप में लोड करने का प्रयास कर सकते हैं, इस तथ्य पर भरोसा करते हुए कि यह ब्राउज़र के आधार पर "सिकुड़" जाएगा।

बाहर के संपादक

पिक्सेल में फ़ेविकॉन आकार
पिक्सेल में फ़ेविकॉन आकार

बेशक यह अच्छा है यदि आप फ़ोटोशॉप के साथ अच्छे हैं और जानते हैं कि फ़ेविकॉन किस आकार का होना चाहिए और अपनी छवि को सहेजते समय इसे कैसे प्राप्त किया जाए। हालांकि, ऐसे बहुत से शुरुआती लोग हैं जो ग्राफिक संपादकों के इतने करीब से पहले नहीं आए हैं, इसलिए वे वांछित छवि को इतनी आसानी से नहीं खींच सकते हैं। ऐसे वेबमास्टरों की सहायता के लिए, ऐसी कई सेवाएँ हैं जो आपको अपनी रुचि का आइकन स्वचालित रूप से बनाने की अनुमति देती हैं। उनमें से कई तो मुफ्त भी हैं, जिन्हें उपयोगकर्ता से किसी निवेश की आवश्यकता नहीं है।

कभी-कभी आपको केवल काम करने के लिए पंजीकरण करने की आवश्यकता होती है, लेकिन, जैसा कि आप समझते हैं, यह एक बार किया जाता है - आखिरकार, कंपनियां अपना फ़ेविकॉन इतनी बार नहीं बदलती हैं। Google पर एक नज़र डालें, जो हर दिन लोगो बदलता है, लेकिन आइकन को नहीं छूता है।

फ़ेविकॉन कैसे स्थापित करें?

सामान्य तौर पर, अपनी साइट को इस तरह से सेट करना कि वह आपके लिए आवश्यक छवि को सही ढंग से प्रदर्शित करे, बहुत आसान है। यह सरल चरणों की एक श्रृंखला करने के लिए पर्याप्त है जो खोज इंजनों के साथ-साथ सरल ब्राउज़रों को जानकारी पढ़ने की अनुमति देगा।

साइट के लिए फ़ेविकॉन का आकार क्या है
साइट के लिए फ़ेविकॉन का आकार क्या है

ऐसा करने के लिए, परिणामी छवि को सहेजा जाना चाहिएfavicon.ico नाम दिया गया है और आपके संसाधन की जड़ में रखा गया है। बस, अब आपकी इमेज अपने आप पहचान ली जाएगी, और कुछ समय बाद यह आपकी साइट से जुड़ जाएगी।

इस बाइंडिंग के अलावा, आप एक और लाइन जोड़ सकते हैं जो "सुझाव" देगी कि आपका आइकन कहाँ स्थित है। यह इस तरह दिखता है:

साइट के हेडर में कोड इंस्टॉल करें।

निष्कर्ष

वेबसाइट के लिए फ़ेविकॉन कितना बड़ा होना चाहिए
वेबसाइट के लिए फ़ेविकॉन कितना बड़ा होना चाहिए

तो, हमारे लेख को पढ़ने के बाद, आपको पता चला कि किसी साइट के लिए फ़ेविकॉन किस आकार का होना चाहिए और यह क्या है। साथ ही, मुझे लगता है कि आप समझ गए हैं कि आपके संसाधन के लिए सही आइकन ढूंढना एक आवश्यकता है, क्योंकि बढ़ती मान्यता और आपके प्रतिस्पर्धियों के बीच कुछ अतिरिक्त स्टैंडआउट के मामले में यह आपके हाथों में खेलता है। कम से कम सबसे बड़ी साइटें ऐसा ही करती हैं, जिसे एक प्रमुख उदाहरण के रूप में लिया जा सकता है। और इसके अलावा, यह बहुत प्रयास नहीं करता है - एक बार फ़ेविकॉन बनाकर और इसे अपनी साइट पर सही तरीके से स्थापित करने के बाद, आप इसे अगले कुछ महीनों के लिए भूल सकते हैं।

इसलिए बेझिझक प्रयोग करें, कुछ नया लेकर आएं, कोशिश करें - और सब कुछ ठीक हो जाएगा!

सिफारिश की: