Tôi có một vài trang tĩnh chỉ là HTML thuần túy, chúng tôi sẽ hiển thị khi máy chủ ngừng hoạt động. Làm cách nào tôi có thể đặt một favicon mà tôi đã tạo (đó là 16x16px và nó nằm trong cùng thư mục với tệp HTML; nó được gọi là favicon.ico) như biểu tượng "tab" như hiện tại? Tôi đã đọc trên Wikipedia và xem một vài hướng dẫn và đã thực hiện như sau:

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

Nhưng nó vẫn không muốn làm việc. Tôi đang sử dụng Chrome để kiểm tra các trang web. Theo Wikipedia .ico là định dạng hình ảnh tốt nhất chạy trên tất cả các loại trình duyệt.

Cập nhật

Tôi không thể làm điều này hoạt động cục bộ mặc dù mã kiểm tra nó sẽ chỉ thực sự hoạt động đúng khi máy chủ bắt đầu phục vụ trang web. Chỉ cần thử đẩy nó lên máy chủ và làm mới bộ đệm của bạn và nó sẽ hoạt động tốt.

html static favicon

— Huyền thoại
nguồn

Ai không nói với bất kỳ người bạn nào của bạn để kiểm tra nó cho bạn trên một số hệ thống khác, vấn đề tương tự là một trong những khách hàng của tôi hệ thống của tôi hiển thị tốt và anh ta phàn nàn rằng favicon không hiển thị, tôi chủ yếu sử dụng ví dụ đầu tiên của bạn và đúng. may mắn nhất.

— mt

3

Bản sao có thể có của Cách thêm biểu tượng tab trình duyệt (favicon) cho trang web?

— Michał Perłakowski

Ví dụ của bạn hiện đang hoạt động trên Chrome.

— Damjan Pavlica

Thật thú vị, trang web trực tiếp đã phục vụ favicon tốt, nhưng khi xem tệp cục bộ và không phục vụ thông qua máy chủ cục bộ (b / c đó là trang tĩnh đơn giản - yea!), Favicon đã không hiển thị. Nhìn chung, nó có ý nghĩa, các máy chủ tự động phục vụ nó. Thêm <link rel="icon" type="image/x-icon" href="favicon.ico">vào head(bên cạnh các biến thể favicon 32, 16 và 180 link) đã giải quyết vấn đề cục bộ. Vì tôi đã bao gồm links cho các kích thước biểu tượng lớn hơn và bảng kê khai, tôi đã không nghĩ hai lần về lý do tại sao favicon.icokhông hiển thị! :-)

— SherylHohman

932

Bạn có thể tạo một hình ảnh .png và sau đó sử dụng một trong các đoạn mã sau giữa các <head>thẻ của tài liệu HTML tĩnh của bạn:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— Hazy McGee
nguồn

3

bạn đã thử đặt "biểu tượng phím tắt" trong rel = cho các liên kết ico của bạn và đặt a / trước favicon.ico trên cả hai chỉ để nói rằng nó nằm trong thư mục webroot?

— Hazy McGee

1

yip cũng đã thử điều đó .. người đàn ông lol tôi đánh giá tôi sẽ khởi động lại tất cả và sau đó thử khởi động và xem liệu có thể tiền mặt của nó sai hay gì đó không ..

— TheLegend

5

Tôi thề - tôi đã gặp vấn đề tương tự sau khi thêm mã - có thể mất một ngày để trình duyệt hiển thị biểu tượng thay vì hộp màu xám thường có - hãy thử bỏ lịch sử bộ nhớ cache của trình duyệt, v.v. Và nếu bạn sao chép mã của tôi, hãy chắc chắn rằng bạn thay đổi example.com thành tên miền của bạn lol

— Hazy McGee

2

Có một dự phòng / trong đối số dòng hàng đầu. Khi tôi gỡ bỏ nó, nó hoạt động như một lá bùa. Phải là: <link rel = "biểu tượng phím tắt" href = "favicon.png" type = "image / png">

— drpawelo

4

