305

Mọi người đều biết cách thiết lập liên kết favicon.ico trong HTML:

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

Nhưng tôi nghĩ thật ngu ngốc khi đối với một biểu tượng vài byte nhỏ bạn cần một yêu cầu HTTP khác . Vì vậy, tôi tự hỏi, làm thế nào tôi có thể biến hình ảnh đó thành một phần của sprite (ví dụ background-position=0px -200px;) để tăng tốc và lưu yêu cầu HTTP có giá trị đó. Làm thế nào tôi có thể đưa nó vào một hình ảnh sprite hiện có với logo của tôi và các tác phẩm nghệ thuật khác?

Robot chỉ vào favicon.ico, mục số 31 trên biểu đồ thác nước, là ZAM thú cưng của tôi. Anh ấy thường vui vẻ hơn và anh ấy có một điểm tốt cho tôi biết đã đến lúc cần một số nâng cấp sáng tạo trên web, mặc dù anh ấy và tôi không đồng ý về trang phục của anh ấy, mà tôi nghĩ hôm nay hơi ngớ ngẩn ...

nhập mô tả hình ảnh ở đây

— Sam
nguồn

47

Có phải thật ngớ ngẩn khi chưa có cách nào để kết hợp .css / .js / .png / .html thành một luồng được tối ưu hóa duy nhất không? Bạn có thể nghĩ rằng bây giờ sẽ có ai đó nghĩ ra ý tưởng này

— RichardTheKiwi

9

@Richard liên quan: Phản hồi nhiều phần và Google có sáng kiến cho một giao thức web mới, được tối ưu hóa để giải quyết vấn đề này, tôi quên tên của nó ... Chỉnh sửa : Nó có tên là SPDY . Nhưng đó là xa trong tương lai, rõ ràng.

— Pekka

9

@Richard aka cyberkiwi, bạn có thể đặt mọi thứ vào một tệp html với data:các giá trị cho hình ảnh và tập lệnh nội tuyến.

— zzzzBov

39

btw, người đàn ông phác họa đẹp :)

— Fatih Acet

18

+1 cho bản phác thảo :)

— Giuliano

140

Một cải tiến nhỏ cho câu trả lời của @ yc là tiêm favicon được mã hóa base64 từ một tệp JavaScript thường được sử dụng và lưu vào bộ nhớ cache và cũng loại bỏ hành vi yêu cầu của trình duyệt tiêu chuẩn favicon.icobằng cách cung cấp URI dữ liệu trong metathẻ có liên quan .

Kỹ thuật này tránh được yêu cầu http bổ sung và được xác nhận là hoạt động trong các phiên bản Chrome, Firefox và Opera gần đây trên Windows 7. Tuy nhiên, ít nhất nó không hoạt động trong 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. */

Bản trình diễn: turi.co/up/favicon.html

— Marcel
nguồn

3

+1 đột phá lưu trữ đẹp mắt @Marcel. PS Các ký tự trong HTTP Headers Responsetệp .ico của tôi có kích thước gần giống với biểu tượng của tôi !! Làm thế nào để bạn thích điều đó?

— Sam

2

@Sam: Tôi nhận thấy base64 của một PNG tương đương với tệp favicon.ico của Stack Overflow có kích thước bằng một nửa. Đẹp và nhỏ gọn.

— Marcel

1

eeehm tôi không chắc là tôi hiểu ý của bạn: 'tập tin chỉ bằng một nửa ...? Tệp PNG như icon.png? hoặc bạn có nghĩa là tương đương base64 của nó nhỏ hơn khi png của nó được định dạng thay cho biểu tượng được định dạng hoặc gif? Tò mò. Cổ vũ người bạn đời!

— Sam

1

@Sam: Tôi đã so sánh base64 của PNG này với base64 của tệp ICO này . Phiên bản PNG, như được sử dụng trong mã ví dụ của tôi ở trên, có kích thước bằng một nửa.

— Marcel

1

Tôi hiểu rồi, điều đó làm cho câu trả lời cơ sở 64 của bạn và sử dụng chung định dạng PNG cơ sở64 là lựa chọn ưa thích phải không?

— Sam

149

Tôi nghĩ phần lớn nó không dẫn đến một yêu cầu HTTP khác vì những yêu cầu này thường được đưa vào bộ đệm của trình duyệt sau lần truy cập đầu tiên.

Điều này thực sự hiệu quả hơn bất kỳ "giải pháp" nào được đề xuất.

— James Anderson
nguồn

53

