Share vì hữu ích

Favicon không phải là khái niệm mới. Nó đã xuất hiện từ lâu trên Internet Explorer và trên các trình duyệt hiện đại ngày nay như một sự trường tồn bất biến.

Favicon là gì?

Đừng quá băn khoăn, nó là từ ghép “favourite icon“, tức icon được yêu thích. Hoàn cảnh ra đời của nó cũng là một tiến bộ về mặt UX từ những năm 90 khi mà người ta có thói quen sử dụng bookmark (công cụ để đánh dấu các trang web hay). Vấn đề nảy sinh là làm thế nào trong danh sách bookmark ta có thể phân biệt các địa chỉ dễ dàng hơn nếu tất cả chỉ là chữ? Vậy là favicon ra đời. Nó là một biểu tượng nhỏ xíu nằm cạnh tên website mỗi khi duyệt web, cũng như khi bạn ghé thăm bookmark của trình duyệt.

Chẳng hạn, chữ C nền đen chữ trắng chính là Favicon của Code Tốt:

Toàn tập về Favicon dành cho website

Favicon có những định dạng nào?

Ví dụ điểm ảnh của Favicon
Ví dụ điểm ảnh của Favicon

Lịch sử và trào lưu Favicon

Favicon hồi mới ra đời thì đơn giản, bạn cần 1 file .ico là các trình duyệt hồi đó nhận ra và trình bày lên cái góc con con cửa sổ đẹp đẽ.

Một thời gian sau thì sinh ra thêm trò sử dụng file .gif (vâng, rất trẻ trâu), và tha hồ ảnh nhảy nhót trên cái cửa sổ trình duyệt. Trò đấy giờ vẫn có thể dùng nếu bạn nghĩ mình còn trẻ nhé! Xem ở đây!

Sau khi những trò trẻ trâu kết thúc, chúng ta lại đón trào xu hướng sử dụng .png với các phần trong suốt, ví dụ như favicon có chỗ hở chỗ che, đục lỗ, đại khái là cách biến tướng tinh vi để mấy cái logo công ty, website không còn nằm trong khung màu trắng thường thấy nữa.

Ấy mà thời gian trôi qua, và mọi thứ thay đổi…

Các định dạng của Favicon

Giờ ta có nhiều trình duyệt hơn, và độ phức tạp cũng cao hơn. Ta cần nắn nót hơn để làm favicon thể hiện trên web (Chrome, Firefox, Safari, Opera), lại còn trên cả các trình duyệt mobile nữa.

Để tương thích, bạn cần nhớ:

  • Favicon cần có nhiều kích thước khác nhau.
  • Favicon cần có các định đạng đuôi file khác nhau.

Làm cách nào ta tạo ra Favicon?

OK, đây không hẳn là câu hỏi quá khó (bạn có thể tìm kiếm và ra cả nghìn kết quả mà!). Tuy vậy, ta cứ giải thích đầy đủ để nhỡ ai không phải developer thì cũng không bị sa sẩy mặt mày vì… không biết.

Favicon có thể hiển thị bằng cách bạn sử dụng một số công cụ miễn phí có sẵn trên mạng (ơn trời, không phải làm bằng tay như những năm 9x), sau đó tải về máy rồi lại tải lên thư mục chứa website và thêm vài dòng lệnh cỏn con là úm ba la mọi thứ sẽ hiện ra.

Thông thường (và tốt nhất), favicon nên nằm ngang hàng địa chỉ tên miền truy cập của bạn, ví dụ:

https://codetot.net/favicon.png
https://codetot.net/favicon.ico

Và nếu bạn không muốn đẩy favicon vào ngang hàng thư mục website, bạn cần set trong code 1 đoạn mã để nó hiển thị từ đường dẫn mà bạn muốn, chẳng hạn thế này:

Công cụ tạo ra Favicon

Uầy, vậy tạo ra đoạn mã này như thế nào? Bạn có thể dùng các công cụ sau:

Tất nhiên, dù là bằng công cụ thì vẫn cần bạn chuẩn bị một ảnh logo có kích thước vuông, thường nên là khổ 1024x1024px nhé. Định dạng file PNG sẽ được convert qua các loại favicon khác nhau và cho bạn tải về để sử dụng.

Sử dụng Favicon trong giao diện WordPress

Nếu bạn đặt favicon vào trong giao diện WordPress, có thể bạn cần sửa đường dẫn của một số file trong package favicon như ví dụ dưới đây:

Tài liệu tham khảo

Bảng liệt kê các kiểu định dạng và kích thước của icon

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời