I'll go straight to the point.

For a few days I've been working on the SEO on my website and I noticed that the favicon still isn't showed by Google Search and that the <title> tag is showed wrong! See the screenshot.

About the favicon, I have it in my root folder and the tests on realfavicongenerator.net and on the Google favicon checker don't return any error.

About the title, the problem is that it's shown like "Blogsonic: Home", while it should be "Home | Blogsonic". The weird thing, as you can see on the screenshot, is that the title on the About page works fine!

Here's is how my header file looks:

<!DOCTYPE html>
    <title><?= $title; ?> | Blogsonic</title>
        if (isset($meta_description)) {
        <meta name="description" content="<?= $meta_description; ?>">
    <link rel="alternate" hreflang="it" href="<?= base_url('it'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:image" content="<?= base_url('public/img/blogsonic-social-preview.png'); ?>">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1280">
    <meta property="og:image:height" content="640">
    <link rel="apple-touch-icon" sizes="180x180" href="<?= base_url('public/icon/apple-touch-icon.png'); ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= base_url('public/icon/favicon-32x32.png'); ?>">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= base_url('public/icon/favicon-16x16.png'); ?>">
    <link rel="manifest" href="<?= base_url('public/icon/site.webmanifest'); ?>">
    <!-- <link rel="mask-icon" href="<?= base_url('public/icon/safari-pinned-tab.svg'); ?>" color="#5bbad5"> -->
    <link rel="shortcut icon" href="<?= base_url('favicon.ico'); ?>">
    <meta name="msapplication-TileColor" content="#426e9c">
    <meta name="msapplication-config" content="<?= base_url('public/icon/browserconfig.xml'); ?>">
    <meta name="theme-color" content="#ffffff">
    <script src="<?= base_url('public/jquery/jquery.min.js'); ?>"></script>
    <link rel="stylesheet" href="<?= base_url('public/css/bootstrap.min.css'); ?>"/>
    <link rel="stylesheet" href="<?= base_url('public/font-awesome-4.7.0/css/font-awesome.min.css'); ?>"/>
    <script src="<?= base_url('public/js/bootstrap.bundle.min.js'); ?>"></script>

Note: If you think that embedding PHP in HTML is bad, you should see the rest of my code... Jokes aside, I just don't care. This is literally my first web project ever and now I'm more focused on using it as a "playground" to test things.

I've also used the Google Search Console to update the pages and everything looks fine. As you can see from this screenshot the last updated date is October 2nd, 03:22 AM.

If you need me to show you other parts of my code, you can ask me here and I'll be very happy to answer you, or you can see the GitHub repository.

Can anyone help me? Thanks in advance!

Note: English is not my mother tongue. Forgive me if I've made some mistakes.


1 Answer 1


The size of your favicon must be a multiple of 48 pixels square, for example: 48 x 48 px 96 x 96 px 144 x 144 px

Don't use 16x16 size, Google will resize it automatically.

Define a favicon to show in search results

<link rel="icon" type="image/png" sizes="48x48" href="public/icon/favicon-48x48.png">
  • It already is 48 x 48 pixels: blogsonic.org/favicon.ico
    – antogno
    Oct 2, 2021 at 14:25
  • Try doing the PNG version, I don't know how long it takes Google to update the result. If it doesn't work, the icon may have been misinterpreted by Google robots.
    – RpgBoss
    Oct 2, 2021 at 14:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.