Đây là câu trả lời hợp lý duy nhất. Đây không phải là vấn đề không cần sửa.

— JoDG

1

James, giải pháp của tôi thực sự chỉ là một khả năng, nhưng một giải pháp mà tôi sẽ không bao giờ thực sự giới thiệu cho ai đó. Tuy nhiên, dường như hầu hết các trình duyệt sẽ đưa ra yêu cầu HTTP mới cho favicon khi bắt đầu phiên trình duyệt mới. Và, nó không phải lúc nào cũng trả lại 304.

— Yahel

4

Trình duyệt vẫn sẽ thực hiện cuộc gọi CHÍNH ngay cả khi nó nằm trong bộ đệm của trình duyệt, do đó bạn vẫn sẽ có chi phí yêu cầu HTTP.

— dietbuddha

3

Trên thực tế mọi thứ phụ thuộc vào trình duyệt. Hầu hết trong số họ sẽ luôn tìm kiếm một favicon ở một số địa điểm ngay cả khi trang không đề cập đến nó và thực hiện cuộc gọi CHÍNH cho mỗi lần làm mới.

— David Costa

14

Favicon cần một tiêu đề hết hạn dài giống như bất kỳ tài nguyên tĩnh tốt nào. Cùng với đó, ngay cả các cuộc gọi CHÍNH cũng bị chặn.

— Paul Alexander

102

Bạn có thể thử URI dữ liệu. Không có yêu cầu HTTP!

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

Trừ khi các trang của bạn có bộ nhớ đệm tĩnh, favicon của bạn sẽ không thể được lưu vào bộ nhớ cache và tùy thuộc vào kích thước của hình ảnh favicon của bạn, kết quả là mã nguồn của bạn có thể bị phình to.

Favicons dữ liệu dường như hoạt động trong hầu hết các trình duyệt hiện đại; Tôi có nó hoạt động trong các phiên bản gần đây của Chrome, Firefox và Safari trên máy Mac. Dường như không hoạt động trong Internet Explorer và có thể một số phiên bản của Opera.

Nếu bạn lo lắng về IE cũ (và có lẽ bạn không nên dùng trong những ngày này), bạn có thể đưa vào một nhận xét có điều kiện IE sẽ tải favicon.ico thực tế theo cách truyền thống, vì dường như Internet Explorer cũ hơn không hỗ trợ dữ liệu URI Favicons

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

Bao gồm tệp favicon.ico trong thư mục gốc của bạn để bao quát các trình duyệt sẽ yêu cầu nó, vì đối với các trình duyệt đó, nếu họ đã kiểm tra bất kể bạn làm gì, bạn cũng có thể không lãng phí yêu cầu HTTP với phản hồi 404 .

Bạn cũng có thể chỉ sử dụng favicon của một trang web phổ biến khác có khả năng có favicon của họ được lưu trong bộ nhớ cache, như http://google.com/favicon.icovậy, để nó được phục vụ từ bộ đệm.

Như các nhà bình luận đã chỉ ra, chỉ vì bạn có thể làm điều này không có nghĩa là bạn nên, vì một số trình duyệt sẽ yêu cầu favicon.ico bất kể các thủ thuật chúng tôi nghĩ ra. Lượng chi phí bạn tiết kiệm được bằng cách thực hiện điều này sẽ rất nhỏ so với số tiền tiết kiệm bạn có được khi làm những việc như gzipping, sử dụng các tiêu đề hết hạn trong tương lai cho nội dung tĩnh, giảm bớt các tệp JavaScript, đặt hình nền vào các họa tiết hoặc URI dữ liệu , phục vụ các tệp tĩnh khỏi CDN, v.v.

— Yahel
nguồn

1

@Pekka yeah, nó không thực sự là một giải pháp thực tế, vì trọng lượng byte thêm URI dữ liệu trên các trang không được lưu trong bộ nhớ cache có thể sẽ vượt quá trọng lượng của yêu cầu HTTP đó. Có lẽ OP có thể tiêm favicon vào DOM không đồng bộ.

— Yahel

4

@Sam Tôi xin lỗi, tôi hiểu ý nghĩa của @yc bây giờ, lỗi của tôi. Tất nhiên, bạn hoàn toàn có thể truy cập <link rel>phần tử trong trình duyệt thông qua JavaScript, điều đó là có thể. Tôi thậm chí đã thấy một trò chơi được lập trình theo cách đó ... tuy nhiên, nó dường như không hoạt động trong IE, và có lẽ nó sẽ không ngăn được /favicon.icoyêu cầu tra cứu mặc định

