Favicon là thành phần không thể thiếu đối với một trang web, nó mang ý nghĩa đại diện cho trang của bạn, cũng giống như mỗi người có chữ ký riêng thì mỗi trang web cũng nên có logo và favicon riêng. Favicon là từ được viết tắt của Favorite Icon, đây là biểu tượng nằm bên trên thanh tab của của trình duyệt khi bạn truy cập vào trang web.

Tạo Favicon đầy đủ cho website trên cả máy tính và di động

Giới thiệu Favicon

Để có thể hình dung được các favicon là như thế nào, bạn có thể tham khảo như hình mình gửi kèm bên dưới, các biểu tượng nho nhỏ nằm bên trái mỗi tiêu đề trong mỗi tab là một favicon, khi nhìn vào biểu tượng đấy thì bạn có thể hình dung được trang web nằm bên trong là gì, tuy nhiên đối với những trang bạn chưa từng biết đến thì dù có nhìn thấy icon thì cũng không đoán ra được đâu.

Favicon trên Chrome

Bấm vào hình để xem kích thước lớn hơn.

Hầu hết, mọi người đều biết cách tạo favicon trên trình duyệt web, nhưng họ không biết rằng trong chức năng favicon này lại còn nhiều phần nhỏ bên trong, nếu bạn chỉ tạo một favicon cho trình duyệt web trên máy tính thôi thì chưa đủ, bạn cũng phải quan tâm đến thiết bị di động, cũng giống như giao diện của website vậy.

Init HTML - iOS

Và bây giờ, khi bạn đã đang đọc bài hướng dẫn này rồi thì còn chờ gì nữa mà không làm theo thử một cái cho vui. Sau khi thực hiện xong bạn sẽ truy cập vào trình duyệt bằng thiết bị di động và kéo biểu tượng trang web của mình ra ngoài màn hình, nhìn thấy icon xinh xắn thì thật thích phải không nào.

Tạo favicon đầy đủ cho website

Để tạo được favicon đầy đủ, tương thích với cả trình duyệt trên máy tính và các thiết bị di động, trước hết bạn phải thiết kế 1 icon hình vuông, có kích thước ít nhật 128×128 px, tốt nhất là bạn nên thiết kế favicon của bạn ở kích thước 256×256 px hoặc là lớn hơn. Miễn sao thiết kế của bạn phải đơn giản và rõ nét, nếu bạn dùng hình có kích thước bé quá thì khi hiển thị hình sẽ bị nhòe, nhìn rất xấu đó.

Bước 1. Bạn vào trang web realfavicongenerator.net, chọn Select your Favicon picture để tải icon lên.

Tạo favicon - bước 1

Bấm vào hình để xem kích thước lớn hơn.

Bước 2. Cấu hình như ví dụ dưới đây, sau đó bấm Generate your Favicons and HTML code.

Tạo favicon - bước 2

Bấm vào hình để xem kích thước lớn hơn.

Bước 3. Làm theo hướng dẫn trên trang kết quả.

Tạo favicon - bước 3

Bấm vào hình để xem kích thước lớn hơn.

  • Bấm vào nút Favicon package để tải về.
  • Giải nén tập tin vừa tải về vào /img/favicons (đây là đường dẫn cấu hình ở bước 2).
  • Chèn đoạn mã nhận được vào <head></head> của website.

Vậy là chúng ta đã hoàn thành, thật đơn giản phải không nào?