เป็นเรื่องที่โง่ ๆ ที่ favicon ตัวเล็ก ๆ นั้นต้องการ HTTP อีกอันหรือไม่ ฉันจะใส่ favicon ในเทพดาได้อย่างไร?

306

ทุกคนรู้วิธีตั้งค่าลิงค์ favicon.ico ใน HTML:

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

แต่ผมคิดว่ามันเป็นเพียงโง่ที่เล็ก ๆ หลายไบต์ไอคอนที่คุณต้องการเลยร้องขอ HTTP อีก ฉันจึงสงสัยว่าฉันจะทำให้ส่วนภาพของ sprite (เช่นbackground-position=0px -200px;) เป็นไปได้อย่างไรเพื่อเร่งความเร็วและบันทึกคำขอ HTTP ที่มีค่านั้น ฉันจะนำสิ่งนี้ไปเป็นภาพสไปรท์ที่มีโลโก้และงานศิลปะอื่น ๆ ได้อย่างไร

หุ่นยนต์ที่ชี้ไปยังfavicon.icoหมายเลขรายการ 31 บนกราฟน้ำตกเป็นสัตว์เลี้ยงของฉัน ZAM เขามักจะมีความสุขมากกว่าและเขาก็มีจุดดีที่ทำให้ฉันรู้ว่าถึงเวลาสำหรับการอัพเกรดความคิดสร้างสรรค์บนเว็บแม้ว่าเขาและฉันจะไม่เห็นด้วยกับชุดของเขาซึ่งฉันคิดว่าวันนี้โง่ไปหน่อย ...

ป้อนคำอธิบายรูปภาพที่นี่

javascript  html  css  performance  favicon 
— แซม
แหล่งที่มา
47
เป็นเรื่องโง่ที่ยังไม่มีวิธีรวม. css / .js / .png / .html เข้ากับสตรีมที่ได้รับการเพิ่มประสิทธิภาพเดียวหรือไม่ คุณคงคิดว่าจะมีใครบางคนคิดไอเดียนี้ขึ้นในตอนนี้
— RichardTheKiwi
9
ที่เกี่ยวข้อง @ Richard: การตอบสนอง Multipartและ Google มีความคิดริเริ่มใหม่สำหรับโปรโตคอลเว็บที่ดีที่สุดที่แก้นี้ผมลืมชื่อของมัน ... เกิดแก้ไข : มันชื่อSPDY แต่มันก็ยังห่างไกลในอนาคตอย่างเห็นได้ชัด
— Pekka
9
@Richard aka cyberkiwi คุณสามารถใส่ทุกอย่างลงในไฟล์ html ที่มีdata:ค่าสำหรับรูปภาพและสคริปต์แบบอินไลน์
— zzzzBov
39
btw, คนร่างที่ดี :)
— Fatih Acet
18
+1 สำหรับร่าง :)
— Giuliano

คำตอบ:

140

การปรับปรุงคำตอบของ @ ycเล็กน้อยคือการฉีด favicon ที่เข้ารหัส 64 จากไฟล์ JavaScript ที่ปกติจะใช้และแคชต่อไปและยังหยุดพฤติกรรมเบราว์เซอร์มาตรฐานของการร้องขอfavicon.icoโดยป้อน URI ข้อมูลในmetaแท็กที่เกี่ยวข้อง