— Pekka

2

@Pekka, tôi hiểu rồi. PS đó là một trò chơi không thể chấp nhận được! Làm cho toàn bộ màn hình của tôi trở nên xấu hổ, vì tất cả những gì bạn cần là 16x16 pixel haha. Siêu liên kết này mở ra một số khả năng như những gì thực sự có thể với favicon đó.

— Sam

3

Trong trường hợp khai báo favicon bị thiếu, tất cả các trình duyệt sẽ tự động yêu cầu URL mặc định /favicon.icotrong một nỗ lực mù trong việc định vị nó. Vì vậy, nếu bạn bỏ qua favicon <link>(để sau đó thêm nó qua Javascript), bạn có khả năng sẽ làm mọi thứ tồi tệ hơn.

— Már rlygsson 15/03/2016

2

Chỉ cần sử dụng favicon.ico để lưu trữ của bạn transparant gif :)

— markijbema

21

Bạn có thể sử dụng favicon được mã hóa base64, như:

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

— Đông Thắng Cai
nguồn

1

Gợi ý: chuỗi được mã hóa base64 được sử dụng trong câu trả lời này là tệp PNG và sẽ không hoạt động với IE10 trở lên.

— sibbl

2

Trong trường hợp bất cứ ai muốn biết Đó là chim cánh cụt linux.

— Martlark

17

Tôi tìm thấy một giải pháp thú vị trên trang này . Đó là tiếng Đức nhưng bạn sẽ có thể hiểu được mã.

Bạn đặt dữ liệu base64 của biểu tượng vào biểu định kiểu bên ngoài, vì vậy nó sẽ được lưu trữ. Trong phần đầu của trang web của bạn, bạn phải xác định favicon với một id và favicon được đặt là một background-imagetrong biểu định kiểu cho id đó.

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

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

— Geenen
nguồn

8

Một người có 74.947 danh tiếng đã nói ở đâu đó trên trang này: "Bạn không thể!" ... Sau đó, một người khác với danh tiếng dưới 50 nói: "Bạn có thể!" Điều này có nghĩa là ổ đĩa cho các giải pháp và ổ đĩa sáng tạo cụ thể không có liên kết hoặc mối quan hệ với danh tiếng đã đạt được? ... Vậy thì thật tuyệt vời!

— Sam

4

Tôi vừa mới khẳng định rằng giải pháp này không làm việc - ít nhất không phải trong Chrome 10 và Firefox 3.6 trên Windows

— Mar Örlygsson

13

Tôi vừa xác nhận rằng giải pháp này hoạt động - ít nhất là trong Chrome 10.0.648 trên W7 64 bit và trong FF 4.0 trên W7 64 bit

— Sam

4

LOL, tôi đã xác nhận hai tuyên bố trên có vẻ mâu thuẫn, mặc dù số phiên bản hơi khác nhau nhưng tôi nghi ngờ hành vi của Chrome đã thay đổi rất nhiều. Firefox có thể đã làm từ 3.6 thành 4, nhưng Chrome 10 không thể thay đổi nhiều như vậy trên một bản cập nhật nhỏ.

— dyasta

Tôi có thể xác nhận rằng tính năng này không hoạt động trên Chrome 83 và Firefox ESR 68 trên Ubuntu 20.04 và tôi có thể xác nhận rằng nó không hoạt động để ngăn chặn cú đánh trên /favicon.ico. Vì vậy, bạn có được hình ảnh nhưng bạn không ngăn kết nối SSL thêm. Vì đó là mục tiêu, đây là một thất bại.

— Wil

14

Điểm tốt và ý tưởng tốt đẹp, nhưng không thể. Một favicon cần phải là một tài nguyên riêng biệt. Không có cách nào để kết hợp nó với một tập tin hình ảnh khác.

— Bắc Kinh
nguồn

1

Có thể tôi bị mù, nhưng nơi duy nhất tôi thấy favicon của Google Search là trong một sprite: google.com/search?q=foo

— Yahel

4

@yc google.com/favicon.ico là nơi các trình duyệt sẽ tự động tìm kiếm nó

— Pekka

3

