Hình ảnh bên cạnh tiêu đề trang trong tab trình duyệt - làm cách nào bạn có thể liên kết hình ảnh ở đây?
Câu trả lời:
Hình ảnh đó được gọi là ' favicon ' và đó là một .icotệp hình vuông nhỏ , là loại tệp tiêu chuẩn cho favicon. Bạn có thể sử dụng .pnghoặc .gifquá, nhưng bạn nên tuân theo tiêu chuẩn để tương thích tốt hơn.
Để đặt một cái cho trang web của bạn, bạn nên:
Tạo hình ảnh vuông cho biểu trưng của bạn (tốt nhất là 32x32 hoặc 16x16 pixel, theo tôi biết là không có kích thước tối đa *) và chuyển đổi nó thành một .icotệp. Bạn có thể thực hiện việc này trên Gimp, Photoshop (với sự trợ giúp của plugin ) hoặc một trang web như Favicon.cc hoặc RealFaviconGenerator .
Sau đó, bạn có hai cách để thiết lập:
A) Đặt nó vào thư mục gốc / thư mục của trang web của bạn (bên cạnh index.html) với tên favicon.ico.
hoặc là
B) Liên kết đến nó giữa các <head></head>thẻ của mọi .htmltệp trên trang web của bạn, như sau:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>Nếu bạn muốn xem favicontừ bất kỳ trang web nào, chỉ cần viết www.url.com/favicon.icovà bạn (có thể) sẽ thấy nó. Biểu tượng yêu thích của Stackoverflow là 16x16 pixel và Wikipedia là 32x32.
*: Thậm chí có sự cố trình duyệt không có giới hạn kích thước tệp. Bạn có thể dễ dàng gặp sự cố trình duyệt có biểu tượng yêu thích cực kỳ lớn, thêm thông tin tại đây
Nó được gọi là ' favicon ' và bạn cần thêm mã bên dưới vào phần tiêu đề của trang web của mình.
Chỉ cần thêm điều này vào <head>phần.
<link rel="icon" href="/your_path_to_image/favicon.jpg">Đây là favicon và được giải thích trong liên kết.
ví dụ từ W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">Thêm vào đó, tất nhiên tệp hình ảnh ở nơi thích hợp.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">hoặc bạn có thể sử dụng cái này
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">Thêm tệp biểu tượng có tên "favicon.ico" vào thư mục gốc của trang web của bạn.
16x16 px.