เทคนิคนี้หลีกเลี่ยงการร้องขอ http พิเศษและได้รับการยืนยันให้ทำงานใน Chrome, Firefox และ Opera เวอร์ชันล่าสุดใน Windows 7 อย่างไรก็ตามอย่างน้อยมันก็ไม่สามารถใช้งานได้ใน Internet Explorer 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 การพัฒนาแคชที่สวยงาม @Marcel ป.ล. ตัวละครในHTTP Headers Responseไฟล์. ico ของฉันมีขนาดใกล้เคียงกับไอคอนของฉัน !! คุณชอบสิ่งนั้นอย่างไร
— แซม
2
@ แซม: ฉันสังเกตเห็น base64 ของPNG ที่เทียบเท่ากับไฟล์favicon.icoของ Stack Overflow มีขนาดเพียงครึ่งเดียว สวยและกระทัดรัด
— Marcel
1
eeehm ฉันไม่แน่ใจว่าฉันเข้าใจสิ่งที่คุณหมายถึง: 'ไฟล์มีขนาดครึ่งหนึ่งของ ... ? ไฟล์ PNG เช่น icon.png? หรือคุณหมายถึง base64 ที่ใกล้เคียงกันของมันเล็กกว่าเมื่อ png ของมันถูกฟอร์แมทไอคอนหรือ gif? อยากรู้อยากเห็น ไชโยเพื่อน!
— แซม
1
@ แซม: ฉันกำลังเปรียบเทียบ base64 ของPNG นี้กับ base64 ของไฟล์ ICOนี้ รุ่น PNG ตามที่ใช้ในโค้ดตัวอย่างของฉันด้านบนมีขนาดครึ่งหนึ่ง
— Marcel
1
โอ้ฉันเห็นแล้วว่านั่นทำให้คำตอบพื้นฐานของคุณ 64 และการใช้รูปแบบ base64 PNG โดยทั่วไปเป็นทางเลือกที่ต้องการใช่ไหม?
— แซม
148

ฉันคิดว่าส่วนใหญ่มันไม่ได้ส่งผลให้มีการร้องขอ HTTP อื่น ๆ เนื่องจากสิ่งเหล่านี้มักจะถูกทิ้งไว้ในแคชของเบราว์เซอร์หลังจากการเข้าถึงครั้งแรก

ซึ่งมีประสิทธิภาพมากกว่าโซลูชัน "ที่เสนอ" ใด ๆ

— James Anderson
แหล่งที่มา
52
นี่คือคำตอบที่สมเหตุสมผลเท่านั้น นี่เป็นปัญหาที่ไม่ต้องแก้ไข
— JoDG
1
James ทางออกของฉันเป็นเพียงความเป็นไปได้จริง ๆ แต่เป็นสิ่งที่ฉันไม่เคยแนะนำใครให้ใคร แต่ดูเหมือนว่าเบราว์เซอร์ส่วนใหญ่จะออกคำขอ HTTP ใหม่สำหรับ favicon ที่จุดเริ่มต้นของเซสชันเบราว์เซอร์ใหม่ และมันก็ไม่ได้ส่งคืน 304 เสมอไป
— Yahel
4
เบราว์เซอร์จะยังคงทำการเรียก HEAD แม้ว่าจะอยู่ในแคชของเบราว์เซอร์ดังนั้นคุณจะยังมีโอเวอร์เฮดของคำขอ HTTP
— dietbuddha
3
ที่จริงทุกอย่างขึ้นอยู่กับเบราว์เซอร์ ส่วนใหญ่มักจะมองหา favicon ในบางสถานที่แม้ว่าหน้าเว็บจะไม่พูดถึงมันและทำการเรียก HEAD สำหรับการรีเฟรชทุกครั้ง
— David Costa
14
favicon ต้องการส่วนหัวที่หมดอายุแบบยาวเหมือนกับรีซอร์สสแตติกใด ๆ ที่ดี เมื่อถึงตอนนั้นการโทร HEAD ก็จะถูกระงับ
— พอลอเล็กซานเด
102

คุณสามารถลองใช้ URI ข้อมูล ไม่มีการร้องขอ HTTP!

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

หากหน้าเว็บของคุณไม่มีการแคชแบบคงที่ favicon ของคุณจะไม่สามารถแคชได้และขึ้นอยู่กับขนาดของภาพ favicon ของคุณซอร์สโค้ดของคุณอาจได้รับผลบวม

ดูเหมือนว่าข้อมูล URI favicons จะทำงานในเบราว์เซอร์ที่ทันสมัยที่สุด ฉันใช้งานเวอร์ชันล่าสุดของ Chrome, Firefox และ Safari บน Mac ดูเหมือนจะไม่ทำงานใน Internet Explorer และอาจเป็นบางเวอร์ชันของ Opera

