How Do I Add a Site-Icon?

[zharriet]

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

[coralseait]

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

[babol]

i have the same problem

[MoodyRiviera]

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

*MoodyRiviera*

[zharriet]

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

[zharriet]

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

[coralseait]

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

[coralseait]

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

[zharriet]

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/

[coralseait]

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

---

Coral Sea IT

[ethangreys]

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