HomeMethod

Knowledge

Web VitalsTechniquesSnippetsAnswersImpactsBottlenecks

Add manually favicon to WordPress `head`

  • WordPress

If you want to add manually a favicon to your WordPress website’s head, you need to use the following filter: wp_head.

Here is a sample code to get the job done:

add-favicon.php
<?php
/**
 * Add Favicon to WordPress Head
 *
 * Manually injects favicon link tags into the <head>. Useful when you need
 * full control over favicon paths without relying on the Customizer's site icon
 * feature, or when serving favicons from the theme directory.
 *
 * Usage: Add to functions.php. Update the paths to match your favicon files.
 *
 * @category wordpress
 * @language php

 *
 * @author Adame Dahmani https://adame.io
 * @support Support my family project: https://adame.io/fundraiser
 */
function custom_add_favicon() {
    ?>
    <link rel="icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-180x180.png" />
    <meta name="msapplication-TileImage" content="<?php echo esc_url( get_template_directory_uri() ); ?>/path/to/favicon-270x270.png" />
    <?php
}
add_action( 'wp_head', 'custom_add_favicon' );
Support our family now