หากคุณกังวลเกี่ยวกับ IE เก่า (และคุณอาจไม่ควรเป็นในวันนี้) คุณสามารถใส่ความคิดเห็นตามเงื่อนไขของ IE ที่จะโหลด favicon.ico ที่แท้จริงในแบบดั้งเดิมเนื่องจากดูเหมือนว่า Internet Explorer รุ่นเก่าจะไม่ รองรับ Data URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. รวมไฟล์ favicon.ico ไว้ในไดเรกทอรีรากของคุณเพื่อให้ครอบคลุมเบราว์เซอร์ที่จะทำการร้องขอด้วยวิธีใดวิธีหนึ่งเนื่องจากเบราว์เซอร์เหล่านั้นหากตรวจสอบแล้วไม่ว่าคุณจะทำอะไรคุณก็อาจไม่ขอ HTTP กับการตอบกลับ 404 .

คุณสามารถใช้ favicon ของเว็บไซต์ยอดนิยมอื่นซึ่งน่าจะมีแคช favicon ของพวกเขาเช่นhttp://google.com/favicon.icoเพื่อให้บริการจากแคช

ในฐานะที่เป็นผู้แสดงความคิดเห็นได้ชี้ให้เห็นเพียงเพราะคุณสามารถทำเช่นนี้ไม่ได้หมายความว่าคุณควรเพราะเบราว์เซอร์บางอย่างจะขอ favicon.ico โดยไม่คำนึงถึงเทคนิคที่เราคิด จำนวนค่าโสหุ้ยที่คุณจะบันทึกด้วยการทำเช่นนี้คือจิ๋วเมื่อเทียบกับการประหยัดที่คุณได้รับจากการทำสิ่งต่าง ๆ เช่น gzipping การใช้อนาคตอันใกล้จะหมดอายุส่วนหัวสำหรับเนื้อหาแบบคงที่การลดขนาดไฟล์ JavaScript ให้บริการไฟล์สแตติกจาก CDN เป็นต้น

— Yahel
แหล่งที่มา
1
@Pekka ใช่มันไม่ใช่วิธีการแก้ปัญหาจริง ๆ เนื่องจากข้อมูล URI ไบต์พิเศษของน้ำหนักบนหน้าเว็บที่ไม่ได้แคชอาจมีน้ำหนักมากกว่าคำขอ HTTP นั้น บางที OP สามารถฉีด favicon ลงใน DOM แบบอะซิงโครนัสได้
— Yahel
4
@ แซมฉันขอโทษฉันเข้าใจว่า @yc ในตอนนี้แปลว่าอะไรผิดพลาดของฉัน แน่นอนว่าคุณสามารถเข้าถึง<link rel>องค์ประกอบในเบราว์เซอร์ผ่าน JavaScript ได้อย่างสมบูรณ์แบบ ฉันเคยเห็นเกมที่ตั้งโปรแกรมด้วยวิธีนี้ ... แต่มันก็ไม่ได้ทำงานใน IE เช่นกันและมันอาจจะไม่ป้องกัน/favicon.icoคำขอค้นหาเริ่มต้น
— Pekka
2
@ เพกาก้าฉันเข้าใจแล้ว PS นั่นเป็นเกมที่เพิ่มความน่าเชื่อถือ! ทำให้หน้าจอทั้งหมดของฉันสมจริงจนน่าละอายเนื่องจากคุณต้องการเพียงแค่นั้นคือ 16x16 พิกเซลฮ่าฮ่า ไฮเปอร์ลิงก์นี้เปิดโอกาสให้กับ favicon นั้น
— Sam
3
ในกรณีที่ไม่มีการประกาศ favicon เบราว์เซอร์ทั้งหมดจะขอ URL เริ่มต้นโดยอัตโนมัติ/favicon.icoในการพยายามค้นหา ดังนั้นหากคุณไม่สนใจ favicon <link>(เพื่อเพิ่มในภายหลังผ่าน Javascript) คุณอาจจะทำให้สิ่งต่าง ๆ แย่ลง
— MárÖrlygsson
2
เพียงแค่ใช้ favicon.ico ในการจัดเก็บของคุณใส GIF :)
— markijbema
21

