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:
Favicon có những định dạng nào?
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
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