@yc bạn không mù quáng, bạn đã chứng tỏ mình xứng đáng với một câu trả lời rất sáng tạo trên đó ... như Pekka đã chỉ ra rằng đó /favicon.icolà nơi trình duyệt sẽ tự động nhìn. Bây giờ đến tin xấu thực sự: Nếu favicon là NON tồn tại, điều đó có nghĩa là một hình phạt 404 lỗi cũng sẽ gây ra một chút chậm trễ !! Dường như không có lối thoát khỏi ngục tối favicon này. Chúng rất nhỏ bé nhưng thật mạnh mẽ ... chết tiệt :)

— Sam

Xem câu trả lời stackoverflow.com/questions/5199902/ của tôi để biết cách thích hợp để tăng tốc độ đúng cách.

— Matt Tham gia

8

Cần lưu ý rằng điều này nên, thực tế, là một yêu cầu một lần, khá nhiều mãi mãi. Giống như mọi thứ khác, bộ định thời bộ đệm dài và máy chủ 301 được trả về đúng cách sẽ khiến yêu cầu favicon trở thành điểm tranh luận (trừ khi nó không tồn tại - yike!).

— Kevin Peno

9

Thật sự nó có ảnh hưởng sao?

Nhiều trình duyệt tải favicon ở mức ưu tiên thấp để dù sao nó cũng không chặn tải trang, vì vậy, đó là một yêu cầu bổ sung nhưng nó không nằm trên bất kỳ đường dẫn quan trọng nào.

Giải pháp được chấp nhận là khủng khiếp vì cho đến khi JS được truy xuất và thực thi, tất cả các phần tử DOM bên dưới sẽ bị chặn hiển thị và nó không làm giảm số lượng yêu cầu!

— Andy Davies
nguồn

8

Giải pháp thích hợp là sử dụng đường ống HTTP .

HTTP pipelining là một kỹ thuật trong đó nhiều yêu cầu HTTP được ghi ra một ổ cắm mà không cần chờ phản hồi tương ứng. Pipelining chỉ được hỗ trợ trong HTTP / 1.1, không phải trong 1.0.

Nó yêu cầu các máy chủ hỗ trợ nó, nhưng không nhất thiết phải tham gia.

HTTP pipelining yêu cầu cả máy khách và máy chủ hỗ trợ nó. Cần có máy chủ tuân thủ HTTP / 1.1 để hỗ trợ đường ống. Điều này không có nghĩa là các máy chủ được yêu cầu phản hồi đường ống, nhưng chúng được yêu cầu không thất bại nếu khách hàng chọn yêu cầu đường ống.

Nhiều khách hàng trình duyệt không làm điều đó khi họ cần.

HTTP pipelining bị vô hiệu hóa trong hầu hết các trình duyệt.

Opera có đường ống được bật theo mặc định. Nó sử dụng phương pháp phỏng đoán để kiểm soát mức độ đường ống được sử dụng tùy thuộc vào máy chủ được kết nối.

Internet Explorer 8 không yêu cầu đường ống, do những lo ngại liên quan đến proxy lỗi và chặn đầu dòng.

Các trình duyệt Mozilla (như Mozilla Firefox, SeaMonkey và Camino), hỗ trợ đường ống tuy nhiên nó bị tắt theo mặc định. Nó sử dụng một số phương pháp phỏng đoán, đặc biệt là tắt đường ống cho máy chủ IIS.

Konqueror 2.0 hỗ trợ đường ống, nhưng nó bị tắt theo mặc định. [Cần dẫn nguồn]

Google Chrome không hỗ trợ đường ống.

Tôi khuyên bạn nên thử bật pipelining trong Firefox và thử nó ở đó, hoặc chỉ sử dụng Opera (shudder).

— Matt tham gia
nguồn

7

Đường ống tối ưu hóa được thực hiện trong lớp vận chuyển. Nó vẫn liên quan đến một chuyến đi khứ hồi HTTP riêng cho favicon, đó là những gì câu hỏi đặt ra.

— Már rlygsson 17/03/2016

@ Már rlygsson không đúng. Một chuyến đi khứ hồi có nghĩa là khách hàng phải đưa ra yêu cầu và sau đó chờ yêu cầu được xử lý và câu trả lời sẽ được tải xuống. Đường ống có nghĩa là yêu cầu sẽ được gửi trong khi vẫn chờ yêu cầu trước đó kết thúc, vì vậy trong khi các bước tương tự đang diễn ra, sự chậm trễ mà nó sẽ gây ra sẽ không giống nhau ...

— Peter

1

Sam không thể bật đường ống trong tất cả các trình duyệt của khách truy cập của mình, vì vậy theo nghĩa đó, giải pháp này sẽ không khiến trang web của anh ấy tải nhanh hơn - ngoại trừ cá nhân anh ấy.