คุณสามารถใช้ favicon เข้ารหัส base64 เช่น:

<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 Cai
แหล่งที่มา
1
คำแนะนำ: สตริงที่เข้ารหัส base64 ที่ใช้ในคำตอบนี้คือไฟล์ PNG และจะไม่ทำงานกับ IE10 หรือเก่ากว่า
— sibbl
2
ในกรณีที่ใครอยากรู้ว่ามันคือเพนกวินลินุกซ์
— Martlark
17

ฉันพบทางออกที่น่าสนใจในหน้านี้ มันเป็นภาษาเยอรมัน แต่คุณจะสามารถเข้าใจรหัสได้

คุณใส่ข้อมูล base64 ของไอคอนลงในสไตล์ชีทภายนอกดังนั้นมันจะถูกแคช ในส่วนหัวของเว็บไซต์ของคุณคุณจะต้องกำหนด favicon ด้วย id และ favicon นั้นถูกตั้งเป็น a background-imageในสไตล์ชีทสำหรับ id นั้น

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 คนพูดว่า: "คุณทำได้!" นี่หมายความว่าการขับเคลื่อนเพื่อการแก้ปัญหาและนวัตกรรมที่เป็นรูปธรรมนั้นไม่มีการเชื่อมโยงหรือความสัมพันธ์กับชื่อเสียง ... งั้นมันก็ยอดเยี่ยมมาก!
— Sam
4
ฉันเพิ่งยืนยันว่าโซลูชันนี้ใช้งานไม่ได้ - อย่างน้อยไม่ได้อยู่ใน Chrome 10 และ Firefox 3.6 บน Windows
— MárÖrlygsson
13
ฉันได้รับการยืนยันเพียงว่าการแก้ปัญหานี้ไม่ทำงาน - อย่างน้อยใน Chrome บน 10.0.648 W7 64 บิตและใน FF 4.0 บน W7 64bit
— แซม
4
ฮ่า ๆ ฉันได้ยืนยันข้อความข้างต้นสองข้อความที่ขัดแย้งกันแม้ว่าจะมีหมายเลขเวอร์ชั่นที่แตกต่างกันเล็กน้อย แต่ฉันสงสัยว่าพฤติกรรมของ Chrome เปลี่ยนแปลงไปมากขนาดนั้น Firefox อาจทำจาก 3.6 เป็น 4 แต่ Chrome 10 ไม่น่าเปลี่ยนไปมากนักจากการอัพเดทเล็กน้อย
— dyasta
ฉันสามารถยืนยันได้ว่านี่ใช้งานได้กับ Chrome 83 และ Firefox ESR 68 บน Ubuntu 20.04 และฉันสามารถยืนยันได้ว่าไม่สามารถใช้งานได้กับ /favicon.ico ดังนั้นคุณจะได้รับภาพ แต่คุณไม่ได้ป้องกันการเชื่อมต่อ SSL เพิ่มเติม เนื่องจากเป็นเป้าหมายนี่คือความล้มเหลว
— วิล
14

จุดดีและความคิดที่ดี แต่เป็นไปไม่ได้ favicon จะต้องเป็นทรัพยากรที่แยกจากกัน ไม่มีวิธีรวมกับไฟล์รูปภาพอื่น

