Favicon là gì?? Cách thêm Favicon cho Website Wordpress
ZHost.vn

Favicon là gì?? Cách thêm Favicon cho Website WordPress

Không phải ngẫu nhiên mà hiện nay hầu như bên cạnh logo của các website WordPress đều có mục riêng để Favicon hiển thị. Vậy bạn có hiểu mục đích của chúng? Nếu chưa, Zhost mời bạn cùng tham khảo Favicon là gì, cũng như lợi ích của nó để tìm lời giải cho vấn đề này nhé.

Mục Lục

Favicon là gì?

Favicon là một biểu tượng của webiste. Nó được thể hiện bằng hình ảnh icon hiển thị ở góc trên cùng của trình duyệt. Nhờ thế, khi người dùng truy cập vào website, họ sẽ nhìn thấy biểu tượng này và nó có tác dụng như logo thu gọn, đại diện cho website.

Trong website WordPress, các Favicon thường dùng có kích thước chuẩn là 16×16 pixels và đã được loại bỏ bớt phần chữ để phù hợp với kích thước hạn chế của tabs trình duyệt. Mặc dù chỉ là hình ảnh khiêm tốn nhưng nó lại có nhiều ý nghĩa về mặt nhận diện thương hiệu của doanh nghiệp.  

Hay nói cách khác, định nghĩa về Favicon được thể hiện bằng công thức cực kỳ đơn giản là:

Favicon = Logo – Text

favicon la gi

Lý do website nên tạo Favicon

Có khá nhiều lý do để bạn nên tạo một Favicon mặc dù đã có logo riêng cho website của mình. Đó là:

  • Tạo sự thân thiện cho người dùng bằng cách giúp họ nhận biết tab của website khi mở nhiều trình duyệt. Đồng thời, Favicon còn là dấu hiệu để phân biệt các website trong phần bookmark và tránh sự nhầm lẫn với site khác.
  • Giúp tăng tính thẩm mỹ cho website. Vì thực tế cho thấy, một website không có Favicon sẽ tẻ nhạt hơn rất nhiều so với website có Favicon.
  • Mang lại nhiều lợi ích khác về mặt giá trị thương hiệu của doanh nghiệp.

Lợi ích của Favicon là gì?

Favicon mang đến cho người dùng các lợi ích sau:

  • Favicon là một biểu tượng đặc trưng của website. Nó giúp tạo sự khác biệt và tăng sự nổi bật của thương hiệu. Hay nói cách khác, Favicon chính là dấu hiệu riêng của mỗi website.
  • Favicon hỗ trợ đắc lực trong hoạt động SEO, giúp tăng khả năng nhận diện thương hiệu. Ngoài ra, Favicon còn giúp cho các công cụ tìm kiếm như Google, Bing… dễ nhận dạng và ghi nhớ thương hiệu.
  • Các icon của Favicon giúp xác định tab mở website trên trình duyệt.

favicon la gi

Hướng dẫn cách tạo Favicon cho website

Cách tạo Favicon cho website khá đơn giản. Bạn chỉ việc làm theo các bước hướng dẫn sau:

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

Bạn thiết kế file ảnh đại diện cho website của mình có kích thước 16 x 16px , hoặc nếu muốn lớn hơn thì chọn 32 x 32px, 48 x 48px hay 64 x 64px. Tuy nhiên, kích thước 16 x 16px vẫn được khuyên dùng.

  • Bước 2: Bạn truy cập vào website http://www.favicon-generator.org/ để tải file ảnh vừa thiết kế và thực hiện tạo Favicon. Sau khi hoàn tất tạo Favicon, website sẽ gửi một link download ảnh đã chuyển sang định dạng file.ico.
  • Bước 3: Bạn tiến hành tải về file ảnh có định dạng mới (favicon.ico) và up lên host lưu trữ website.
  • Bước 4: Để tạo Favicon, bạn chèn thêm đoạn mã HTML vào phần <head> </head>của website.

Cách thêm Favicon cho WordPress

  1. Cách thêm Favicon cho WordPress phiên bản 4.3

Với phiên bản này, bạn dễ dàng thêm Favicon cho website ngay ở phần admin của WordPress. Cụ thể, bạn click chọn Appearance, chọn tiếp Customize và nhấn Site Identity.

Trong cửa sổ nhận dạng, bạn có thể thay đổi tiêu đề trang, hoặc kiểm soát việc hiển thị của biểu tượng trong tiêu đề và tải biểu tượng của website.

Trong trường họp, hình ảnh biểu tượng của website vượt quá kích thước giới hạn thì WordPress tự động cắt chúng và giảm dung lượng ảnh, nhằm đảm bảo phù hợp với chuẩn kích thước đã quy định của trang web. Sau đó, bạn thực hiện lưu lại các thay đổi này.

Như vậy, bạn đã hoàn tất tạo Favicon cho website WordPress. Bạn có thể kiểm tra xem biểu tượng hiển thị thế nào, bằng cách truy cập website trên trình duyệt máy tính hoặc thiết bị di động.

  1. Cách thêm Favicon cho WordPress các phiên bản cũ

  • Bước 1: Bạn tải Favicon lên thư mục gốc của website WordPress (trang đang sử dụng FTP).
  • Bước 2: Bạn tiến hành dán mã code tập tin header. php vào chủ đề. Đường dẫn có dạng sau:

<link rel=”icon” href=”http://www.yourdomain.com/favicon.png” type=”image/x-icon” />

<link rel=”shortcut icon” href=”http://www. yourdomain.com/favicon.png” type=”image/x-icon” />

Lưu ý: “yourdomain.com” chính là URL của website đang quản lý.

Trong trường hợp, bạn không tìm thấy tập tin header. php hoặc theme không chứa nó thì có thể sử dụng thêm plugin hỗ trợ.

favicon la gi

Một số lưu ý khi thiết kế demo mẫu Favicon đẹp cho website

Khi bạn đã hiểu về Favicon là gì, cũng như cách tạo nó trên website thì cuối cùng sẽ là những lưu ý để có thể thiết kế các Favicon đẹp mắt, ấn tượng, thu hút sự chú ý của người truy cập internet. Điều này góp phần tăng khả năng nhận biết thương hiệu và thúc đẩy SEO.

  • Bạn nên thiết kế Favicon có định dạng là PNG. Vì với định dạng này, chất lượng hình ảnh được giữ ở mức tốt nhất, kể cả trong trường hợp bạn đã thực hiện nén ảnh.
  • Kích thước file ảnh không nên lớn hơn 100 KB.
  • Hiện nay, kích thước tiêu chuẩn của Favicon nên là 512×512 px. Vì điều này giúp đáp ứng tốt nhất việc hiển thị trên màn hình Retina của Apple hay các màn hình 4K của thiết bị di động. Cụ thể, nó giúp hình ảnh có độ sắc nét nhất định, mang đến sự thân thiện cho người truy cập website.

Tham khảo thêm :