— Már rlygsson

3

@ Már rlygsson và upvoters của anh ấy: Nó không được thực hiện trong lớp tranport. Trong các mô hình thế giới thực, tất cả được thực hiện trong lớp ứng dụng. Về mặt lý thuyết đường ống nên ở lớp phiên.

— Matt Joiner

4

Tôi sẽ không tranh luận những ngữ nghĩa với bạn. Thực tế vẫn cho rằng Sam không thể "sử dụng pipelining" (gọn gàng như vậy) để làm cho trang web của mình tải nhanh hơn cho khách truy cập của mình, vì hỗ trợ phân loại là A) khi bạn chỉ ra chính mình và B) chọn tham gia người dùng cá nhân.

— Már rlygsson

6

Không thực sự là một câu trả lời cho câu hỏi mà chỉ đơn giản là để khen những câu trả lời được đưa ra bởi Marcel và yahelc Tôi đưa ra một giải pháp tao nhã cho vấn đề favicon 404.

Bởi vì một số ứng dụng và trình duyệt và không có gì kiểm tra favicon.com và nếu không tìm thấy biểu tượng trong thư mục gốc, bạn chỉ cần trả lời yêu cầu với tiêu đề phản hồi 204 .

Ví dụ về Apache:

Tùy chọn Apache một (và yêu thích của tôi), một lớp lót đơn giản trong .htacces hoặc .conf:

Redirect 204 /favicon.ico

Tùy chọn hai của Apache:

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

Để đọc thêm, có một bài đăng blog hay của Stoyan Stefanov tại http://www.phpied.com/204-no-content/

— Anthony Hatzopoulos
nguồn

Yeh nhưng vì yêu cầu đang được thực hiện và favicon thường được sử dụng theo cách có ý nghĩa, tôi cho rằng nó đáng để cung cấp biểu tượng thay vì phản hồi trống rỗng. Nén biểu tượng qua gzip thường sẽ đưa nó đến một kích thước gói TCP duy nhất

— Andy Davies

5

Đó là một ý tưởng tuyệt vời, nhưng nếu Google không thực hiện nó trên trang chủ của họ, thì tôi cá là nó không thể (hiện tại) được thực hiện

— cusimar9
nguồn

13

Google thật tuyệt, nhưng suy nghĩ như thế có vẻ phản tác dụng và ngột ngạt. Luôn có những cách làm mới, tốt hơn và rất khả thi, và bạn không cần phải làm việc cho một nhà lãnh đạo ngành để đưa ra chúng.

— Lỗi cú pháp

9

Rõ ràng, Google lấy ý tưởng của họ từ SO, chứ không phải ngược lại;)

— user123444555621

3

Câu trả lời tốt, nếu google có thể làm cho trang của họ nhanh hơn, họ sẽ làm.

— David d C e Freitas

5

Tôi xin lỗi, nhưng bạn không thể kết hợp favicon với tài nguyên khác.

Điều này có nghĩa là về cơ bản bạn có hai tùy chọn:

Nếu bạn cảm thấy thoải mái với trang web của mình không có favicon - bạn có thể chỉ hrefđến một tài nguyên không phải là biểu tượng đã được tải (ví dụ: biểu định kiểu, tệp tập lệnh hoặc thậm chí một số tài nguyên có lợi từ việc tìm nạp trước .)
(Thử nghiệm ngắn gọn của tôi chỉ ra rằng điều này hoạt động trên hầu hết, nếu không phải tất cả, các trình duyệt chính.)
Chấp nhận yêu cầu HTTP bổ sung và chỉ cần đảm bảo tệp favicon của bạn có các tiêu đề kiểm soát bộ đệm HTTP tích cực được đặt.
(Nếu bạn có các trang web khác dưới sự kiểm soát của mình, bạn thậm chí có thể yêu cầu họ tải trước favicon cho trang web này - cùng với các tài nguyên tĩnh khác.)

Các giải pháp PS Creative sẽ không hoạt động :

Thủ thuật dữ liệu uri CSS kỳ lạ (được liên kết bởi nhà bình luận Felix Geenen) không hoạt động .
Sử dụng Javascript để thực hiện việc trì hoãn <link>phần tử favicon (như được đề xuất bởi người dùng @yc) có thể sẽ khiến mọi việc tồi tệ hơn - bằng cách dẫn đến hai yêu cầu HTTP.

— Már rlygieson
nguồn

1

