वेब साइट पर फ़ेविकॉन बनाने के लिए सबसे अच्छा अभ्यास क्या है?

103

सवाल

  • एक बनाने के लिए सबसे अच्छा अभ्यास क्या है वेब साइट पर फ़ेविकॉन ?
  • और एक .ico है 16x16 और 32x32 दोनों छवियों के साथ फाइल केवल 16x16 के साथ .png फाइल से बेहतर है ?
  • क्या आज सही विधि को प्राथमिकता दी जा सकती है जो पुराने ब्राउज़रों में काम नहीं कर रही है?

विधि 1

नाम की एक फाइल रखना favicon.icoमुख्य निर्देशिका में का एक तरीका है। ब्राउज़र हमेशा उस फ़ाइल का अनुरोध करता है। आप देख सकते हैं कि अपाचे लॉग फ़ाइलों में।

विधि 2

HTML टैग <head>अनुभाग में:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html  favicon 
— bytecode77
स्रोत

जवाबों:

153

फ़ेविकॉन बनाने के कई तरीके हैं। आपके लिए सबसे अच्छा तरीका विभिन्न कारकों पर निर्भर करता है:

  • इस कार्य पर आप जो समय व्यतीत कर सकते हैं। कई लोगों के लिए, यह "जितना जल्दी हो सके" है।
  • आप जो प्रयास करने को तैयार हैं। जैसे, बेहतर परिणाम के लिए हाथ से 16x16 आइकन खींचना।
  • विशिष्ट बाधाएं, जैसे किसी विशिष्ट ब्राउज़र को विषम ऐनक का समर्थन करना।

पहली विधि: एक फ़ेविकॉन जनरेटर का उपयोग करें

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

इस तरह के समाधान के लाभ: यह त्वरित है और सभी संगतता विचार आपके लिए पहले से ही संबोधित किए गए थे।

दूसरी विधि: एक favicon.ico बनाएँ (केवल डेस्कटॉप ब्राउज़र)

जैसा कि आप सुझाव देते हैं, आप एक favicon.icoफ़ाइल बना सकते हैं जिसमें 16x16 और 32x32 चित्र हैं (ध्यान दें कि Microsoft 16x16, 32x32 और 48x48 की सिफारिश करता है )।

फिर, इसे अपने HTML कोड में घोषित करें:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

यह विधि पुराने और नए सभी डेस्कटॉप ब्राउज़रों के साथ काम करेगी। लेकिन अधिकांश मोबाइल ब्राउज़र फ़ेविकॉन की अनदेखी करेंगे।

रखने के अपने सुझाव के बारे में favicon.icoफ़ाइल को रूट में और इसे घोषित न करने के में: सावधान रहें, हालांकि यह तकनीक अधिकांश ब्राउज़रों पर काम करती है, यह 100% विश्वसनीय नहीं है। उदाहरण के लिए, विंडोज सफारी इसे नहीं पा सकता है (दी गई है: यह ब्राउज़र किसी तरह विंडोज पर अपग्रेड किया गया है, लेकिन आपको बिंदु मिल जाएगा)। पीएनजी आइकन (आधुनिक ब्राउज़रों के लिए) के साथ संयुक्त होने पर यह तकनीक उपयोगी है।

तीसरा तरीका: एक favicon.ico, एक PNG आइकन और एक Apple टच आइकन (सभी ब्राउज़र) बनाएं

अपने प्रश्न में, आप मोबाइल ब्राउज़रों का उल्लेख नहीं करते हैं। उनमें से ज्यादातर favicon.icoफ़ाइल को अनदेखा कर देंगे । यद्यपि आपकी साइट डेस्कटॉप ब्राउज़र के लिए समर्पित हो सकती है, लेकिन संभावना है कि आप मोबाइल ब्राउज़र को पूरी तरह से अनदेखा नहीं करना चाहते हैं।

आप इसके साथ एक अच्छी संगतता प्राप्त कर सकते हैं:

  • favicon.ico, ऊपर देखो।
  • एंड्रॉइड क्रोम के लिए एक 192x192 पीएनजी आइकन
  • एक 180x180 Apple टच आइकन (iPhone 6 प्लस के लिए; अन्य डिवाइस इसे आवश्यकतानुसार नीचे स्केल करेगा)।

उनके साथ घोषणा करें 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

