Thêm Favicon cho WordPress ở chế độ tối và sáng

Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt, giúp người dùng dễ dàng nhận diện website của bạn. Với xu hướng thiết kế hiện đại, việc có các phiên bản Favicon khác nhau cho chế độ tối và sáng sẽ tạo trải nghiệm nhất quán cho người dùng.

Bạn cần có hai Favicon cho cả chế độ sáng và chế độ tối, bạn có thể sao chép các biểu tượng này vào thư mục gốc của trang web WordPress hoặc tải trực tiếp lên Media đều được.

Trong ví dụ của chúng tôi, các biểu tượng là: favicon-black.png và favicon-white.png

Sau đó, bạn có thể sao chép mã sau đây và dán vào cuối file functions.php trong theme con hoặc có thể sử dụng plugin Snippets cũng được

function vutruso_add_dynamic_favicon() {
    // Lấy đường dẫn tới thư mục theme
    $theme_directory = get_template_directory_uri();

    // Favicon cho chế độ SÁNG (light mode)
    $favicon_light = $theme_directory . '/wp-content/themes/vutruso/assets/images/favicon-black.png';
    // Favicon cho chế độ tối (dark mode)
    $favicon_dark = $theme_directory . '/wp-content/themes/vutruso/assets/images/favicon-white.png';

    echo '<link rel="icon" href="' . esc_url($favicon_light) . '" type="image/png" media="(prefers-color-scheme: light)">';
    echo '<link rel="icon" href="' . esc_url($favicon_dark) . '" type="image/png" media="(prefers-color-scheme: dark)">';
}

// Thêm vào wp_head
add_action('wp_head', 'vutruso_add_dynamic_favicon');

– Khi người dùng đang ở chế độ sáng (light mode), trình duyệt sẽ sử dụng favicon-black.png
– Khi người dùng đang ở chế độ tối (dark mode), trình duyệt sẽ sử dụng favicon-white.png
– Trình duyệt tự động phát hiện thay đổi
– CSS media query được kích hoạt ngay lập tức
– Favicon thích hợp sẽ được áp dụng tự động
– Không cần JavaScript
– Không cần reload trang

Đây là cách tiếp cận đơn giản nhất mà bạn có thể áp dụng Favicon trên chế độ tối và sáng khi sử dụng CMS WordPress