Các Favicon trên danh sách bookmark của trình duyệt

Thay đổi Favicon cho website của bạn như thế nào ?

Favicon giúp người dùng nhận dạng ra website của bạn khi chúng hiển thị trên tab trình duyệt hoặc trong các bookmark của người dùng

Trang web của bạn có Favicon chưa ? Nếu chưa có thì cũng không sao cả, nhưng nếu có thì trang web của bạn sẽ trông pro hơn, và sẽ dễ dàng nhận ra trong các bookmark của trình duyệt. Bài viết này sẽ hướng dẫn các bạn tích hợp một Favicon mang phong cách của bạn vào trong website.

Các Favicon trên danh sách bookmark của trình duyệt
Các Favicon trên danh sách bookmark của trình duyệt

Favicon là gì ?

Favicon là viết tắt của chữ Favorite Icon, là một biểu tượng nhỏ được khai báo trên thẻ head của một website. Dùng để hiển thị trên các tab của trình duyệt hoặc trong các bookmark của người dùng.

Cách thêm Favicon vào website

Kích thước của ảnh: Các Favicon thường có kích thước nhỏ khoảng 35x35px và lớn hơn 16px vuông.

Định dạng: Định dạng phổ thông chấp nhận là .ICO, .GIF và PNG. Các bạn có thể sử dụng cả hai định dạng trên nhưng khai báo là khác nhau.

Cách thêm PNG làm Favicon

<link rel="icon" type="image/png" href="/somewhere/myicon.png" />

Các bạn có thể thiết kế ảnh PNG 35x35px cho website của mình !

Cách thêm ICO làm Favicon

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

Để thiết kế một file ICON, các bạn nên sử dụng ảnh định dạng PNG sau đó convert sang định dạng Icon bằng website Favicon.cc để convert nhé.

Và giờ thì cho code trên vào giữa thẻ <head></head> sau đó refresh lại trình duyệt. Giờ thì bạn sẽ thấy Favicon hiển thị trên đầu tab trình duyệt rồi đấy !

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

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.

Có 4 bình luận !

  1. Jam cho mình hỏi chút, mình không rành code wp, mình muốn đặt code canonical cho từng trang, hiện nay code thì ai cũng biết là tuy nhiên mình phải điền cái gì vào chỗ dấu * để nó xác định canonical cho từng post trong bài viết, mình để dấu / thì các bài post cũng chỉ xác định canonical là trang chủ chứ không phải các bài post riêng lẻ, mong được hỗ trợ

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *