Biểu tượng yêu thích cho WordPress

WordPress xử lý việc chèn favicon một cách tự nhiên thông qua tính năng Biểu tượng Trang web, được giới thiệu trong WordPress 4.3. Khi bạn tải hình ảnh lên trong Customizer, WordPress sẽ tự động cắt hình ảnh đó, tạo các biến thể nhỏ hơn và chèn các thẻ `<link rel='icon'>` và `<link rel='apple-touch-icon'>` chính xác trên mỗi trang. Không cần thay đổi plugin hoặc mã cho phần lớn các trang web.

Để truy cập cài đặt Biểu tượng Trang web, hãy đăng nhập vào bảng điều khiển quản trị viên XXH5XX của bạn và điều hướng đến Giao diện > Tùy chỉnh. Ở thanh bên trái, nhấp vào Nhận dạng trang web. Bạn sẽ thấy trường tải lên Biểu tượng Trang web ở gần cuối bảng điều khiển. Nhấp vào Chọn hình ảnh, tải biểu tượng của bạn lên, cắt biểu tượng nếu được nhắc và nhấp vào Xuất bản. Biểu tượng yêu thích của bạn sẽ hiển thị ngay lập tức trong lần tải trang tiếp theo.

WordPress yêu cầu kích thước hình ảnh tối thiểu là 512×512 pixel cho Biểu tượng trang web. Tải lên PNG hình vuông ở độ phân giải đó hoặc lớn hơn — WordPress sẽ tự động tạo các biến thể nhỏ hơn (16×16, 32×32, 180×180) từ nguồn. Đừng bao giờ tải lên một hình ảnh nhỏ và mong đợi WordPress nâng cấp nó; kết quả sẽ là biểu tượng mờ trong tab trình duyệt.

PNG là định dạng được đề xuất để tải lên favicon WordPress. Nền tảng này cũng hỗ trợ JPEG và GIF, nhưng JPEG không hỗ trợ độ trong suốt và GIF cung cấp khả năng nén kém cho logo ảnh. PNG nền trong suốt đảm bảo biểu tượng của bạn trông gọn gàng so với mọi chủ đề trình duyệt, bao gồm cả các thanh tab chế độ tối.

Nếu chủ đề của bạn sử dụng trình chỉnh sửa trang Gutenberg (Chỉnh sửa toàn bộ trang web), đường dẫn Biểu tượng trang web có thể hơi khác một chút. Xem trong Giao diện > Trình chỉnh sửa > Kiểu hoặc sử dụng cài đặt khối logo của trang web. Một số chủ đề khối cũng hiển thị trường favicon trong bảng Cài đặt chung. Hàm WordPress cơ bản giống nhau — chỉ có đường dẫn giao diện người dùng quản trị viên thay đổi.

Để kiểm soát nâng cao — ví dụ: cung cấp một biểu tượng yêu thích khác trên thư mục con của cửa hàng so với blog — bạn có thể ghi đè URL Biểu tượng Trang web theo chương trình. Thêm phần này vào functions.php của chủ đề của bạn hoặc plugin dành riêng cho trang web: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`. Điều này bỏ qua hoàn toàn XXH1XX và cho phép bạn phân phối bất kỳ biểu tượng nào từ bất kỳ URL nào.

Một số plugin tạo trang (Elementor, Divi, Beaver Builder) thêm cài đặt favicon của riêng chúng có thể xung đột với WordPress Customizer. Kiểm tra bảng cài đặt trang web của trình tạo trang của bạn và xóa mọi ghi đè favicon ở đó, sau đó đặt lại thông qua WordPress Customizer gốc. Việc có hai thẻ favicon cạnh tranh trên cùng một trang có thể tạo ra kết quả không nhất quán trên các trình duyệt.

Việc cài đặt nhiều trang WordPress yêu cầu mỗi trang con phải có Bộ Biểu tượng Trang web riêng. Cài đặt quản trị mạng không xếp tầng vào các trang con. Nếu bạn muốn có một favicon được chia sẻ trên toàn bộ mạng, hãy sử dụng phương pháp lọc theo chương trình và nối vào URL biểu tượng trang web ở cấp mạng bằng cách sử dụng plugin phải sử dụng (mu-plugins).

Các plugin lưu vào bộ nhớ đệm như WP Rocket, W3 Total Cache hoặc LiteSpeed Cache có thể trì hoãn việc cập nhật favicon. Sau khi thay đổi Biểu tượng trang web của bạn, hãy xóa tất cả các lớp bộ đệm: bộ đệm đối tượng XXH5XX, bộ đệm trang, bộ đệm CDN và bộ đệm trình duyệt của bạn. Nếu biểu tượng cũ vẫn còn, hãy thêm `?v=2` vào liên kết favicon theo cách thủ công trong HTML hoặc đợi TTL bộ đệm hết hạn.

Để kiểm tra xem WordPress có xuất ra đúng thẻ favicon hay không, hãy nhấp chuột phải vào trang web của bạn trong trình duyệt, chọn Xem nguồn trang và tìm kiếm `rel='icon'`. Bạn sẽ thấy cả mục favicon.ico và mục apple-touch-icon trỏ đến hình ảnh đã tải lên của bạn. Nếu thiếu một trong hai, chủ đề của bạn có thể ghi đè `wp_head()` — đảm bảo `<?php wp_head(); ?>` được gọi trong header.php của chủ đề.

Các plugin WordPress SEO của bên thứ ba như Yoast SEO và Rank Math bao gồm siêu dữ liệu lược đồ và mạng xã hội của riêng chúng nhưng không can thiệp vào Biểu tượng trang web. Tuy nhiên, nếu bạn đã cài đặt plugin dành riêng cho favicon nhiều năm trước trước khi WordPress thêm hỗ trợ gốc thì plugin đó hiện có thể xung đột. Vô hiệu hóa mọi plugin favicon cũ trước khi sử dụng tùy chọn Customizer tích hợp sẵn.

Đối với các trang web được lưu trữ trên WordPress.com (ngược lại với WordPress.org tự lưu trữ), đường dẫn favicon nằm trong Trang web của tôi > Cài đặt > Chung > Biểu tượng trang web. Các bước gần giống với quy trình Customizer tự lưu trữ nhưng việc chỉnh sửa chủ đề và plugin bị hạn chế tùy thuộc vào gói của bạn. Tải lên 512×512 PNG và lưu — WordPress.com xử lý tất cả việc thay đổi kích thước và chèn thẻ.

Sau khi đặt biểu tượng yêu thích của bạn, hãy xác minh rằng nó hoạt động chính xác bằng favicon tester bằng cách nhập URL trang web của bạn. Điều này xác nhận biểu tượng có thể truy cập công khai và xuất hiện ở đường dẫn dự kiến. Ngoài ra, hãy kiểm tra best favicon size để biết WordPress tạo ra độ phân giải nào và liệu bạn có cần thêm bất kỳ độ phân giải nào theo cách thủ công để được hỗ trợ XXH1XX hay không.