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

Rate this post

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?

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

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...