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.

flatsome favicon

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

favicon loi

Để 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 ý:

Xem thêm:  Bỏ tab "Thông tin bổ sung" cho sản phẩm biến thể

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

avata-web

Với 12 năm kinh nghiệm: Thiết kế web, SEO từ khóa, Adwords,… Tôi thành lập BALICO với mục tiêu mang đến những giải pháp chuyển đổi số trong kinh doanh dành cho doanh nghiệp vừa và nhỏ (SME), nâng cao năng lực cạnh tranh, đồng hành cùng khách hàng tự tin bước vào kỷ nguyên công nghệ 4.0

Kết nối với tôi:  Facebook | Tiktok | Twitter | Linkedin | Youtube | Blog