Before we go on to talk more about using Google tools for your professional business website I first want to show you how to add a Favicon here.
What is a Favicon?
The Favicon is the little icon that shows up up here. The gal I have up here on my site is the favicon for this site. We don’t have a favicon set up yet for this professional business site that we are creating.
The favicon was originally designed as bookmark icon. It was a little 16 pixel by 16 pixel image. But it has since grown to become icons for various touch devices. So not only do you need one that is 16 by 16 pixels but you also need one that is 512 by 512 pixels.
1st Create Your Icon
I’m going to show you how to do that here. It all starts off by creating one. It’s safe to say that with the Thesis theme you don’t absolutely need a favicon because you can use a PNG image instead. But we are going to go ahead and create a favicon anyway.
Import an Image into a Favicon Generator
There’s a favicon generator online called favicon.cc and that’s where we are going to go. You can obviously paint one if you want but you can also import an image. And that’s what we are going to do.
I’m going to choose a file. It’s better to choose a square image. If you choose a rectangular one then it can get distorted.
Let’s choose this picture here and open it and upload it. So that is now my 16 by 16 image. Now I can download it. Here it is right there. It came down as a favicon ico.
Add the Image to Thesis
In order to load that we come on over to our dashboard. Then come over to Thesis and go to Thesis home. And then under site go down to favicon and it says “choose a favicon”. This is my downloads folder so I’ll get the image there. And there it is. Add the image and let’s see what we end up with here.
Issues with ICO Files
Well, the problem with that is that it’s not reading the ico file. Maybe I have a restriction on this website from uploading an ico file. Let me just check here and see whether or not it got added to everything. Okay, unfortunately on this site I have a restriction against uploading ico file for the favicon.
The reason I know that you can have this happen is that I have had it happen in the past. An ico file is not strictly speaking an image file and websites often limit the types of files that your media library can upload. They essentially do it by setting the mime type or setting forbidden mime types.
The way it usually works is that instead of setting a forbidden mime type is that they restrict all file types except for certain kinds like jpeg, gif, png and that sort of thing. When the ico file isn’t actually in that list it takes a little while to solve that.
Adding a Favicon that isn’t ICO
Instead of that we have a couple of options. We could instead create a PNG image to use or we can use the new WordPress Customize to create the image. It’s another icon for apple devices and for smart phones and that sort of thing. We set that up by coming over here to Appearance and Customize.
Under site identity, we choose this and select our image. This image should be 512 x 512 and WordPress is automatically going to make a whole bunch of different sizes of it and then write the code into the head to provide for that.
All we have to do is select the file that has…this is it. And so let’s just make sure that this is the one that is 512 pixels. Yes, this is the one. We open that one up and then we select it. And then all we have to do is hit save and publish.
WordPress created the correct image size so we don’t need to do any extra stuff. All we had to do was create it here then upload the image here and it automatically created the small favicon out of that.
So now that you’ve saved it you can close it. We now have a favicon and we got it by using the Customize feature in WordPress 4.7.2.