— Pekka
แหล่งที่มา
1
บางทีฉันอาจตาบอด แต่ที่เดียวที่ฉันเห็น favicon การค้นหาของ Google อยู่ในสไปรต์: google.com/search?q=foo
— Yahel
4
@yc google.com/favicon.icoเป็นสถานที่ที่เบราว์เซอร์จะค้นหาโดยอัตโนมัติ
— Pekka
3
@ หากคุณไม่ได้ตาบอดคุณได้พิสูจน์ตัวเองแล้วว่าคุ้มค่ากับคำตอบที่สร้างสรรค์มาก ๆ ... เนื่องจาก Pekka ได้ชี้ให้เห็นแล้ว/favicon.icoว่าเบราว์เซอร์จะดูอัตโนมัติอย่างไร ตอนนี้เป็นข่าวร้ายจริง: ถ้า favicon ไม่มีอยู่จริงมันหมายถึงข้อผิดพลาด 404 โทษซึ่งจะทำให้ล่าช้าเล็กน้อยเช่นกัน !! ดูเหมือนว่าจะไม่มีทางหนีจากดันเจี้ยน favicon นี้ พวกมันเล็กมาก แต่โอ้ยิ่งใหญ่ ... dammit :)
— Sam
ดูคำตอบของฉันstackoverflow.com/questions/5199902/…สำหรับวิธีที่เหมาะสมในการเร่งความเร็วในวิธีที่เหมาะสม
— Matt Joiner
8
ควรสังเกตว่าสิ่งนี้ควรจะเป็นคำขอครั้งเดียวและแนบเนียนตลอดไป เช่นเดียวกับทุกอย่างตัวจับเวลาแคชที่ยาวและการส่งคืนเซิร์ฟเวอร์ 301 ที่เหมาะสมจะทำให้ favicon ร้องขอจุดที่สงสัย (ยกเว้นในกรณีที่ไม่มีอยู่ - yikes!)
— Kevin Peno
9

มันสำคัญจริงๆหรือ

เบราว์เซอร์จำนวนมากโหลด favicon เป็นลำดับความสำคัญต่ำเพื่อที่จะไม่ได้ปิดกั้นการโหลดหน้าเว็บอยู่แล้วดังนั้นใช่มันเป็นคำขอพิเศษ แต่ไม่ได้อยู่ในเส้นทางที่สำคัญใด ๆ

โซลูชันที่ยอมรับนั้นน่ากลัวเพราะจนกระทั่ง JS ได้รับและเรียกใช้องค์ประกอบ DOM ทั้งหมดด้านล่างจะถูกปิดกั้นไม่ให้แสดงผลและจะไม่ลดจำนวนคำขอ!

— แอนดี้เดวีส์
แหล่งที่มา
8

วิธีการแก้ปัญหาที่เหมาะสมคือการใช้HTTP pipelining

HTTP pipelining เป็นเทคนิคที่คำร้องขอ HTTP หลายรายการถูกเขียนไปยังซ็อกเก็ตเดียวโดยไม่ต้องรอคำตอบที่สอดคล้องกัน การวางท่อนั้นรองรับใน HTTP / 1.1 เท่านั้นไม่ใช่ใน 1.0

จำเป็นต้องให้เซิร์ฟเวอร์รองรับ แต่ไม่จำเป็นต้องแบ่งส่วน

HTTP pipelining ต้องการทั้งไคลเอนต์และเซิร์ฟเวอร์เพื่อสนับสนุน HTTP / 1.1 ที่สอดคล้องกับเซิร์ฟเวอร์จำเป็นต้องมีเพื่อรองรับการวางท่อ นี่ไม่ได้หมายความว่าเซิร์ฟเวอร์จะต้องตอบสนองไปป์ไลน์ แต่พวกเขาไม่จำเป็นต้องล้มเหลวหากลูกค้าเลือกที่จะส่งคำขอไปป์ไลน์

เบราว์เซอร์ไคลเอนต์หลายคนไม่ทำเมื่อควร

HTTP pipelining ถูกปิดการใช้งานในเบราว์เซอร์ส่วนใหญ่

  • Opera เปิดใช้งาน pipelining เป็นค่าเริ่มต้น มันใช้ฮิวริสติกส์เพื่อควบคุมระดับการวางท่อที่ใช้ทั้งนี้ขึ้นอยู่กับเซิร์ฟเวอร์ที่เชื่อมต่อ
  • Internet Explorer 8 ไม่ได้ดำเนินการตามคำขอเนื่องจากมีข้อกังวลเกี่ยวกับพร็อกซี buggy และการบล็อกส่วนหัวของบรรทัด
  • เบราว์เซอร์ Mozilla (เช่น Mozilla Firefox, SeaMonkey และ Camino) รองรับการวางท่ออย่างไรก็ตามจะปิดการใช้งานตามค่าเริ่มต้น มันใช้การวิเคราะห์พฤติกรรมบางอย่างโดยเฉพาะอย่างยิ่งการปิด pipelining สำหรับเซิร์ฟเวอร์ IIS
  • Konqueror 2.0 รองรับการวางท่อ แต่จะปิดการใช้งานตามค่าเริ่มต้น
  • Google Chrome ไม่รองรับการวางท่อ