w3.org/2005/10/howto-favicon nói rằng bao gồm một profilethuộc tính trong headthẻ ... có cần thiết không?

— Rakib

228

Hầu hết các trình duyệt sẽ chọn favicon.icotừ thư mục gốc của trang web mà không cần phải nói; nhưng họ không luôn cập nhật nó với một cái mới ngay lập tức.

Tuy nhiên, tôi thường lấy ví dụ thứ hai của bạn:

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

— Mã hóa
nguồn

nó có phải là thông báo của dữ liệu meta hoặc các thẻ script không ?? hoặc không thành vấn đề

— TheLegend

2

Miễn là nó nằm trong phần <head>, điều đó không thành vấn đề - bởi vì nó không phụ thuộc vào thứ gì khác để làm việc.

— Codecraft

126

Trên thực tế, để làm cho favicon của bạn hoạt động trong tất cả các trình duyệt, bạn phải có hơn 10 hình ảnh với kích thước và định dạng chính xác.

Tôi đã tạo một Ứng dụng ( faviconit.com ) để mọi người không thể tạo tất cả những hình ảnh này và các thẻ chính xác bằng tay.

Hy vọng bạn thích nó.

— Giáo sư
nguồn

6

Yêu thích ứng dụng này, không có bs - trực tiếp với nó và hình ảnh có thể được chỉnh sửa trước khi tạo tất cả các favicon +1 cho bạn vì đã tiết kiệm cho tôi rất nhiều thời gian :)

— SidOfc

1

Đồng ý, đây là một ứng dụng tuyệt vời. Mặc dù tôi không nghĩ rằng tất cả các kích thước hình ảnh đó có vẻ khá cần thiết, tôi thích rằng nó tạo ra chúng và đánh dấu cần thiết, vv Cảm ơn!

— andrhamm

Tạo ra một ứng dụng tuyệt vời: +1 :. Đã giúp rất nhiều o /

— Renato Gomes

1

Nhưng nó là độc quyền.

— ctrl-alt-delor

Nó không hoạt động, choWhoops, looks like something went wrong.

— daka

68

Những điều sau đây cho tôi ...

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

— Màu xanh nước biển
nguồn

40

Chuyển đổi tệp hình ảnh của bạn thành chuỗi Base64 bằng một công cụ như thế này và sau đó thay thế YourBase64StringHeretrình giữ chỗ trong đoạn mã dưới đây bằng chuỗi của bạn và đặt dòng trong phần đầu HTML của bạn:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Điều này sẽ hoạt động 100% trong trình duyệt.

— Đầm lầy
nguồn

3

Tôi đã tìm thấy một công cụ khác thực hiện chuyển đổi trong JavaScript mà không truyền dữ liệu đến máy chủ: jpillora.com/base64-encoder Ngoài ra, nó xử lý nhiều tệp bằng cách kéo và thả. Lưu trang để sử dụng nó cục bộ.

— xử lý

1

imho, giải pháp tốt nhất, vì nó tôn vinh trang "html tĩnh" và hoàn toàn khép kín trong tài liệu.

— Buffalo Rabor

1

Giải pháp tốt nhất. Làm việc với các tập tin png là tốt. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />

— Rolf of Sachsen

1

Điều này sẽ khiến một chuỗi dài được thêm vào mỗi trang. Sử dụng nội tuyến base64 cho các hình ảnh nhỏ hiếm khi được gửi đến người dùng.

— frodeborli

Bằng cách này, favicon của bạn không bao giờ được lưu trong bộ nhớ cache, bạn gửi toàn bộ chuỗi cho khách hàng mỗi lần, IHMHO sử dụng một url và do đó bộ đệm của trình duyệt cảm thấy 'sạch hơn / tốt hơn'

— Michiel

34

Cách sử dụng Cú pháp: _{^{.ico, .gif, .png,.svg}}

Bảng này cho thấy cách sử dụng favicontrong các trình duyệt chính. Việc triển khai tiêu chuẩn sử dụng một yếu tố liên kết với thuộc tính rel trong phần tài liệu để chỉ định định dạng tệp và tên tệp và vị trí.

