Cách tạo và gắn biểu tượng favicon và favicon động ( dạng gif favicon ) cho website

Favicon là biểu tượng (icon) của trang web nằm bên cạnh địa chỉ trang web (URL) trên thanh địa chỉ (Address) trên trình duyệt của người dùng. Nó dùng để nhận diện nhanh website trong danh sách ưa thích của người dùng (favorites)

Sau đây là cách tạo và gắn biểu tượng favicon và favicon động ( dạng gif favicon ) cho website:

1 Tạo và gắn favicon lên website

Định dạng mặc định của favicon là .ico nên sau khi bạn đã thiết kế file hình icon định dạng .png hoặc .gif xong bạn upload lên một trong các website sau: www.favicon.cc , www.favicon.co.uk hoặc www.favicon-generator.org để convert chúng sang định dạng .ico

Sau đó bạn download xuống, upload lên hosting trong mục root của website của bạn (Ngang hành với file index ) và gắn trước thẻ </head> đoạn code sau:

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

2 Tạo và gắn favicon động ( dạng gif favicon) cho website

Hiện nay trình duyệt đã hỗ trợ dạng favicon động, favicon định dạng .gif, bạn thực hiện như sau:
Bạn tạo một file hình động animated_favicon.gif hoặc vào website www.animatedfavicon.com để tạo nếu bạn chỉ có thể làm một favicon dạng .png.

Sau đó bạn upload lên folder root của website trên hosting và chèn đoạn code sau vào trước thẻ </head> :

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Vậy là xong, hãy xóa cache trình duyệt trước khi xem kết quả nhé.

Chúc các bạn thành công!


Xem thêm:
- Hướng dẫn cách làm banner quảng cáo responsive
- Code popup quảng cáo nằm dưới trình duyệt (popup under)
- Cách chạy lệnh Javascript sau khi load trang hoàn tất
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Hướng dẫn sử dụng Lazy Load cho website hoặc blog
- Cách ẩn số lượng sản phẩm trong danh mục OpenCart