skip to Main Content

I have the following favicon setup in header.php:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri()." /assets/build/favicon/apple-touch-icon.png "; ?>">
  <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-32x32.png "; ?>">
  <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-16x16.png "; ?>">
  <link rel="manifest" href="<?php echo get_template_directory_uri()." /assets/build/favicon/site.webmanifest "; ?>">
  <link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <?php wp_head(); ?>
</head>

I have all the favicon files stored in assets/build/favicon.

On / or parent pages, my favicon appears. But on custom post types or child pages, my favicon doesn’t show up.

The file paths are correct (otherwise they wouldn’t show on the parent pages also).

Why doesn’t it work on custom post type pages or child pages?

index.php

get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; ?>

<?php get_footer();

archive-knowledge.php:

<?php get_header(); ?>

<body class="knowledgeListing">
  <?php get_template_part('templates/parts/knowledge/level-one/listing'); ?>
  <?php get_footer(); ?>
</body>

3

Answers


  1. I do not know why, but sometimes Chrome does not display the favicon, like other browsers. Try to add favicon.ico in your header file, like you did with the others:

    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    

    and place your favicon.ico file in the root directory. Thus, if the browsers does not recognize/get the favicon for some reason, they will take the default favicon.ico in your root folder. So that all browsers will find the icon eventually

    Login or Signup to reply.
  2. As I am checking the main issue with your href URL, you can use like this:

    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-57x57.png">
      <link rel="apple-touch-icon" sizes="60x60" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-60x60.png">
      <link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-72x72.png">
      <link rel="apple-touch-icon" sizes="76x76" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-76x76.png">
      <link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-114x114.png">
      <link rel="apple-touch-icon" sizes="120x120" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-120x120.png">
      <link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-144x144.png">
      <link rel="apple-touch-icon" sizes="152x152" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-152x152.png">
      <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-180x180.png">
      <link rel="icon" type="image/png" sizes="192x192" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/android-icon-192x192.png">
      <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="96x96" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-96x96.png">
      <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-16x16.png">
      <link rel="manifest" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/manifest.json">
      <meta name="msapplication-TileColor" content="#ffffff">
      <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri();?>/assets/build/favicon/ms-icon-144x144.png">
      <meta name="theme-color" content="#ffffff">
      <?php wp_head(); ?>
    </head>
    

    If you follow this type of structure, all browsers/devices will support it.

    You can also generate an online favicon from:
    https://www.favicon-generator.org/

    Login or Signup to reply.
  3. Your isue is closing php tags at wrong place, wp should not show them in any part of te site.

    See this is the url in your head which is php tags closed in wrong place "; ?>"

    <link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
    

    Correct url should be like this :

    <link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/safari-pinned-tab.svg" color="#5bbad5">
    

    I correctede other urls given in your question

    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-16x16.png">
      <link rel="manifest" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/site.webmanifest">
      <link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/safari-pinned-tab.svg" color="#5bbad5">
      <meta name="msapplication-TileColor" content="#da532c">
      <meta name="theme-color" content="#ffffff">
      <?php wp_head(); ?>
    </head>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search