306

हर कोई जानता है कि HTML में favicon.ico लिंक कैसे सेट करें:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

लेकिन मुझे लगता है कि यह सिर्फ मूर्खतापूर्ण है कि एक छोटे से कई बाइट आइकन के लिए आपको एक और HTTP अनुरोध की आवश्यकता है । तो मैं सोचता था, मैं background-position=0px -200px;उस बहुमूल्य HTTP अनुरोध को सहेजने और सहेजने के लिए उस छवि को प्रेत (जैसे ) का हिस्सा कैसे बना सकता था । मैं अपने लोगो और अन्य कलाकृतियों के साथ इसे मौजूदा स्प्राइट छवि में कैसे प्राप्त कर सकता हूं?

favicon.icoझरने के ग्राफ पर आइटम नंबर 31 को इंगित करने वाला रोबोट , मेरा पालतू ZAM है। वह आमतौर पर खुश है और उसके पास एक अच्छा बिंदु है जिससे मुझे पता है कि यह वेब पर कुछ रचनात्मक उन्नयन का समय है, हालांकि वह और मैं उसके संगठन पर सहमत नहीं हैं, जो मुझे लगता है कि आज थोड़ा मूर्खतापूर्ण है ...

यहां छवि विवरण दर्ज करें

— सैम
स्रोत

47

क्या यह मूर्खतापूर्ण नहीं है कि अभी तक एक एकल अनुकूलित स्ट्रीम में .css / .js / .png / .html को संयोजित करने का कोई तरीका नहीं है? आपने सोचा होगा कि अब तक कोई इस विचार के साथ आया होगा

— रिचर्डTheKiwi

9

@ रीचर्ड संबंधित: मल्टीपार्ट प्रतिक्रियाओं और Google के पास एक नए, अनुकूलित वेब प्रोटोकॉल के लिए एक पहल है जो इसे हल करती है, मैं इसका नाम भूल गया ... संपादित करें : इसका नाम SPDY है । लेकिन यह भविष्य में दूर है, जाहिर है।

— पेका

9

@ रीचर्ड उर्फ साइबरबकी, आप data:छवियों और मूल्यों के लिए एचटीएमएल फाइल में सब कुछ डाल सकते हैं और इनलाइन स्क्रिप्ट कर सकते हैं।

— zzzzBov

39

btw, अच्छा स्केच मैन :)

— फातिह एसेट

18

स्केच के लिए +1 :)

— Giuliano

140

@ Yc के उत्तर में एक मामूली सुधार बेस 64-एन्कोडेड फ़ेविकॉन को एक जावास्क्रिप्ट फ़ाइल से इंजेक्ट कर रहा है जो आमतौर पर किसी भी तरह से उपयोग और कैश किया जाएगा, और favicon.icoसंबंधित metaटैग में डेटा यूआरआई को फीड करके अनुरोध करने के मानक ब्राउज़र व्यवहार को भी दबा देगा ।

यह तकनीक अतिरिक्त http अनुरोध से बचती है और विंडोज 7 पर क्रोम, फ़ायरफ़ॉक्स और ओपेरा के हाल के संस्करणों में काम करने की पुष्टि की जाती है। हालांकि यह इंटरनेट एक्सप्लोरर 9 में कम से कम काम नहीं करता है ।

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

डेमो: turi.co/up/favicon.html

— कृत्रिम रूप से बालों को घुंघराला करना
स्रोत

3

+1 सुंदर कैशेड सफलता @ मार्सेल। PS HTTP Headers Responseमेरे .ico फ़ाइल के वर्ण मेरे आइकन के आकार के लगभग समान हैं !! आपको यह कैसा लगा?

— सैम

2

@ सलाम: मैंने देखा कि स्टैक ओवरफ्लो favicon.ico फ़ाइल के बराबर PNG के बेस 64 का आकार आधा था। अच्छा और कॉम्पैक्ट।

— मार्सेल

1

