[Resolved] Missing favicon in google search

[Alessio]

Hey,

I have uploaded a svg favicon in my customizer. However, it’s not showing in google mobile search results.
The “<link rel=”shortcut icon”” is missing completely in the header. What is going wrong?

Thank you,

Alessio

[Leo]

Hi there,

I wonder if it’s a caching issue.

Can you clear and disable your caching plugin and make sure to do the same for any server/hosting level cache as well?

[Alessio]

Hi, apologies for the delayed response.

I have tried it out on a different website (details in private information) and disabled the cache/optimization plugin completely. However, the svg applying won’t work at all in the first place. Sometimes, it asks me to crop them, which fails, and sometimes, it just does nothing at all.
I have added a video link in private information.

[Leo]

The best way to for uploading the favicon is in the root directory as Tom recommended here:
https://generatepress.com/forums/topic/gpp-favicon-302-issue/#post-1644452

Maybe give that shot?

We use the same method for our site here.

[Alessio]

Hmm, will I have to also set all the other meta tags manually, to make it display the icon everywhere (for example in google search)?

Also, where is the root directory, can I use SVG icons, and how do I name it? favicon.svg?

[Leo]

Hmm, will I have to also set all the other meta tags manually, to make it display the icon everywhere (for example in google search)?

I’m not 100% sure unfortunately. As Tom mentioned, the favicon feature is handled by WordPress completely.

Maybe some articles like these would help:
https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
https://wpdeveloper.net/wordpress-directory-flie/

[Alessio]

Thank you for the links! I managed to get it to work now with some meta tags in the header. This is what I used:

add_action('wp_head', 'gen_in_head');
function gen_in_head(){
?>
<!-- SVG favicon -->
<link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="alternate icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="alternate icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#115294" />
<?php
};

I have used this generator to get these favicons: https://realfavicongenerator.net/

[Leo]

Glad to hear 🙂

[Author]

Posts