यह पूरी कहानी नहीं है, लेकिन ज्यादातर मामलों में यह काफी अच्छी है।

— philippe_b
स्रोत
9
दरअसल, अभी भी अक्सर इस्तेमाल किया जाने वाला <लिंक rel = "शॉर्टकट आइकन" href = "/ path / to / icons / favicon.ico"> एक वैध विकल्प नहीं है। यह मानक भी नहीं है और केवल IE इसका समर्थन करता है। और IE 9 के रूप में, IE डिफ़ॉल्ट 'मूल को देखो' विधि का समर्थन करता है। तो यह सभी ब्राउज़रों का समर्थन करने का एक तरीका नहीं है, बल्कि IE <9. का समर्थन करने का एक तरीका है। (अब मानक) रूट में 'जगह' विधि या, यदि आप जोर देते हैं, तो जोड़ें: <लिंक rel = "आइकन" href = "/ favicon.ico"> (भले ही यह या तो मानक नहीं है)
— HappyMe
7
फ़ेविकॉन तंत्र निश्चित रूप से वर्षों में विकसित हुआ है। मैंने देखा कि आज MDN पर युक्ति कहती है: शॉर्टकट लिंक प्रकार को अक्सर आइकन से पहले देखा जाता है, लेकिन यह लिंक प्रकार गैर-अनुरूप है, उपेक्षित है और वेब लेखकों को अब इसका उपयोग नहीं करना चाहिए। डेवलपर के<link ref="icon" ...> बजाय इसका उपयोग करें। <link ref="shortcut icon" ...>
— pm.mozilla.org/en-US/docs/Web/HTML/Link_types
1
प्रतिक्रिया के लिए धन्यवाद @ broc.seib इस टिप्पणी को लिखने के समय, मैंने "शॉर्टकट आइकन" क्यों नहीं "आइकॉन" का ट्रैक खो दिया। यकीन है, इस कहानी में मोज़िला की आवाज़ है। लेकिन हमें यह नहीं भूलना चाहिए कि यह घोषणा पहली जगह में क्यों है: विरासत ब्राउज़रों का समर्थन करने के लिए, जैसे IE 8. अधिकांश हालिया ब्राउज़र पीएनजी आइकन का उपयोग करते हैं, जो ICO की तुलना में क्लीनर और हल्का हैं। RealFavicon के लिए मेरी योजना इस घोषणा को पूरी तरह से हटाने की है। इससे पहले, मुझे आईई 7, 8 और 9 पर परीक्षण चलाने की आवश्यकता है
— फिलिप
इस बात का उल्लेख नहीं है, कि यदि आप इस पृष्ठ पर, स्टैक ओवरफ्लो पर "स्रोत देखें", ref="shortcut icon"तो ठीक वही है जो वे उपयोग करते हैं।
— स्टीवन वेंटिमिग्लिया
1
@laggingreflex /favicon.icoपसंदीदा तरीका है। यह वही है जो आपको मिलने पर मिलता है www.google.com। फिर भी, आप अपनी रूट डायरेक्टरी को आइकन से प्रदूषित नहीं करना चाह सकते हैं। उस स्थिति में, मार्कअप ठीक काम करता है।
— दर्शन
2
  1. आप इस वेबसाइट के साथ favin.ico उत्पन्न करने के लिए काम कर सकते हैं
  2. मैं उपयोग करने की सलाह देता हूं .ico प्रारूप क्योंकि पींग 1 विधि के साथ काम नहीं करता है और आईसीओ अधिक विस्तार कर सकता है!
  3. दोनों विधि सभी ब्राउज़र के साथ काम करते हैं लेकिन जब यह स्वचालित रूप से काम करता है तो आप इसके लिए एक कोड टाइप करना चाहते हैं? इसलिए मुझे लगता है कि विधि 1 बेहतर है।
— a828h
स्रोत
2

मैंने https://iconifier.net का उपयोग किया। मैंने अपनी छवि अपलोड की, छवियों को ज़िप फ़ाइल में डाउनलोड किया, अपने सर्वर पर छवियां जोड़ीं, साइट पर दिए गए निर्देशों का पालन किया जिसमें मेरे index.html के लिंक शामिल थे और यह काम किया। मेरा फ़ेविकॉन अब सफारी में अपने iPhone पर दिखाता है जब 'होम स्क्रीन पर जोड़ें'

— Hblegg
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.