STDIO Favicon là một hình ảnh, một biểu tượng thu nhỏ giúp cho người dùng dễ dàng nhận ra nội dung, những tính năng, dịch vụ mà trang web của bạn mang lại, bài viết hướng dẫn tạo và chèn vào web.
Nội dung bài viết

Giới thiệu

Favicon (viết tắt của Favorite Icon) được giới thiệu lần đầu tiên vào năm 1999 với sự hỗ trợ của trình duyệt Internet Explorer 5.0. Favicon là một hình ảnh, một biểu tượng thu nhỏ nằm kế bên trái của tiêu đề hoặc địa chỉ của trang web, cũng có thể là của một biểu tượng shortcut. Favicon được tạo ra với tác dụng giúp cho người dùng dễ dàng nhận ra được nội dung, những tính năng, dịch vụ mà trang web của bạn mang lại.

favicon-sample-bug-vn

Trình duyệt tương thích với hình ảnh

Browser ICO PNG GIF animated GIFs JPEG APNG SVG
Edge Yes Yes Yes No Unknown Unknown Unknown
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4.0 4.0 4.0 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
Safari Yes 4.0 4.0 No 4.0 No No

Đưa favicon vào trang web

Hiện tôi có thư mục như sau:

favicon-resource-sample

Viết đoạn mã HTML để chèn Favicon vào trang web (trong trường hợp dùng favicon.png).

Đoạn code cần chèn là <link rel="icon" type="image/png" href="favicon.png"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Favicon</title>
        <link rel="icon" type="image/png" href="favicon.png" />
    </head>
</html>

Giả sử bạn dùng favicon.ico thì dùng đoạn code sau <link rel="icon" type="image/ico" href="favicon.ico"/>

Download code đầy đủ

Favicon.zip

Lời kết

Favicon là một hình ảnh, một biểu tượng dù rất nhỏ nhưng nó mang lại hữu ích, trải nghiệm rất tốt cho người dùng, qua đó có thể thấy được sự tỉ mỉ của các lập trình viện web.

THẢO LUẬN
ĐÓNG