Favicon là một thuật ngữ còn khá mới mẻ đối với nhiều người sử dụng internet. Favicon là một trong các yếu tố đánh giá mức độ chuẩn của một website. Vậy Favicon là gì? Lợi ích của Favicon với website? Cách tạo favicon cho website? Bài viết hôm nay, mình sẽ giúp bạn giải đáp những thắc mắc về favicon.
Favicon là gì?
Favicon là một biểu tượng nhỏ đặc trưng hiển thị trên mỗi tab trình duyệt ứng với mỗi địa chỉ website. Favicon hiển thị ngay bên cạnh tên của trang web như một logo thu nhỏ.
Tại sao không nên sử dụng Logo làm Favicon?
Favicon là thể rút gọn của Logo nhằm mục đích giúp người đọc nhận biết thương hiệu riêng. Thông thường Logo thường được thiết kế gồm chữ dạng Tagline hay Title của website. Favicon lược bỏ chữ đi bởi vì kích thước hạn chế của nó chỉ cho phép bạn hiển thị biểu tượng. Bạn hãy xem hình dưới để hiểu rõ hơn về Favicon.
Lịch sử và trào lưu ra đời của Favicon
Favicon trước kia mới ra đời thì sở hữu một giao diện cũng như chức năng khá đơn giản chỉ cần bạn có sẵn một file. Ico là bạn có thể thấy các trình duyệt đó được nhận ra và trình bày lên góc con ở bên cửa sổ một cách tinh tế, sáng tạo và tỉ mỉ cao.
Nhưng sau một thời gian tìm tòi và nghiên cứu thì các nhà phát triển đã nghĩ ra thêm ý tưởng sử dụng file. Gif để có thể giúp những bức ảnh của bạn có thể chuyển động trên chính cửa sổ trình duyệt hay còn được gọi là hình ảnh động khác hẳn với những dòng ảnh tĩnh.
Và dần dần nó vẫn được phát triển một cách không ngừng, người dùng lại được đón nhận một xu thế trào lưu mới là sử dụng .png với các phần trong suốt.
Có thể kể đến như favicon sở hữu chỗ hở, chỗ che cũng như đục lỗ chính vì vậy cách biến tướng, thay đổi một cách tinh vi, sáng tạo để các thương hiệu, logo của công ty không còn nằm trong khu vực khung màu trắng mà nó thường xuất hiện trước đó nữa.
Các định dạng của Favicon
Và hiện nay đã có nhiều trình duyệt hơn và mức độ phức tạp cũng không ngừng nâng cao. Lẽ đó cũng đòi hỏi chúng ta phải tinh tế và tỉ mỉ hơn để làm cho favicon có thể thể hiện được tính năng của mình trên web như Coccoc, Firefox, Chrome… mà còn có thể trên cả các trình duyệt mobile.
Để tương thích với Favicon, bạn nên nhớ hai điều sau:
- Favicon cần sở hữu nhiều kích thước khác nhau như 16 x 16 pixels, 20 x 20 pixels, 24 x 24 pixels…
- Favicon cần có nhiều định dạng đuôi file khác nhau.
Tầm quan trọng của Favicon với website?
Làm trang web hiển thị nổi bật trên tab trình duyệt.
Giúp người duyệt web dễ dàng phân biệt được các trang web khác nhau:
- Khi mở nhiều tab trên trình duyệt, chỉ cần nhìn Favicon website là bạn có thể nhận ra tab nào là của web nào không cần đọc tiêu đề trang web.
- Tiết kiệm diện tích trình duyệt, người dùng có thể mở một lúc hàng chục tab mà vẫn phân biệt được các trang web trong từng tab
- Hoặc khi đánh dấu (bookmarks) các web lại, nhờ có favicon bạn cũng dễ dàng nhận ra các trang web trong danh sách bookmark.
Hướng dẫn cách tạo Favicon
Ngoài những thắc mắc về Favicon là gì? Thì cách tạo Favicon cho website cũng là vấn đề được nhiều người quan tâm.
Cách tạo Favicon đơn giản cho website: Favicon có hỗ trợ file phần mở rộng. Một số trình duyệt hỗ trợ các định dạng ảnh thông thường phổ biến như: gif, jpg, png…Tuy nhiên, bạn nên sử dụng định dạng .ico cho favicon sẽ tốt hơn đấy.
- Bước 1: Tạo file .icon: Đầu tiên bạn cần thiết kế một file ảnh theo một trong những kích thước sau: 16 x 16px , 32 x 32px, 48 x 48px, 64 x 64px.
- Bước 2: Truy cập trang http://www.favicon-generator.org/ để upload file ảnh của bạn lên để tạo favicon. Sau khi tạo xong trang web sẽ cung cấp cho bạn một link download ảnh đó đã được chuyển sang định dạng .ico.
- Bước 3: Download file favicon.ico vừa tạo được và up lên host chứa website của bạn.
- Bước 4: Chèn đoạn mã HTML để tạo favicon. Chèn đoạn mã sau vào trong phần của trang web.
Các lưu ý khi thiết kế Favicon
Để việc thiết kế Favicon trở nên dễ dàng và chuẩn nhất có thể, bạn hãy lưu ý những vấn đề sau đây:
Hãy ghi nhớ những lưu ý để việc thiết kế Favicon đượ chuẩn nhất có thể
- Favicon nên có định dạng là PNG bởi vì đây là định dạng có chất lượng hình ảnh tốt nhất.
- Kích thước file ảnh nên nhỏ hơn 100kb
- Kích thước Favicon tiêu chuẩn hiện nay là 512x512px. Một Favicon có kích thước lớn như vậy sẽ có được sự hiển thị sắc nét nhất.
Tạm kết
Trên đây là một vài kiến thức cơ bản về favicon. Hy vọng bài viết đã giúp bạn hiểu rõ favicon là gì và làm thế nào để tạo ra nó, hãy theo dõi mình để cập nhật những bài viết bổ ích về công nghệ nhé!
