Favicon là gì? Hướng dẫn tạo và thêm Favicon cho website

Sau khi đọc bài viết sau, bạn sẽ có thêm các kiến thức hữu ích về Favicon như sau:

 

Khái niệm và lịch sử của Favicon giúp bạn nhận biết thương hiệu của website cũng như hiểu rõ quá trình tiến hóa của định dạng này.

 

Lý do sử dụng và lợi ích của Favicon sẽ hỗ trợ bạn hiểu rõ về tầm quan trọng của biểu tượng này trong việc tạo dấu ấn thương hiệu và tạo trải nghiệm người dùng tốt hơn.

 

Các định dạng và lưu ý khi sử dụng Favicon giúp bạn nắm được các điểm quan trọng về định dạng, kích thước và chất lượng.

 

Hướng dẫn chi tiết 4 bước tạo favicon từ thiết kế đến tải lên website, giúp người dùng dễ dàng tự tạo và thêm favicon vào trang web của mình.

 

 

Favicon là một biểu tượng nhỏ hiển thị ở góc trên cùng của mỗi tab khi chúng ta truy cập vào trình duyệt. Để hiểu đơn giản, favicon là một dạng rút gọn của logo; favicon không chứa chữ mà chỉ có biểu tượng. Favicon còn được gọi là biểu tượng website và được thiết kế với kích thước là 16 x 16 pixels trong WordPress. Favicon sẽ mang lại cho website những lợi ích vô cùng đặc biệt.

Favicon được tạo ra bởi John Sorrentino, ban đầu khi favicon mới ra đời nó có giao diện và chức năng khá đơn giản. Bạn chỉ có sẵn một file .ico là đã có thể thấy các trình duyệt đó tại góc cửa sổ. Trải qua một thời gian tìm tòi và nghiên cứu thì các nhà phát triển đã nảy ra ý tưởng sử dụng file .gif để làm cho những bức ảnh 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 nhàm chán. Sau đó, favicon vẫn không ngừng phát triển, người dùng lại được đón nhận một xu thế trào lưu mới là sử dụng file .png với các phần trong suốt. 

 

Thực tế, favicon là thể rút gọn của logo, mục đích của việc sử dụng favicon là để giúp người đọc nhận biết thương hiệu riêng một cách dễ dàng hơn. Bởi lẽ kích thước của favicon khá hạn chế nên chữ sẽ được lược bỏ đi và chỉ có biểu tượng được hiển thị. Còn Logo thường được thiết kế bao gồm chữ dạng Tagline hay Title của website. 

 

Thứ nhất, favicon sẽ giúp người đọc dễ dàng nhận biết được đâu là tab của bạn khi họ đang mở trình duyệt, cũng như phân biệt website của bạn trong phần bookmark trình duyệt với những website khác.

Thứ hai, favicon tô điểm thêm cho website của bạn. Một website không có favicon sẽ thiếu sức hút hơn rất nhiều so với website có favicon. Hẳn là bạn sẽ không muốn lưu một trang web vào bookmark mà chẳng hề có một biểu tượng gì tượng trưng cho trang web đó phải không? 

Chỉ với hai lý do trên đã có thể minh chứng cho tầm quan trọng của favicon đối với website.

Định dạng tệp ICO được phát triển bởi Microsoft và là định dạng tệp gốc cho favicon. Định dạng này là duy nhất vì nó cho phép nhiều hình ảnh nhỏ trong cùng một tệp. Điều này có lợi vì các biểu tượng nhỏ cần thiết cho favicon ở định dạng ICO (16×16, 32×32 và 48×48 pixel) có thể được thu nhỏ; và tối ưu hóa một cách độc lập. Ở kích thước nhỏ, bạn không thể dựa vào trình duyệt để tự động thay đổi kích thước biểu tượng của mình theo cách tối ưu. Định dạng ICO được hỗ trợ bởi tất cả các trình duyệt; và đó là định dạng duy nhất mà IE5 đến IE10 hỗ trợ.

 

Định dạng PNG là một định dạng đẹp vì đây là định dạng mà hầu hết mọi người đều quen dùng; và không yêu cầu bất kỳ công cụ đặc biệt nào để tạo. Với màn hình hiện đại có độ phân giải cao; vấn đề ban đầu về kích thước biểu tượng nhỏ đối với độ phân giải nhỏ không còn tồn tại. Đối với các trình duyệt hỗ trợ định dạng favicon PNG; chất lượng của favicon được hiển thị trong tab trình duyệt; hoặc thanh dấu trang sẽ cao hơn định dạng ICO. Nhược điểm của định dạng PNG là nó không tương thích với IE5 đến IE10.

 