ฉันอยากจะแนะนำให้คุณลองเปิดใช้งาน pipelining ใน Firefox และลองใช้งานที่นั่นหรือเพียงแค่ใช้ Opera (ตัวสั่น)

— Matt Joiner
แหล่งที่มา
7
ไปป์ไลน์การปรับให้เหมาะสมที่ทำได้ในชั้นการขนส่ง มันยังเกี่ยวข้องกับ HTTP round-trip แยกต่างหากสำหรับ favicon ซึ่งเป็นคำถามที่ถาม
— MárÖrlygsson
@ MárÖrlygssonที่ไม่ถูกต้อง การเดินทางไปกลับหมายถึงว่าลูกค้าจะต้องทำการร้องขอจากนั้นรอให้การประมวลผลการร้องขอและคำตอบที่จะ dowloaded ไปป์ไลน์หมายความว่าคำขอจะถูกส่งไปแล้วขณะที่ยังคงรอคำขอก่อนที่จะเสร็จสิ้นดังนั้นในขณะที่ขั้นตอนเดียวกันจะเกิดขึ้นล่าช้าก็จะทำให้เกิดจะไม่เหมือนกัน ...
— ปีเตอร์
1
แซมไม่สามารถเปิดใช้งาน pipelining บนเบราว์เซอร์ของผู้เยี่ยมชมได้ทั้งหมดดังนั้นในกรณีนี้โซลูชันนี้จะไม่ทำให้ไซต์โหลดเร็วขึ้นยกเว้นเขาเป็นการส่วนตัว
— MárÖrlygsson
3
@ MárÖrlygssonและ upvoters ของเขา: มันไม่ได้ทำในเลเยอร์การขนส่ง ในแบบจำลองโลกแห่งความเป็นจริงสิ่งนี้กระทำได้ในเลเยอร์แอปพลิเคชัน การวางท่อตามหลักวิชาควรอยู่ที่ชั้นเซสชั่น
— Matt Joiner
4
ฉันจะไม่เถียงความหมายเหล่านั้นกับคุณ ข้อเท็จจริงยังคงอยู่ที่ Sam ไม่สามารถ "ใช้ pipelining" (เรียบร้อยตามที่เป็น) เพื่อทำให้ไซต์ของเขาโหลดเร็วขึ้นสำหรับผู้เยี่ยมชมของเขาเนื่องจากการสนับสนุนแบบ piplining คือ A) ขาด ๆ หาย ๆ เมื่อคุณชี้ให้เห็นตัวเองและ B) เลือกโดยแต่ละคน ผู้ใช้รายบุคคล
— MárÖrlygsson
6

ไม่ใช่คำตอบของคำถาม แต่เพื่อชมเชยคำตอบที่ได้รับจากMarcelและyahelcฉันขอนำเสนอทางออกที่สวยงามสำหรับปัญหา 404 favicon

เนื่องจากแอพและเบราว์เซอร์บางตัวและไม่ตรวจสอบ favicon.com และหากไม่พบไอคอนในรูทของไซต์คุณสามารถตอบคำขอได้โดยใช้ส่วนหัว204 คำตอบ

ตัวอย่าง Apache:

ตัวเลือก Apache หนึ่ง (และรายการโปรดของฉัน), ซับง่ายๆใน. htacces หรือ .conf ของคุณ:

Redirect 204 /favicon.ico

ตัวเลือก Apache สอง:

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

สำหรับการอ่านเพิ่มเติมมีโพสต์บล็อกที่ดีโดย Stoyan Stefanov ที่http://www.phpied.com/204-no-content/