eeehm मुझे यकीन नहीं है कि मैं समझ गया कि आपका क्या मतलब है: 'फ़ाइल का आकार आधा था ...? PNG फ़ाइल जैसे icon.png? या आप इसका मतलब यह है कि जब इसके png आइकन स्वरूपित या gif के अनुरूप स्वरूप में छोटा होता है, तो इसका आधार 6464 छोटा होता है? जिज्ञासु। चीयर्स दोस्त!

— सैम

1

@ सलाम: मैं इस PNG के बेस 64 की तुलना इस ICO फाइल के बेस 64 से कर रहा था । पीएनजी संस्करण, जैसा कि ऊपर मेरे उदाहरण कोड में इस्तेमाल किया गया है, आधा आकार है।

— मार्सेल

1

ओह, मैं देख रहा हूं, जो आपके आधार को 64 उत्तर देता है, और बेस 64 पीएनजी के सामान्य उपयोग को पसंद किया गया है?

— सैम

147

मुझे लगता है कि अधिकांश भाग के लिए यह दूसरे HTTP अनुरोध में परिणाम नहीं करता है क्योंकि ये आमतौर पर पहली पहुंच के बाद ब्राउज़र के कैश में डंप हो जाते हैं।

यह वास्तव में किसी भी प्रस्तावित "समाधान" से अधिक कुशल है।

— जेम्स एंडरसन
स्रोत

52

यह एकमात्र समझदार उत्तर है। यह एक गैर-मुद्दा है जिसे ठीक करने की आवश्यकता नहीं है।

— जोडी

1

जेम्स, मेरा समाधान वास्तव में केवल एक संभावना है, लेकिन एक यह है कि मैं वास्तव में कभी किसी की सिफारिश नहीं करूंगा। लेकिन, ऐसा लगता है कि अधिकांश ब्राउज़र नए ब्राउज़र सत्र की शुरुआत में फ़ेविकॉन के लिए एक नया HTTP अनुरोध जारी करेंगे। और, यह हमेशा एक 304 वापस नहीं करता है।

— येल

4

ब्राउज़र अभी भी एक HEAD कॉल करेगा भले ही वह ब्राउज़र कैश में हो, फिर भी आपके पास HTTP अनुरोध का ओवरहेड होगा।

— आहारबोध

3

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

— डेविड कोस्टा

14

फ़ेविकॉन को किसी अच्छे स्थैतिक संसाधन की तरह लंबे समय तक समाप्त होने वाले हेडर की आवश्यकता होती है। उस के साथ, यहां तक कि HEAD कॉल्स को दबा दिया जाता है।

— पॉल अलेक्जेंडर

102

आप एक डेटा URI आज़मा सकते हैं। कोई HTTP अनुरोध नहीं!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

जब तक आपके पृष्ठों में स्थिर कैशिंग नहीं होती है, तब तक आपका फ़ेविकॉन कैश्ड नहीं हो पाएगा, और आपकी फ़ेविकॉन छवि के आकार के आधार पर, आपके स्रोत कोड के परिणामस्वरूप एक प्रकार का फूला हुआ हो सकता है।

डेटा URI फ़ेविकॉन सबसे आधुनिक ब्राउज़रों में काम करने लगता है; मैंने इसे क्रोम, फ़ायरफ़ॉक्स और सफारी के हाल के संस्करणों में मैक पर काम किया है। इंटरनेट एक्सप्लोरर में काम करने के लिए प्रतीत नहीं होता है, और संभवतः ओपेरा के कुछ संस्करण।