các giải pháp khác sẽ không hoạt động: nhiều biểu tượng trong .ico và sử dụng ico trong thẻ hình ảnh với hy vọng rằng nó sẽ hiển thị một hình ảnh khác ở đó, hơn là hình đại diện. Liên kết các favicon với một tập tin khác.

— markijbema 17/03/2016

3

Bạn có thể sử dụng PNG 8 bit thay vì định dạng ICO cho dấu chân dữ liệu nhỏ hơn. Điều duy nhất bạn phải thay đổi là sử dụng "data: image / png" thay vì "data: image / x-icon" Tiêu đề loại MIME:

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

Thuộc tính "type" có thể là "image / png" hoặc "image / x-icon", cả hai đều hoạt động với tôi.

Bạn có thể chuyển đổi ICO thành png 8 bit bằng cách sử dụng gimp hoặc convert:

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

và mã hóa nhị phân PNG thành chuỗi base64 bằng lệnh base64:

base64 favicon.png

— andrej
nguồn

2

Đây là cách dễ nhất:

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

Nó đại diện cho biểu tượng gì? Trả lời và upvote dưới đây!

— rjobidon
nguồn

1

Biểu tượng quả táo?

— styfle

2

Giải pháp sát thủ năm 2020

Giải pháp này nhất thiết phải đến chín năm sau khi câu hỏi ban đầu được hỏi, bởi vì cho đến gần đây, hầu hết các trình duyệt đã không thể xử lý favicon ở .svgđịnh dạng.

Đó không phải là trường hợp nữa.

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

1) Chọn SVG làm định dạng Favicon

Ngay bây giờ, vào tháng 6 năm 2020, các trình duyệt này có thể xử lý SVG Favicons :

Trình duyệt Chrome
Firefox
Cạnh
Opera
Chrome cho Android
Trình duyệt KaiOS

Lưu ý rằng các trình duyệt này vẫn không thể:

Safari
Safari Safari
Firefox cho Android

Với suy nghĩ trên, chúng tôi có thể tự tin sử dụng Favicon SVG .

2) Trình bày SVG dưới dạng URI dữ liệu

Mục tiêu chính ở đây là để tránh các Yêu cầu HTTP.

Như các giải pháp khác đã đề cập, một cách khá thông minh để thực hiện việc này là sử dụng URI dữ liệu thay vì URL HTTP .

Các SVG (đặc biệt là các SVG nhỏ) tự cho vay hoàn toàn vào URI dữ liệu, vì cái sau chỉ đơn giản là văn bản gốc (với bất kỳ ký tự mơ hồ nào được mã hóa theo tỷ lệ phần trăm) và trước đây, là XML, có thể được viết ra dưới dạng một dòng văn bản dài mã phần trăm) vô cùng đơn giản.

3) Toàn bộ SVG là một biểu tượng cảm xúc

Vào tháng 12 năm 2019, Leandro Linares là một trong những người đầu tiên nhận ra rằng vì Chrome đã tham gia Firefox để hỗ trợ SVG Favicons, nên thử nghiệm xem liệu một favicon có thể được tạo ra từ biểu tượng cảm xúc hay không:

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

Linh cảm của Linares đã đúng.

Vài tháng sau (tháng 3 năm 2020), Code Pirate Lea Verou nhận ra điều tương tự:

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

Và favicon không bao giờ giống nhau một lần nữa.

4) Tự thực hiện giải pháp:

Đây là một SVG đơn giản:

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

Và đây là cùng một SVG như một URI dữ liệu :

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

Và cuối cùng, đây là URI dữ liệu dưới dạng 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) Nhiều mánh khóe hơn

Vì Favicon là một SVG, nên bất kỳ số lượng hiệu ứng bộ lọc nào (cả SVG và CSS) đều có thể được áp dụng cho nó.

Chẳng hạn, bên cạnh Favicon White Unicorn ở trên, chúng ta có thể dễ dàng tạo Favicon Unicorn đen bằng cách áp dụng bộ lọc:

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

Kỳ lân đen 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
nguồn

Có phải thật ngớ ngẩn khi một favicon nhỏ bé yêu cầu một yêu cầu HTTP khác không? Làm thế nào tôi có thể đặt favicon vào một sprite?

Bản trình diễn: turi.co/up/favicon.html

1) Chọn SVG làm định dạng Favicon

2) Trình bày SVG dưới dạng URI dữ liệu

3) Toàn bộ SVG là một biểu tượng cảm xúc

4) Tự thực hiện giải pháp:

5) Nhiều mánh khóe hơn