मैं ब्राउज़र टैब में आइकन छवि होने के लिए अपनी वेबसाइट का लोगो कैसे लगाऊं?


जवाबों:


176

उस छवि को ' फ़ेविकॉन ' कहा जाता है और यह एक छोटे वर्ग के आकार की .icoफ़ाइल है, जो फ़ेविकॉन्स के लिए मानक फ़ाइल प्रकार है। आप .pngया .gifभी उपयोग कर सकते हैं, लेकिन आपको बेहतर संगतता के लिए मानक का पालन करना चाहिए।

अपनी वेबसाइट के लिए एक सेट करने के लिए आपको चाहिए:

  1. अपने लोगो की एक वर्गाकार छवि बनाएं (अधिमानतः 32x32 या 16x16 पिक्सेल, जहाँ तक मुझे पता है कि कोई अधिकतम आकार * नहीं है), और इसे एक .icoफ़ाइल में रूपांतरित करें । आप इसे जिम्प, फ़ोटोशॉप (एक प्लगइन की मदद से ) या Favicon.cc या RealFavicongenerator जैसी वेबसाइट पर कर सकते हैं

  2. फिर, आपके पास इसे सेट करने के दो तरीके हैं:

    A) नाम के साथ इसे अपनी वेबसाइट के रूट फोल्डर / डायरेक्टरी (बगल में index.html) पर रखें favicon.ico

    या

    बी) अपनी साइट पर <head></head>हर .htmlफ़ाइल के टैग के बीच इसे इस तरह लिंक करें:

    <head>
      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    </head>
    

यदि आप faviconकिसी वेबसाइट से देखना चाहते हैं , तो बस लिखें www.url.com/favicon.icoऔर आप (शायद) इसे देख सकते हैं। Stackoverflow का फ़ेविकॉन 16x16 पिक्सेल है और विकिपीडिया 32x32 है।

*: यहां तक ​​कि एक ब्राउज़र समस्या भी है जिसमें कोई फ़ाइल सीमा नहीं है। आप एक ब्राउज़र को अत्यधिक बड़े फ़ेविकॉन, अधिक जानकारी के साथ आसानी से क्रैश कर सकते हैं


18

इसे ' फेविकॉन ' कहा जाता है और आपको अपनी वेबसाइट के हेडर सेक्शन में नीचे दिए गए कोड को जोड़ना होगा ।

बस इसे <head>अनुभाग में जोड़ें ।

<link rel="icon" href="/your_path_to_image/favicon.jpg">


2
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

या आप इसका उपयोग कर सकते हैं

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">

ऐप्पल-टच-आइकन iOS webApps के लिए है
LasagnaAndroid

1

अपनी वेबसाइट के मूल में "favicon.ico" नाम की एक आइकन फ़ाइल जोड़ें।


याद रखें कि वास्तव में 16x16 px होना चाहिए ।
5:15 पर जुआन

3
नहीं, ऐसा नहीं है, इसे चौकोर आकार का और किसी भी आकार का होना चाहिए, इसे लोड करने में अधिक समय लगेगा
LasagnaAndroid
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.