Lưu ý rằng hầu hết các trình duyệt sẽ ưu tiên cho một favicon.icotệp nằm trong thư mục gốc của trang web (do đó bỏ qua mọi thẻ liên kết biểu tượng).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Hỗ trợ định dạng tệp

Bảng sau minh họa hỗ trợ định dạng tệp hình ảnh cho favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Trình duyệt thực hiện

Bảng dưới đây minh họa các khu vực khác nhau của trình duyệt nơi hiển thị của favicon:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Các tệp biểu tượng có thể có kích thước 16 × 16 , 32 × 32 , 48 × 48 hoặc 64 × 64 pixel và độ sâu màu 8 bit , 24 bit hoặc 32 bit .

Mặc dù thông tin trên nói chung là chính xác, có một số biến thể / ngoại lệ trong các tình huống nhất định.

^{Xem toàn bộ bài viết tại nguồn trên Wikipedia.}

Cập nhật: ("thêm thông tin")

Xem tiêu chí "mới" (2019) của Google để Xác định hình đại diện để hiển thị trong kết quả tìm kiếm .
Bạn có thể truy xuất (lập trình hoặc thủ công) favicon được lưu trong bộ nhớ cache của Google cho bất kỳ tên miền nào có URL như:https://www.google.com/s2/favicons?domain=stackoverflow.com

Sử dụng URL trên trực tiếp trong <img>thẻ trả về: " ".
Tôi đã sử dụng realfavicongenerator.net một vài lần; nó rất kỹ lưỡng, tạo / tùy chỉnh mọi biến thể favicon có thể bạn cần để tương thích tối đa. (Tuy nhiên, nếu bạn đang tìm kiếm một hình ảnh favicon duy nhất , đây có thể không phải là công cụ dành cho bạn!) Để chuyển đổi tệp đơn giản (ví dụ: PNGsang ICO, v.v.) Tôi thích onlineconvertfree.com .

— ashleedawg
nguồn

15

Nếu favicon là hình ảnh loại png, nó sẽ không hoạt động trong các phiên bản Chrome cũ hơn. Tuy nhiên, nó sẽ hoạt động tốt trong FireFox. Ngoài ra, đừng quên xóa bộ nhớ cache của trình duyệt trong khi làm việc với những thứ đó. Nhiều lần, mã chỉ tốt, nhưng bộ đệm là thủ phạm thực sự.

— Tanveer Shaikh
nguồn

1

Tốt rồi; Dù sao cũng rất khó để cài đặt / giữ phiên bản Chrome cũ

— Ben Leggiero

14

Theo khuyến nghị của W3.org , bạn có thể sử dụng relthuộc tính để đạt được điều này.

Thí dụ:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

— La Mã
nguồn

8

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

— shilovk
nguồn

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Điều này làm việc cho tôi

— Anand Dwivingi
nguồn

4

Mặc dù điều này có thể hoạt động, bạn không thể sử dụng hình ảnh / png làm Loại MIME - vì điều đó không đúng khi xem xét bạn đang sử dụng .ico

— zanderwar

5

Tôi biết bài cũ của nó nhưng vẫn đăng cho một người như tôi. Điều này làm việc cho tôi

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

đặt biểu tượng favicon của bạn vào thư mục gốc ..

— Cyclotron3x3
nguồn

4

như một lưu ý bổ sung có thể giúp ai đó một ngày nào đó.

Bạn không thể lặp lại bất cứ điều gì đến trang trước:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

sẽ không tải ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

hoạt động tốt

— bart2puck
nguồn

3

Đó là bởi vì nó được cho là nằm trong phần đầu của tài liệu HTML và bị hầu hết các trình duyệt bỏ qua nếu không có.

— Eric Sebasta

Phải, tôi chỉ muốn đặt cái này ở đây trong trường hợp có ai gặp vấn đề. Vấn đề của tôi là "xin chào" là một số mã gỡ lỗi và khiến tôi bối rối một chút.

— bart2puck

3

