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ôi là Jam, thâm niên 7 năm thiết kế website và làm seo, nếu các bạn thấy bài viết hay thì hãy chia sẻ cho những người khác cùng tham khảo, còn nếu muốn thiết kế website hoặc sửa web hay đặt một plugin có chức năng đặc biệt, hãy liên hệ ngay tới Jam ( thông tin ở chân trang )

Bài viết liên quan

  1. RIP theme là gì ? RIP giao diện website là gì ? - 03-04-2016 22:04
  2. Điều gì làm tôi thoát ngay sau khi truy cập vào trang web nào đó ? - 04-03-2016 03:03
  3. 4 phần mềm RIP Web dành cho dân thiết kế - 03-02-2016 21:02
  4. Cẩn thận khi bạn tra whois domain để mua ! - 08-01-2016 22:01

Trả lời

Thư điện tử 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 *

Lưu ý: Không đăng thông tin cá nhân của bạn như email hay số điện thoại để không bị quấy rầy, tham khảo thêm quy định khi comment !