— Anthony Hatzopoulos
แหล่งที่มา
ใช่ แต่เมื่อมีการร้องขอและมีการใช้ favicon บ่อยครั้งในทางที่มีความหมายฉันคิดว่ามันคุ้มค่าที่จะให้ไอคอนแทนที่จะตอบสนองอย่างว่างเปล่า การบีบอัดไอคอนผ่าน gzip มักจะทำให้มันเป็นขนาดแพ็คเก็ต TCP เดียวต่อไป
— Andy Davies
5

เป็นความคิดที่ดี แต่ถ้า Google ไม่ได้ทำในหน้าแรกของพวกเขาฉันเดิมพันมันไม่สามารถทำได้ (ในปัจจุบัน)

— cusimar9
แหล่งที่มา
13
Google เป็นสิ่งที่ดี แต่การคิดเช่นนั้นดูเหมือนว่าจะต่อต้านและยับยั้ง มีวิธีการทำสิ่งใหม่ที่ดีกว่าและเป็นไปได้อยู่เสมอและคุณไม่จำเป็นต้องทำงานให้ผู้นำอุตสาหกรรมมาหาพวกเขา
— ข้อผิดพลาดทางไวยากรณ์
9
เห็นได้ชัดว่า Google ได้รับความคิดของพวกเขาจากดังนั้นไม่ใช่ทางอื่น ๆ ;)
— 123444555621
3
คำตอบที่ดีถ้า Google สามารถทำให้หน้าของพวกเขาเร็วขึ้นพวกเขาก็จะทำ
— David d C e Freitas
5

ขออภัย แต่คุณไม่สามารถรวม favicon เข้ากับแหล่งข้อมูลอื่นได้

ซึ่งหมายความว่าคุณมีสองตัวเลือกโดยทั่วไป:

  1. หากคุณพอใจกับไซต์ของคุณที่ไม่มี favicon - คุณสามารถhrefชี้ไปยังแหล่งข้อมูลที่ไม่ใช่ไอคอนที่โหลดแล้ว (เช่นสไตล์ชีทไฟล์สคริปต์หรือแม้แต่ทรัพยากรบางอย่างที่ได้รับประโยชน์จากการดึงข้อมูลมาล่วงหน้า .)
    (การทดสอบสั้น ๆ ของฉันบ่งชี้ว่าสิ่งนี้ใช้ได้กับเบราว์เซอร์หลัก ๆ หากไม่ใช่ทั้งหมด)

  2. ยอมรับคำขอ HTTP เพิ่มเติมและตรวจสอบให้แน่ใจว่าไฟล์ favicon ของคุณตั้งค่าส่วนหัวควบคุมแคช HTTP อย่างเข้มงวด
    (หากคุณมีเว็บไซต์อื่น ๆ ภายใต้การควบคุมของคุณคุณอาจทำให้เว็บไซต์เหล่านั้นแอบโหลด favicon สำหรับเว็บไซต์นี้ - พร้อมกับแหล่งข้อมูลคงที่อื่น ๆ )

PS Creative โซลูชันที่จะไม่ทำงาน :

  • ที่แปลก CSS ข้อมูล URI เคล็ดลับ (เชื่อมโยงกับการแสดงความคิดเห็นโดยเฟลิกซ์ Geenen) ไม่ทำงาน
  • การใช้ Javascript เพื่อทำการฉีด<link>องค์ประกอบfavicon ที่ล่าช้า(ตามที่ผู้ใช้ @yc แนะนำ) จะทำให้สิ่งเลวร้ายลงโดยส่งผลให้มีการร้องขอ HTTP สองครั้ง
— MárÖrlygsson
แหล่งที่มา
1
โซลูชันอื่น ๆ ที่ใช้งานไม่ได้: ไอคอนหลายรายการใน. ico และการใช้ ico ในแท็กรูปภาพด้วยความหวังว่ามันจะแสดงรูปภาพอื่นที่นั่นแทนที่จะเป็น favicon การรวม favicon เข้าด้วยกันด้วยไฟล์อื่น
— markijbema
3

คุณสามารถใช้ PNG 8 บิตแทนรูปแบบ ICO สำหรับการปล่อยข้อมูลแม้แต่น้อย สิ่งเดียวที่คุณต้องเปลี่ยนคือใช้ "data: image / png" แทน "data: image / x-icon" MIME header header:

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