यदि आप पुराने IE के बारे में चिंतित हैं (और शायद आपको इन दिनों नहीं होना चाहिए), तो आप एक IE सशर्त टिप्पणी शामिल कर सकते हैं जो वास्तविक favicon.ico को पारंपरिक तरीके से लोड करेगा, क्योंकि ऐसा लगता है कि पुराने Internet Explorer नहीं है डेटा यूआरआई फेवीकोन्स का समर्थन करें

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `

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

आप बस किसी अन्य लोकप्रिय साइट के फ़ेविकॉन का उपयोग भी कर सकते हैं, जो कि उनके फ़ेविकॉन कैश्ड होने की संभावना है, जैसे http://google.com/favicon.icoकि यह कैश से परोसा जाता है।

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

— याहेल
स्रोत

1

@Pekka हाँ, यह वास्तव में एक व्यावहारिक समाधान नहीं है, क्योंकि संयुक्त राष्ट्र के कैश्ड पृष्ठों पर डेटा URI अतिरिक्त बाइट-भार संभवतः उस HTTP अनुरोध के वजन से आगे निकल जाएगा। हो सकता है कि ओपी favicon को DOM में अतुल्यकालिक रूप से इंजेक्ट कर सके।

— याहल

4

@ मैं माफी चाहता हूँ, मैं समझता हूँ कि @ का मतलब अब मेरी गलती है। बेशक आप <link rel>जावास्क्रिप्ट के माध्यम से ब्राउज़र में तत्व को पूरी तरह से एक्सेस कर सकते हैं , यह संभव होना चाहिए। मैंने इस तरह से प्रोग्राम किए हुए एक गेम को भी देखा है ... हालाँकि यह IE में काम करने के लिए प्रतीत नहीं होता है, या तो, और यह संभवतः डिफ़ॉल्ट /favicon.icoलुकअप अनुरोध को रोक नहीं पाएगा

— Pekka

2

@Pekka, मैं देख रहा हूं। पुनश्च एक अचूक खेल thats! मेरी पूरी स्क्रीन शर्म की बात है, क्योंकि आप सभी की जरूरत है कि 16x16 पिक्सल haha डालता है। यह हाइपरलिंक कुछ संभावनाओं को खोलता है जैसा कि वास्तव में उस favicon के साथ संभव है।

— सैम

3

एक लापता फ़ेविकॉन घोषणा के मामले में, सभी ब्राउज़र स्वचालित रूप /favicon.icoसे इसे खोजने के एक अंधे प्रयास में डिफ़ॉल्ट URL का अनुरोध करेंगे । इसलिए यदि आप फ़ेविकॉन छोड़ते हैं <link>(बाद में इसे जावास्क्रिप्ट के माध्यम से जोड़ते हैं) तो आप संभवतः चीजों को और भी बदतर बना सकते हैं।

— मेर Mrlygsson

2

बस अपने पारदर्शी gif को स्टोर करने के लिए favicon.ico का उपयोग करें :)

— markijbema

21

आप बेस 64 एन्कोडेड फ़ेविकॉन का उपयोग कर सकते हैं, जैसे:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />

— Dongsheng कै
स्रोत

1

संकेत: इस उत्तर में प्रयुक्त बेस 64 एन्कोडेड स्ट्रिंग एक पीएनजी फ़ाइल है और यह IE10 या पुराने के साथ काम नहीं करेगा।

— सिब्बल

2

मामले में किसी को भी जानना चाहता है यह लिनक्स पेंगुइन है।

— मार्टेलार्क

16

मुझे इस पृष्ठ पर एक दिलचस्प समाधान मिला । यह जर्मन है लेकिन आप कोड को समझने में सक्षम होंगे।

आप आइकन के बेस 64 डेटा को बाहरी स्टाइलशीट में डालते हैं, इसलिए इसे कैश किया जाएगा। अपनी वेबसाइट के प्रमुख में आपको एक आईडी के साथ फ़ेविकॉन को परिभाषित करना होगा और फ़ेविकॉन को background-imageउस आईडी पर स्टाइलशीट में सेट किया जाएगा ।

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

और HTML

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>

— फेलिक्स गेनेन
स्रोत

8

74.947 प्रतिष्ठा वाले एक व्यक्ति ने इस पृष्ठ पर कहीं कहा: "आप नहीं कर सकते!" ... फिर 50 से कम प्रतिष्ठा वाले एक अन्य व्यक्ति ने कहा: "आप कर सकते हैं!" क्या इसका मतलब यह है कि समाधान के लिए ड्राइव और ठोस अभिनव ड्राइव में कोई प्रतिष्ठा के साथ संबंध या संबंध नहीं हैं? ... खैर, तो बस कमाल है!

— सैम

4

मैंने अभी पुष्टि की है कि यह समाधान काम नहीं करता है - कम से कम क्रोम 10 और फ़ायरफ़ॉक्स 3.6 में विंडोज पर नहीं

— Már Marrlygsson

13

मैंने अभी पुष्टि की है कि यह समाधान काम करता है - कम से कम क्रोम में 10.0.648 डब्ल्यू 7 64 बिट पर और एफएफ 4.0 में डब्ल्यू 7 64 बिट पर

— सैम

4

LOL, मैंने पुष्टि की है कि उपरोक्त दो कथन विरोधाभासी प्रतीत होते हैं, थोड़ा भिन्न संस्करण संख्याओं के बावजूद मुझे संदेह है कि Chrome का व्यवहार बहुत बदल गया है। फ़ायरफ़ॉक्स शायद 3.6 से 4 से किया था, लेकिन संभावना नहीं कि क्रोम 10 ने मामूली अपडेट पर बहुत कुछ बदल दिया।

— dyasta

मैं पुष्टि कर सकता है कि इस काम करता है क्रोम 83 और Ubuntu 20.04 पर Firefox ईएसआर 68 पर, और मैं पुष्टि कर सकता है कि यह काम नहीं करता है /favicon.ico पर हिट को रोकने के लिए। तो आपको छवि मिलती है लेकिन आप अतिरिक्त एसएसएल कनेक्ट को रोकते नहीं हैं। चूंकि यह लक्ष्य था, यह एक विफलता है।

— विल्ह

14

अच्छा बिंदु और अच्छा विचार, लेकिन असंभव। एक फ़ेविकॉन को एक एकल, अलग संसाधन होना चाहिए। इसे किसी अन्य छवि फ़ाइल के साथ संयोजित करने का कोई तरीका नहीं है।

— पेका
स्रोत

1

शायद मैं अंधा हूं, लेकिन एकमात्र स्थान जिसे मैं Google खोज फ़ेविकॉन देख रहा हूं वह एक प्रेत में है: google.com/search?q=foo

— Yahel

4

@yc google.com/favicon.ico वह स्थान है जहाँ ब्राउज़र स्वचालित रूप से इसे देखेंगे

— Pekka

3

@ आप अंधे नहीं हैं, आपने खुद को बहुत रचनात्मक जवाब देने के योग्य साबित किया है ... जैसा कि पक्का ने पहले ही बताया /favicon.icoहै कि जहां ब्राउज़र ऑटो दिखेंगे। अब असली बुरी खबर आती है: यदि फ़ेविकॉन एनओएन अस्तित्व में है, तो इसका मतलब है कि त्रुटि 404 जुर्माना है जो थोड़ी देरी का कारण होगा !! लगता है इस फ़ेविकॉन कालकोठरी से कोई बच नहीं रहा है। वे बहुत छोटे हैं, लेकिन ओह बहुत ताकतवर हैं ... लाजमी हैं :)

— सैम

उचित तरीके से तेजी लाने के लिए उचित तरीके के लिए मेरा उत्तर stackoverflow.com/questions/5199902/… देखें ।

— मैट जॉइनर

8

यह ध्यान दिया जाना चाहिए कि यह, वास्तविक रूप से, एक बार अनुरोध होना चाहिए, बहुत अधिक हमेशा के लिए। बाकी सब कुछ के साथ, लंबे कैश टाइमर और उचित 301 सर्वर द्वारा लौटाए जाने से फ़ेविकॉन एक मूट बिंदु का अनुरोध करेगा (जब तक कि यह मौजूद नहीं है - yikes!)।

— केविन पेनो

9

क्या यह वास्तव में मायने रखता है?

कई ब्राउज़र फ़ेविकॉन को एक कम प्राथमिकता के रूप में लोड करते हैं ताकि यह वैसे भी पेज लोड को ब्लॉक न करे, इसलिए हाँ यह एक अतिरिक्त अनुरोध है लेकिन यह किसी भी महत्वपूर्ण रास्ते पर नहीं है।

स्वीकृत समाधान भयानक है जब तक कि जेएस को पुनः प्राप्त नहीं किया गया है और निष्पादित नहीं किया गया है, नीचे दिए गए सभी DOM तत्वों को रेंडरिंग से अवरुद्ध कर दिया जाएगा और यह अनुरोधों की संख्या को कम नहीं करता है!

— एंडी डेविस
स्रोत

8

उचित समाधान HTTP पाइपलाइनिंग का उपयोग करना है ।

HTTP पाइपलाइनिंग एक ऐसी तकनीक है जिसमें कई HTTP अनुरोधों को संबंधित प्रतिक्रियाओं की प्रतीक्षा किए बिना एक सॉकेट के लिए लिखा जाता है। पाइपलाइनिंग केवल HTTP / 1.1 में समर्थित है, 1.0 में नहीं।

यह आवश्यक है कि सर्वर इसका समर्थन करें, लेकिन जरूरी नहीं कि वे भाग लें।

HTTP पाइपलाइनिंग के लिए क्लाइंट और सर्वर दोनों का समर्थन करना आवश्यक है। पाइपलाइनिंग का समर्थन करने के लिए HTTP / 1.1 अनुरूपण सर्वर की आवश्यकता होती है। इसका मतलब यह नहीं है कि पाइप लाइन प्रतिक्रियाओं के लिए सर्वर की आवश्यकता होती है, लेकिन अगर क्लाइंट को पाइपलाइन अनुरोधों का चयन करना है, तो उन्हें असफल होने की आवश्यकता नहीं है।

कई ब्राउज़र क्लाइंट ऐसा नहीं करते हैं, जब उन्हें करना चाहिए।

अधिकांश ब्राउज़र में HTTP पाइपलाइनिंग अक्षम है।

ओपेरा में डिफ़ॉल्ट रूप से पाइपलाइनिंग सक्षम है। यह कनेक्टेड सर्वर के आधार पर नियोजित पाइपलाइनिंग के स्तर को नियंत्रित करने के लिए उपयोग करता है।

इंटरनेट एक्सप्लोरर 8, बग्गी प्रॉक्सि और हेड-ऑफ-लाइन ब्लॉकिंग से संबंधित चिंताओं के कारण पाइपलाइन अनुरोध नहीं करता है।

मोज़िला ब्राउज़र (जैसे मोज़िला फ़ायरफ़ॉक्स, सीमोंकी और कैमिनो), पाइपलाइनिंग का समर्थन करते हैं, हालांकि यह डिफ़ॉल्ट रूप से अक्षम है। यह विशेष रूप से IIS सर्वर के लिए पाइपलाइनिंग को बंद करने के लिए कुछ अनुमानों का उपयोग करता है।

कोनेकर 2.0 पाइपलाइनिंग का समर्थन करता है, लेकिन यह डिफ़ॉल्ट रूप से अक्षम है। [उद्धरण वांछित]

Google Chrome पाइपलाइनिंग का समर्थन नहीं करता है।

मैं आपको फ़ायरफ़ॉक्स में पाइपलाइनिंग को सक्षम करने की कोशिश करूँगा और वहाँ कोशिश करूँगा, या बस ओपेरा (कंपकंपी) का उपयोग करूँगा।

— मैट जॉइनर
स्रोत

7

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

— मेर gsrlygsson

@ मेर gsrlygsson जो सही नहीं है। एक राउंड ट्रिप का मतलब है कि क्लाइंट को एक अनुरोध करना होगा और फिर अनुरोध के संसाधित होने और डाउलोड होने के जवाब का इंतजार करना होगा। पाइपलाइनिंग का अर्थ है कि अनुरोध पहले ही भेज दिया जाएगा जबकि अभी भी समाप्त करने के लिए पिछले अनुरोध की प्रतीक्षा कर रहे हैं, इसलिए जब एक ही कदम हो रहा है, तो देरी का कारण समान नहीं होगा ...

— पीटर

1

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

— मेर Mrlygsson

3

@ मेर gsrlygsson और उनके अपवर्जकों: यह tranport लेयर में नहीं किया गया है। वास्तविक दुनिया के मॉडल में यह सब अनुप्रयोग परत में किया जाता है। सैद्धांतिक रूप से पाइपलाइनिंग सत्र परत पर होनी चाहिए।

— मैट जॉइनर

4

मैं आपके साथ उन शब्दार्थों पर बहस नहीं करूंगा। तथ्य यह है कि सैम अभी भी "पाइपलाइनिंग का उपयोग नहीं कर सकता है" (साफ-सुथरा है) अपने आगंतुकों के लिए अपनी साइट को तेजी से लोड करने के लिए, जैसा कि आप खुद को इंगित करते हैं, और बी) ऑप्ट-इन के रूप में piplining समर्थन ए) धब्बेदार है। व्यक्तिगत उपयोगकर्ता।

— Mr Aprrlygsson

6

वास्तव में प्रश्न का उत्तर नहीं है, लेकिन केवल मार्सेल और येल्हक द्वारा दिए गए उत्तरों की प्रशंसा करने के लिए मैं 404 फ़ेविकॉन मुद्दे पर एक सुरुचिपूर्ण समाधान प्रदान करता हूं।

क्योंकि कुछ ऐप्स और ब्राउजर और व्हाट्सएप favicon.com के लिए चेक नहीं करते हैं और अगर आइकन साइट रूट में नहीं मिलता है, तो आप बस 204 रिस्पॉन्स हेडर के साथ रिक्वेस्ट का जवाब दे सकते हैं ।

अपाचे उदाहरण:

अपाचे विकल्प एक (और मेरा पसंदीदा), आपके .htacces या .conf में सरल एक लाइनर। "

Redirect 204 /favicon.ico

अपाचे विकल्प दो:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

आगे पढ़ने के लिए, http://www.phpied.com/204-no-content/ पर Stoyan Stefanov द्वारा अच्छा ब्लॉग पोस्ट है

— एंथोनी हट्ज़ोपुलोस
स्रोत

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

— एंडी डेविस

5

यह एक महान विचार है, लेकिन अगर Google ने इसे अपने मुखपृष्ठ पर नहीं किया है, तो मुझे यकीन है कि यह (वर्तमान में) नहीं किया जा सकता है

— cusimar9
स्रोत

13

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

— सिंटैक्स एरर

8

जाहिर है, Google को एसओ से उनके विचार मिलते हैं, दूसरे तरीके से नहीं;)

— user123444555621

3

अच्छा जवाब, अगर गूगल उनके पेज को तेजी से बना सकता है, तो वे करेंगे।

— डेविड डी सी ई फ्रीटास

4

मुझे क्षमा करें, लेकिन आप फ़ेविकॉन को किसी अन्य संसाधन के साथ जोड़ नहीं सकते।

इसका मतलब है कि आपके पास मूल रूप से दो विकल्प हैं:

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

PS क्रिएटिव समाधान जो काम नहीं करेंगे :

अजीब सीएसएस डेटा-यूरी ट्रिक (टिप्पणीकार फेलिक्स गेनेन द्वारा लिंक) काम नहीं करता है ।
फ़ेविकॉन <link>तत्व के विलंबित इंजेक्शन को निष्पादित करने के लिए जावास्क्रिप्ट का उपयोग करना (जैसा कि user @yc द्वारा सुझाया गया है) संभवतः दो HTTP अनुरोधों के परिणामस्वरूप चीज़ों को और भी बदतर बना देगा ।

— मेर gsrlygsson
स्रोत

1

अन्य समाधान जो काम नहीं करेंगे: एक .ico में कई आइकन, और एक छवि टैग में इको का उपयोग करके इस उम्मीद में कि यह फ़ेविकॉन की तुलना में एक और तस्वीर प्रदर्शित करेगा। एक और फ़ाइल के साथ फ़ेविकॉन को एक साथ जोड़ना।

— निशानिजेमा

3

तुम भी छोटे डेटा पदचिह्न के लिए ICO प्रारूप के बजाय 8-बिट PNG का उपयोग कर सकते हैं। केवल एक चीज जिसे आपको बदलना है, वह "डेटा: इमेज / पीएनजी" के बजाय "डेटा: इमेज / एक्स-आइकन" माइम टाइप हेडर का उपयोग कर रहा है:

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

"प्रकार" विशेषता "छवि / पीएनजी" या "छवि / एक्स-आइकन" हो सकती है, दोनों मेरे लिए काम करते हैं।

आप ICO को जिम्प का उपयोग करके 8-बिट पीएनजी में परिवर्तित कर सकते हैं या कन्वर्ट कर सकते हैं:

convert favicon.ico -depth 8 -strip favicon.png

और बेस 64 कमांड का उपयोग करके PN64 बाइनरी को बेस 64 स्ट्रिंग में एनकोड करें:

base64 favicon.png

— andrej
स्रोत

2

यहाँ सबसे आसान तरीका है:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

यह किस आइकन का प्रतिनिधित्व करता है? नीचे उत्तर दें और आगे बढ़ें!

— rjobidon
स्रोत

1

सेब आइकन?

— स्टाइल

2

2020 में किलर सॉल्यूशन

मूल रूप से प्रश्न पूछे जाने के नौ साल बाद यह समाधान आवश्यक रूप से आता है, क्योंकि हाल ही में जब तक, अधिकांश ब्राउज़र .svgप्रारूप में फ़ेविकॉन को संभालने में सक्षम नहीं हैं ।

अब ऐसा नहीं है।

देखें: https://caniuse.com/#feat=link-icon-svg

1) एसवीजी को फेविकॉन प्रारूप के रूप में चुनें

अभी, जून 2020 में, ये ब्राउज़र SVG Favicons को संभाल सकते हैं :

क्रोम
फ़ायरफ़ॉक्स
धार
ओपेरा
Android के लिए क्रोम
काईओएस ब्राउज़र

ध्यान दें कि ये ब्राउज़र अभी भी नहीं कर सकते हैं:

सफारी
iOS सफारी
Android के लिए फ़ायरफ़ॉक्स

मन में उपरोक्त के साथ, हम आत्मविश्वास से एक एसवीजी फेविकॉन का उपयोग कर सकते हैं ।

2) एसवीजी को डेटा यूआरआई के रूप में प्रस्तुत करें

यहाँ मुख्य उद्देश्य HTTP रिक्वेस्ट से बचना है।

जैसा कि अन्य समाधानों ने उल्लेख किया है, ऐसा करने के लिए एक सुंदर स्मार्ट तरीका एक HTTP URL के बजाय एक डेटा यूआरआई का उपयोग करना है ।

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

3) संपूर्ण एसवीजी एक इमोजी है

दिसंबर 2019 में, लिंड्रो लिनारेस यह महसूस करने वाले पहले लोगों में से एक थे कि चूंकि क्रोम ने एसवीजी फेवीकोन्स का समर्थन करने के लिए फ़ायरफ़ॉक्स में शामिल हो गए थे, यह देखने के लिए प्रयोग करने योग्य था कि क्या एक इमोजी से एक फ़ेविकॉन बनाया जा सकता है:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

लिनारेस का कूबड़ सही था।

कई महीनों बाद (मार्च 2020), कोड पाइरेट ली वेरो को एक ही बात का एहसास हुआ:

https://twitter.com/leaverou/status/1241619866475474946

और फ़ेविकॉन फिर से कभी नहीं थे।

4) समाधान को स्वयं लागू करना:

यहाँ एक सरल एसवीजी है:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

और यहाँ डेटा यूआरआई के रूप में एक ही एसवीजी है :

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

और, अंत में, यहाँ एक Favicon के रूप में डेटा यूआरआई है :

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5) अधिक चाल

चूंकि फेविकॉन एक एसवीजी है, किसी भी संख्या में फ़िल्टर प्रभाव (एसवीजी और सीएसएस दोनों) इसे लागू किया जा सकता है।

उदाहरण के लिए, ऊपर दिए गए सफ़ेद यूनिकॉर्न फ़ेविकॉन के साथ , हम आसानी से फ़िल्टर करके ब्लैक यूनिकॉर्न फ़ेविकॉन बना सकते हैं :

style="filter: invert(100%);"

काले गेंडा फ़ेविकॉन:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

— Rounin
स्रोत