• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How Do I Add a Site-Icon?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › How Do I Add a Site-Icon?

This topic is: resolved

Tagged: site-icon

  • This topic has 10 replies, 5 voices, and was last updated 7 years, 11 months ago by ethangreys.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 11, 2015 at 10:57 am #155871
    zharriet
    Member

    How Do I Add a Site-Icon?

    I only found one unanswered topic on this question relating to a conflict with using the JetPack Site Icon.

    But I don't use Jet Pack and that won't work with Genesis.

    I want to add a Site-Icon to my website so when people bookmark on mobile devices, it doesn't show my blurry favicon because it's been resized.

    There has to be a simple solution. I have a 200x200px png of the favicon we use.

    Is it as simple as replacing that graphic for the 16x16 favicon?

    Can't find any plug-ins, or much help (that's not overcomplicated) when I search on the web.

    Your help is greatly appreciated.

    http://www.lampposthomeschool.com
    June 11, 2015 at 7:17 pm #155914
    coralseait
    Member

    If you follow this you'll have various favicon, ico and tiles that the various devices will then attempt to select the best tile for either favicon, shortcut, etc.

    http://www.coralseait.com/changing-the-genesis-framework-favicon-a-better-way/


    Coral Sea IT

    June 12, 2015 at 6:01 am #155972
    babol
    Member

    i have the same problem

    June 12, 2015 at 10:13 am #155982
    MoodyRiviera
    Member

    I'm not the OP, but thanks so much for this excellent information.

    *MoodyRiviera*

    June 12, 2015 at 1:50 pm #156006
    zharriet
    Member

    Thank you, Coralseait! I'm trying this right now.

    June 12, 2015 at 2:40 pm #156013
    zharriet
    Member

    coralseait:
    I followed the instructions in the post, but all I see is a white square instead of the G for the favicon.
    I also saved it on my Android and again a white square.

    I uploaded each of the generated files in the root--individually not in a file.

    I substituted the generated code in your php code. (Well, the first time, I forgot to delete the < ?php part ugh.

    Does it matter where I insert the php code in the functions.php file? Does it go at the end?

    It's at this website:
    http://www.emwof.org

    Thanks,
    Harriet

    June 12, 2015 at 9:36 pm #156046
    coralseait
    Member

    Howdy @zharriet,

    When you generate the favicons, you often have to set appropriate background settings for the mobile tiles; if you don't a background white is the default, depending on your source png you may need to select transparency or solid. Just depends on your source image. I may update the blog post to reflect that info, but the combination of source png and mobile tile settings is quite diverse so I left that to user interpretation.

    The code can go anywhere in functions.php; you can also use the tester on the generator tool to make sure things come out ok.

    For that site you linked, on iOS the tile is working well and on Chrome OSX your favicon is also working well, so you probably have good settings there. Just need to check Android's. It could be a cache problem, browsers are notorious for being very finicky about how and how long they cache favicons - on your mobiles you may need to clear the devices' browser caches for testing.

    Cheers!


    Coral Sea IT

    June 12, 2015 at 9:42 pm #156049
    coralseait
    Member

    Also, just to be clear, the tool expects that they'll be in the WordPress root; sometimes on hosting this is different than the web root / html root. Although for the emwof.org site they are in the correct location from what I see.


    Coral Sea IT

    June 17, 2015 at 12:57 pm #156551
    zharriet
    Member

    Thank you, @coralseait

    It was the cache.

    It looks awesome. Your method is excellent.
    Harriet

    I also added to a new site I'm working on.
    http://www.LampPostPublishing.com/

    June 17, 2015 at 6:06 pm #156602
    coralseait
    Member

    Oh great @zharriet, glad it worked out well for you!


    Coral Sea IT

    June 17, 2015 at 7:49 pm #156609
    ethangreys
    Member

    My website can not upload the logo image for it. http://magento-quiz.magestore.com/ . I have tried your solution but nothing work 🙁

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘How Do I Add a Site-Icon?’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble