Homeschool Webmasters

Just another A2Z Homeschool Blogs weblog

How to Generate and Add Favicons

Posted by Ann Zeise on June 13, 2015

Question:

I need help creating and figuring out how to place code on my WordPress blog in order for the icons to show up…

…on iPhones, iPads, Android devices, Microsoft devices, and other smart mobile devices.

Answer:

Create a square logo or other image, that will look when small or large. Start with an image that is 260 x 260 at least. It could be bigger. But it should be a simple design, because some of the favicons will be quite small. You could also do this twice with different images. Save the large, elaborate ones from one go-around, and the simple, tiny ones the next time.

Go to the site “Real Favicon Generator” and just upload your image and your domain link.

Decide where you are going to put the images. They can go at the root level, or in a root level folder directory with a name of your choice, such as “favicons.”

Follow their directions.

Exceptions: for the code in WordPress, you need to use full links: http://www.mysite.com/favicons/…. file names. So select the button that says: “My favicon files are not in the root directory of my web site.” Then put the full url where the files are going to go.

Put the links in your theme’s “child” header, or they will get lost every time you update your template.

Put the links between <head> and other code that is generated near the bottom of the header, above “wp();”

The links will look like these on my site: (I did not put the icons in a folder. I wish now I had.)

<link rel=”apple-touch-icon” sizes=”60×60″ href=”http://a2zhomeschooling.com/apple-touch-icon-60.png” />

Defining the size of the icons and which device it is for is important. As new devices come along, you can just add more links to the graphic list. I saw in one place that favicons could be generated for iWatches, but I didn’t know anyone who would try to view my site on an iWatch.

To test, go to your smart device, go to your site in your browser there, and use the little “share” icon, and select “Add to Home Screen.”

You should see the icon to the left of the link in the verification screen that pops up. Clink on “ADD” so it will be there for you to show to friends!