Sửa lỗi Flatsome không hiển thị Favicon

Favicon là gì?

Favicon là một ảnh nhỏ đại diện cho trang web và hiển thị trên trình duyệt web. Nó được lưu lại khi người dùng bookmark địa chỉ web của bạn, để cho phép người dùng dễ dàng tra cứu sau này. Favicon còn được gọi là shortcut icon, website icon, tab icon, URL icon hoặc bookmark icon.

Trong WordPress, Favicon thường được hỗ trợ bởi trình quản lý chủ đề của trang web. Bạn có thể tạo Favicon cho trang web bằng cách chọn hình ảnh và lưu lại. Tuy nhiên, đôi khi Favicon không hiển thị đúng cách, thay vì hiển thị Favicon, trang web chỉ hiển thị một ô trống. Điều này có thể khiến trang web của bạn trông không chuyên nghiệp.

Cách phát hiện lỗi Favicon và xử lý

Một cách nhanh nhất để nhận biết lỗi Favicon là mở trang web của bạn trên trình duyệt ẩn danh. Nếu bạn không thấy biểu tượng đại diện cho trang web của bạn xuất hiện trên thanh tiêu đề, điều đó cho thấy trang web của bạn đang gặp lỗi hiển thị Favicon.

Dùng website sau đây: https://realfavicongenerator.net/ để kiểm tra lỗi Favicon, với cách này chúng ta có thể kiểm tra lỗi Favicon trên nhiều thiết bị khách ngoài laptop còn có tablet, mobile ..

Trong bài viết này mình sẽ hướng dẫn bạn sửa lỗi không hiển thị favicon trên theme Flatsome (một trong những theme bán chạy nhất trên themeforest hiện nay), trong quá trình mình làm dịch vụ tư vấn SEO hay sửa website cho nhiều đơn vị và cá nhân, mình gặp nhiều câu hỏi về vấn đề này nên hôm nay mình viết bài chia sẻ cho các bạn

Để hiển thị favicon của trang web Flatsome trên trình duyệt bên ngoài, bạn cần thêm mã sau vào file functions.php của theme đang sử dụng (theme child):

1. Đăng nhập vào trang quản trị WordPress của bạn.

2. Mở file functions.php trong theme bạn đang sử dụng để chỉnh sửa.

3. Thêm đoạn mã sau vào cuối file functions.php của bạn:

//hien thi favicon
function flatsome_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="/wp-content/uploads/2023/03/favicon.png" />' . "\n";
}
add_action('wp_head', 'flatsome_favicon');

Lưu ý:

Trong đó đoạn đường dẫn: href=”/wp-content/…. các bạn nhớ thay bằng đường dẫn hình ảnh favicon mà bạn đã upload lên (và tốt nhất nên upload hình định dạng .png nhé)

Nếu favicon của bạn có tên khác hoặc định dạng khác, bạn cần thay đổi mã trong hàm flatsome_favicon() để phù hợp với favicon của bạn.

Nếu favicon của bạn là file JPG, bạn có thể thay đổi giá trị của thuộc tính type thành “image/JPG”.

Chúc các bạn thành công