Tôi đã sử dụng convert -resize 16x16 img.png favicon.ico(trên linux konsole) để chuyển đổi hình ảnh của mình và thêm <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">vào tiêu đề của tôi và mọi thứ hoạt động hoàn hảo.

— dmx
nguồn

2

Lưu ý rằng nếu trang web của bạn đang chạy như một subfoldernghĩa là:

http://localhost/MySite/

Bạn sẽ cần phải tính đến điều đó. Nếu bạn đang làm như vậy từ một ASP.NETứng dụng, tất cả những gì bạn cần làm là thêm một ~mặt trước của URL:

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

— Serj Sagan
nguồn

2

Theo cập nhật của OP, nó không hiển thị cục bộ, nhưng theo cập nhật của OP, một khi tôi đã tải nó lên máy chủ, nó vẫn ổn.

Vì đây là một trang web html đơn giản, tĩnh, tôi có thể làm việc trên nó mà không cần chạy máy chủ web cục bộ.
Một máy chủ web thường sẽ tự động phục vụ favicon, nếu có, theo mặc định.

Nhưng khi không chạy máy chủ web, trình duyệt sẽ không chỉ đọc thư mục tìm kiếm các tệp bổ sung, giả sử là favicon.ico, trừ khi nó được liệt kê trong tài liệu html.

Vì vậy, trong khi tôi có các mục sau trong headthẻ:

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

Tôi không còn bao gồm một tham chiếu cho đồng bằng ol' favicon.ico.
Mặc dù, favicon.icotập tin đã được đưa vào, ngoài những hình ảnh được liệt kê ở trên.

Khi tôi đã thêm dòng sau:

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

Nó cũng xuất hiện trong trình duyệt của tôi, khi tôi xem tệp cục bộ , ngay cả khi không phục vụ nó qua máy chủ cục bộ.

Vì vậy, biểu tượng xuất hiện tốt khi nó chạy trên máy chủ trực tiếp, nhưng không phải cục bộ.

Tôi đề cập điều này một cách rõ ràng bởi vì trình tạo favicon tôi đã sử dụng, vui lòng cung cấp mã, biểu tượng, bảng kê khai và hướng dẫn. Tuy nhiên, trong khi nó bao gồm favicon.icohình ảnh, nó không bao gồm một <link>tập tin đó trong mã để thêm vào htmltài liệu.
Tôi đoán rằng các giả định dịch vụ favicon.icosẽ tự động được phục vụ và sử dụng bởi tất cả các trình duyệt theo mặc định, do đó chỉ các phiên bản "thay thế" cần được thêm rõ ràng vào thẻ head.
Rõ ràng, họ không xem xét rằng khi xem các tệp cục bộ (còn gọi là không phục vụ chúng cục bộ), chúng ta không quan tâm đến việc xem favicon?

— SherylHohman
nguồn

1

Nếu bạn thêm favicon vào thư mục root / hình ảnh với tên trình duyệt favicon.ico sẽ tự động hiểu và lấy nó dưới dạng favicon.I đã thử nghiệm và làm việc. liên kết của bạn phải là www.website.com/images/favicon.ico

Để biết thêm thông tin hãy xem câu trả lời này:

Bạn có phải bao gồm <link rel = "icon" href = "favicon.ico" type = "image / x-icon" /> không?

— Sarkhan
nguồn

0

Lưu ý rằng FF không tải được biểu tượng có //URL dư thừa như /img//favicon.png. Đã thử nghiệm trên FF 53. Chrome vẫn ổn.

— Étienne Bersac
nguồn

Đó không thực sự là một câu trả lời nhiều như nó là một bình luận . (Xem phần " Cách trả lời ".)

— ashleedawg

0

Cố gắng sử dụng <link rel="icon" type="image/ico" href="images/favi.ico"/>

— chiều tối
nguồn

-2

Tôi chỉ sử dụng một png. Hãy chắc chắn để loại bỏ bất kỳ nền trắng. làm cho một biểu tượng tốt hơn

— Tom
nguồn

Thêm một favicon vào một trang HTML tĩnh