แอตทริบิวต์ "type" อาจเป็น "image / png" หรือ "image / x-icon" ซึ่งทั้งคู่ใช้ได้สำหรับฉัน

คุณสามารถแปลง ICO เป็น 8-bit png โดยใช้ gimp หรือ convert:

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

และเข้ารหัส PNG ไบนารีไปยังสตริง base64 โดยใช้คำสั่ง base64:

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

การแก้ปัญหานี้จำเป็นต้องมาเก้าปีหลังจากที่คำถามถูกถามเดิมเพราะจนกระทั่งเมื่อไม่นานมานี้เบราว์เซอร์ส่วนใหญ่ไม่สามารถจัดการ favicons ใน.svgรูปแบบได้

นั่นไม่ใช่กรณีอีกต่อไป

ดู: https://caniuse.com/#feat=link-icon-svg

1) เลือก SVG เป็นรูปแบบ Favicon

ตอนนี้ในเดือนมิถุนายน 2020 เบราว์เซอร์เหล่านี้สามารถรองรับSVG Favicons :

  • โครเมียม
  • Firefox
  • ขอบ
  • อุปรากร
  • Chrome สำหรับ Android
  • เบราว์เซอร์ KaiOS

โปรดทราบว่าเบราว์เซอร์เหล่านี้ยังไม่สามารถ:

  • การแข่งรถวิบาก
  • iOS Safari
  • Firefox สำหรับ Android

จากที่กล่าวมาข้างต้นเราสามารถใช้SVG Faviconได้อย่างมั่นใจ

2) แสดง SVG เป็น Data URI

วัตถุประสงค์หลักที่นี่คือการหลีกเลี่ยงการร้องขอ HTTP

ในฐานะที่เป็นโซลูชั่นอื่น ๆ ที่ได้กล่าวเป็นวิธีที่ฉลาดสวยที่จะทำเช่นนี้คือการใช้URI ข้อมูลมากกว่าHTTP URL

SVGs (โดยเฉพาะ SVG ขนาดเล็ก) ยืมตัวเองอย่างสมบูรณ์แบบไปยัง Data URIs เพราะส่วนหลังนั้นเป็นเพียงข้อความธรรมดา (ด้วยอักขระที่อาจคลุมเครือใด ๆ ที่เข้ารหัสเปอร์เซ็นต์) และที่ผ่านมาเป็น XML สามารถเขียนออกมาเป็นบรรทัดยาวของข้อความธรรมดา ของรหัสเปอร์เซ็นต์) ตรงไปตรงมาอย่างไม่น่าเชื่อ

3) SVG ทั้งหมดเป็น Emoji

ในเดือนธันวาคม 2019 ลีอันโดรลินาเรสเป็นหนึ่งในคนแรกที่ตระหนักว่าตั้งแต่ Chrome เข้าร่วม Firefox ในการสนับสนุน SVG Favicons มันคุ้มค่าที่จะทำการทดลองเพื่อดูว่า favicon สามารถสร้างจากอิโมจิได้หรือไม่:

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

ลางสังหรณ์ของ Linares ถูกต้อง

หลายเดือนต่อมา (มีนาคม 2563) รหัสโจรสลัด Lea Verou ตระหนักในสิ่งเดียวกัน:

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

และพวกฟaviconsก็ไม่เหมือนเดิมอีกเลย

4) การใช้โซลูชันด้วยตนเอง:

นี่เป็น SVG แบบง่าย ๆ :

<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>

และนี่คือ SVG เดียวกันกับData URI :

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

และสุดท้ายนี่คือData URIในฐานะ 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) เทคนิคเพิ่มเติม

เนื่องจาก Favicon เป็น SVG สามารถใช้เอฟเฟ็กต์ฟิลเตอร์ใดก็ได้ (ทั้ง SVG และ CSS)

ตัวอย่างเช่นข้างๆWhite Unicorn Faviconด้านบนเราสามารถสร้างBlack Unicorn Faviconได้อย่างง่ายดายโดยใช้ตัวกรอง:

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

Black Unicorn 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'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
— Rounin
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.