Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

create different favicons for different pages

  • campaignagents

    what is the best way to create different favicons for different pages in my website?

  • 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

  • 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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.