-
campaignagents
what is the best way to create different favicons for different pages in my website?
-
Fernando
Hello there,
first off, Favicons are heavily cached by browsers so the following may not work immediately.
You would need to:
1. Remove the Favicon from the Customizer > Site Identity
2. Create a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
Add the following code to the hook text area. And add your FULL URL to your current favicon image.
<link rel="icon" href="https://domainname.com/uploads/2020/10/10/favicon-32x32.png" />
Set the Hook to
wp_head
Set the Display Rule > Location to Entire Site
Set the Display Rule > Exclusion to the page you want a different icon for.3. Repeat step 2 but this time add the page-specific icon you want, and set just its display rules to the page you want.
-
campaignagents
Thank you Fernando. Is there a reason why I wouldn’t just:
Set the Display Rule > Page
Set the Display Rule > select the specific page
??Because that works even better.
Also 2 quick questions:
1) what is the difference between the “site icon” area f the customizer panel that specifies a min of 512px x 512px and a favicon that usually 16 x 16 or 32 x 32 ??
2) Will the icon that is displayed in the browser tab always be the “add to homescreen” icon image on phones? Or can they be two different images?
Thank you
-
Fernando
You’ll need to create other instances of this Hook Element for other pages you want to change the Favicon onto.
This Hook Element is set to the entire site to ensure you have a Favicon for all pages.
1. The Site Icon is the Site logo in the Header. The Favicon is the one in the browser tab. Example:https://share.getcloudapp.com/2NupRYKl
2. It’s the Favicon. I’m not sure if there’s a way to change this. This is out of our scope. It would be good to ask this question in the WordPress forums: https://wordpress.org/support/forum/wp-advanced/
- You must be logged in to reply to this topic.