Setting the Favicon Transcript

So we have talked about the difference between pages and posts and setting up some of the information on your site, but I left out one aspect that I touched on deliberately because it is small, very small, but extremely significant – the favicon or site icon. Basically the favicon is probably going to be the smallest asset on your site, depending on the uses for it, it will be between 16 x 16 px and 72 x 72 px, but you really should keep it square for best results. I know what you are thinking – big deal if I have a favicon or not. Well if you don’t have a favicon, your page tab will look like this. Not the end of the world, but I bet if you are like most Internet users, you probably have seven tabs open. If your viewers are trying to find your page, imagine the frustration when they are looking and can’t find the tab easily. But it doesn’t stop there, because the icon actually lends credibility and brand recognition to your site which is important. Remember that people also save your site in their bookmarks which increases the site visits. All that from a tiny image.

So let’s talk about setting up the favicon shall we? I have already gone into a vector-based drawing software and created my logo. I have then resized it so that it is 32 x 32 px and saved it as a transparent background png file. By doing this, I have set the image up for a great deal of success making it a favicon. To do this, I typically use an online favicon creator such as favicon-generator.org. As you can see the application requires you to upload a variety of difference choices and I used png so let’s click the choose file button. Here you simply need to find your image and click open. The file is now ready to be converted into either a 16×16 favicon or multiple options of the image. I always select the multiple options to give me the most flexibility. Always make sure that your check box is selected to maintain the dimensions and we click create favicon. So it is that easy, the file is created and now simply download the generated favicon option. You go to your download folder open the zipped file and here are all of the file sizes ready to be installed on our site.

Going forward I will be showing you how to make changes to both a paid and free site as you know paid sites offer more flexibility in terms of theme options and plugin installation. So, for ease, I have set-up a custom URL and hosting and have installed WordPress as a staring point.

This next step is going to be a bit of a refresher from a previous video in one sense as I have cleared the site information so you can see how to install the favicon. Let’s look at the free service assuming that you have logged in already. If you haven’t, to login to your free hosting from WordPress, simply go to wordpress.com and login to your account. But if you are trying to do this for your paid site, the steps are identical here, so follow along by logging in. The login process is different for paid sites where you login by going to your custom domain then the forward slash, wp hyphen admin. This will take you to the login credential screen where you enter the information and you are off!

Remember this screen? This is your dashboard and control panel. I have done a video on this already, so I won’t focus on what each section does at this point. But to install the favicon, click appearance tab and then customize. This gives you different choices on how to make this site yours. For now, let’s click the site identity. This screen get’s you to enter in four pieces of information, the site logo, site title, the tagline and the site icon. If you remember from a previous video, the site title and the tagline appear in several spots in your site, the most predominant being in the tab of your browser window just beside what will be your favicon. So let’s fill in these sections now. OK, we are going to skip past the logo for now as I will be doing a video on logo deployment shortly. If you look at the bottom area, you see the section for site icon. It suggests that you use an image 512 x 512px but for our purposes, the favicon that we have created will be more than sufficient. So click the select site icon button and it takes you to the media library. As you move forward, all of the images that you will use will be stored here so let’s get something in it. Click the select file button and find the favicon and select it. We will also be doing a video on images shortly that will explain these areas in more detail, but for now, the alt text is a field that helps visually impaired visitors navigate and understand the contents of your site. This should be descriptive so that the visitor knows what is happening. The caption box and description are completely optional, but they really give you an additional opportunity to explain more involved photos. I know what you are thinking and yes, this is a good spot to include keywords as long as they relate to the image for SEO purposes. So I am going to type in the alt description and since the icon is straight forward, I will leave the description and caption fields blank. Good! Now simply click the select button. Here you will be given an option to crop the image and simply click crop when you are satisfied with the cropping. Then the last step is to click the publish button and voila, your favicon is installed and you should see it appear in the tab of your browser. If it doesn’t appear immediately give it some time and it should appear.

As you saw, we skipped past the logo option but I will be talking about it in a future video and installing it so stay tuned for this!