Định dạng SVG có lợi hơn định dạng PNG và ICO; nhưng chưa có hỗ trợ trình duyệt tuyệt vời. Các tệp SVG rất nhẹ và chúng có khả năng mở rộng vô hạn. Điều này có nghĩa là chất lượng hình ảnh tuyệt vời; mà không phải hy sinh thời gian tải cho những hình ảnh nặng. Chỉ có Chrome, Firefox và Opera hỗ trợ định dạng SVG.

 

Favicon giúp làm nổi bật thương hiệu của bạn; đồng thời tạo nên sự khác biệt với các website khác. Mặt khác còn giúp người dùng dễ dàng nhớ và nhận dạng thương hiệu của bạn. Favicon được xem là một công cụ đắc lực trong hỗ trợ SEO; giúp xây dựng thương hiệu cho các doanh nghiệp một cách nhanh chóng.

 

Ngoài ra nó còn có khả năng giúp cho máy tìm kiếm có thể xếp hạng được các website trong toàn bộ hệ thống một cách dễ dàng. Hơn nữa, favicon còn xác định được tab đang mở trong trình duyệt thông qua một số icon. Điều này giúp người sử dụng tránh tình trạng nhầm lẫn so với các tab khác.

 

Dưới đây là 4 bước để tạo favicon cho website WordPress:

 

 

Bước 1: Tạo file. icon.

 

 

Đầu tiên bạn cần thiết kế một file ảnh riêng với những kích thước sau: 16 x 6 pixels, 32 x 32 pixels, 48 x 48 pixels,…

 

 

Bước 2: Truy cập trực tiếp vào đường link http://www.favicon-generator.org/ để upload file ảnh bạn vừa tạo ở bước 1 để tạo favicon. Sau đó, bạn sẽ nhận được một đường link download ảnh và được chuyển sang định dạng .ico.

 

 

Bước 3: Download file favicon.ico rồi up lên host website của mình.

 

 

Bước 4: Chèn đoạn mã HTML để thiết lập favicon. Sau đó chèn đoạn mã HTML vào phần <head> </head> của trang web.

 

Giống như những lợi ích mà favicon đem lại cho website, thì WordPress cũng sẽ nhận được những lợi ích đó khi thêm favicon. Favicon sẽ giúp người dùng nhanh chóng xác định được WordPress khi họ đang sử dụng quá nhiều tab. 

 

Bạn có thể dễ dàng thêm một favicon hoặc biểu tượng trang web ở khu vực admin WordPress đối với phiên bản của WordPress 4. 3. Cách thực hiện rất đơn giản, đầu tiên bạn chỉ cần click vào Appearance rồi chọn Customize và nhấn vào tab Site Identity. Đối với những hình ảnh đang upload mà vượt quá kích thước cho phép thì WordPress sẽ giúp bạn cắt nó và làm giảm size của ảnh đến khi hình ảnh phù hợp với kích thước chuẩn thì bạn mới có thể lưu lại.

 

 

Cách thêm favicon cho WordPress ở phiên bản cũ

Đầu tiên bạn tải favicon vào thư mục gốc của trang web – trang web mà bạn đang sử dụng FTP. Sau đó dán mã code vào file header. php vào chủ đề của bạn. 

 

 

Đường link như sau:

 

<link rel=”icon” href=”https://xxxxx.vn/favicon.png” type=”image/x-icon” />

 

<link rel=”shortcut icon” href=”https://xxxxx.vn/favicon.png” type=”image/x-icon” />

 

Sau khi click và kích hoạt plugin thì vào Settings > Insert Headers and Footers và dán đoạn mã được cung cấp vào phần tiêu đề và tiến hành lưu vào các thiết lập của bạn.

 

ins – mục đã được cài đặt sẵn trong thể và có thể chèn thêm một dòng code.

Một vài lưu ý khi sử dụng favicon là gì?

 

Thứ nhất, định dạng của faviconnên là PNG bởi vì PNG sẽ giúp bạn giữ được chất lượng hình ảnh tốt nhất thậm chí là bạn đã nén ảnh.

 

Thứ hai, kích thước file phải <100 KB.

 

Thứ ba, kích thước favicon tiêu chuẩn hiện nay nên là 512×512 px.