Trong quá trình vận hành website WordPress, đặc biệt là khi sử dụng các theme lớn như Flatsome, lỗi favicon không hiển thị, hiển thị sai icon hoặc không tự thay đổi khi khách chỉnh trong admin là vấn đề xảy ra khá thường xuyên.
Nguyên nhân phổ biến nhất không nằm ở WordPress, mà đến từ việc theme ghi đè favicon, thiếu hook chuẩn hoặc code favicon bị hard-code thủ công trong header.php.
Bài viết này hướng dẫn cách dùng lại hoàn toàn cơ chế favicon mặc định của WordPress Core, đảm bảo:
- Khách hàng chỉ cần đổi Site Icon trong admin
- Favicon tự động cập nhật trên toàn website
- Không phụ thuộc Flatsome hay bất kỳ theme nào
- Chuẩn SEO, an toàn khi update WordPress & theme
1. Cơ chế favicon mặc định của WordPress hoạt động thế nào?
Từ WordPress 4.3 trở lên, WordPress đã tích hợp sẵn Site Icon (favicon) trong Core.
Khi bạn thiết lập Site Icon tại:
Giao diện → Tùy biến → Nhận diện trang web → Biểu tượng trang web (Site Icon)
WordPress sẽ tự động sinh toàn bộ favicon cần thiết, bao gồm:
- favicon 16×16, 32×32
- icon cho mobile & tablet
- apple touch icon
- meta tile cho trình duyệt
Tất cả được hook trực tiếp vào <head> thông qua wp_head().
👉 Điều này có nghĩa là KHÔNG cần tự viết <link rel="icon"> nếu theme tuân thủ chuẩn.
2. Code mặc định chuẩn WordPress (bắt buộc phải có)
Trong file header.php, bên trong thẻ <head> bắt buộc phải tồn tại dòng sau:
1 | <?php wp_head(); ?> |
📌 Đây là hook quan trọng nhất của WordPress, không chỉ cho favicon mà còn cho:
- SEO
- CSS / JS
- Plugin
- Schema
- Analytics
➡️ Nếu thiếu dòng này, favicon mặc định sẽ không bao giờ hoạt động, dù đã set Site Icon trong admin.
3. Trường hợp website đang lỗi theme (Flatsome hook sai)
Trong thực tế, nhiều website gặp các vấn đề như:
- Flatsome ghi đè favicon riêng
- header.php bị chỉnh sửa sai
- hook
wp_head()hoạt động không ổn định
👉 Khi đó, bạn nên ép WordPress render favicon core một cách chủ động.
Code ép favicon WordPress Core (không custom)
Chèn trực tiếp vào <head> của header.php:
1 2 3 4 5 | <?php if ( function_exists('has_site_icon') && has_site_icon() ) { wp_site_icon(); } ?> |
✔ Đây là hàm core của WordPress
✔ Không phụ thuộc theme
✔ Khách đổi Site Icon → favicon đổi ngay
✔ Không hard-code link icon
4. Vị trí gắn chuẩn trong header.php (rất quan trọng)
Cấu trúc đúng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <?php if ( function_exists('has_site_icon') && has_site_icon() ) { wp_site_icon(); } ?> <?php wp_head(); ?> </head> |
⚠️ Lưu ý:
- KHÔNG đặt sau
</head> - KHÔNG đặt trong body
- KHÔNG thêm link favicon thủ công song song
5. Vì sao không nên hard-code favicon?
Rất nhiều website đang dùng kiểu:
1 | <link rel="icon" href="uploads/favicon.png"> |
Cách này gây ra nhiều rủi ro:
❌ Khách đổi icon nhưng favicon không đổi
❌ Sai môi trường khi migrate domain
❌ Cache trình duyệt khó xử lý
❌ Không đầy đủ icon cho mobile
❌ Không chuẩn SEO & UX
👉 Giải pháp đúng là chỉ dùng Site Icon của WordPress Core.
6. Lỗi favicon thường gặp trên Flatsome và cách xử lý
Flatsome thường:
- Có favicon riêng trong theme option
- Ghi đè Site Icon của WordPress
- Render favicon không theo chuẩn Core
Cách xử lý dứt điểm (child theme)
Thêm vào functions.php của child theme:
1 2 3 4 | add_action('after_setup_theme', function () { remove_action('wp_head', 'flatsome_site_favicon'); }, 20); |
Sau đó dùng Site Icon mặc định + wp_site_icon() như hướng dẫn trên.
Kết luận
✔ Sử dụng Site Icon mặc định của WordPress Core là giải pháp bền vững nhất
✔ Không phụ thuộc Flatsome hay theme khác
✔ Khách chỉ cần đổi icon trong admin
✔ Favicon tự cập nhật, chuẩn SEO, chuẩn UX
✔ An toàn khi update WordPress & theme
Nếu bạn muốn mình kiểm tra trực tiếp file header.php hiện tại hoặc lọc toàn bộ favicon thừa đang bị Flatsome ghi đè, cứ gửi code — mình xử lý gọn cho bạn.
Xem thêm: Thay đổi giao diện trang quản trị WordPress bằng CSS
Theo dỗi tên trên Fanpage và Youtube của mình nhé.
2 
0
