- This topic has 7 replies, 2 voices, and was last updated 2 years, 10 months ago by Leo.
-
AuthorPosts
-
May 1, 2021 at 6:40 am #1758938Alessio
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
May 1, 2021 at 10:43 am #1759432LeoStaffCustomer SupportHi 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?
May 11, 2021 at 7:29 am #1774477AlessioHi, 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.May 11, 2021 at 10:52 am #1774757LeoStaffCustomer SupportThe 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-1644452Maybe give that shot?
We use the same method for our site here.
May 11, 2021 at 11:14 am #1774779AlessioHmm, 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?
May 11, 2021 at 11:20 am #1774784LeoStaffCustomer SupportHmm, 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/May 13, 2021 at 5:01 am #1777203AlessioThank 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/
May 13, 2021 at 9:27 am #1778017LeoStaffCustomer SupportGlad to hear 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.