Build Your Own Business Website header image

How to Create and Add a Favicon to your Thesis Website

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 – Create the Favicon

We teach you how to create a favicon which is a special image with a .ico ending rather than the usual jpg, gif or png. This icon shows up in the browser tab next to your site name. We show you to create it using the favicon generator we like at favicon.cc. In the following video we’ll show you how to add it to your Thesis based WordPress site using the favicon uploader under the Thesis Options.

Video Transcript

But before we do that, we’re going to do something which I think is kind of fun which is we’re going to learn how to create a favicon which is this thing right here and learn how to create a favicon and then how to add to the site.

So if you look at your dashboard… pardon me. Look at my dashboard, if you look at your dashboard on your site and you look down at the Thesis menu here, you can see that it’s got this favicon uploader and that’s the way in which you can get this little favicon to show up at the top of this tab. But before we can do that, we actually have to have a favicon. And favicon is a special piece of… or it’s a special image. It’s not a traditional jpeg or png or something like that. It is a special kind of image with a .ico ending to it. And there happens to be a number of ways in which you can create them. Now you can them easily in Photoshop butyou can also just create them easily online.

So if we look at favicon generator, Google that. This one here, favicon.cc, actually is pretty cool. And you can either just start coloring you know, a favicon and using these colors to create the favicon and then selecting different colors from different places you know, until you get what you want. And actually, you can see that they show you what that favicon’s going to look like up here and down here. Or what you can do is you can import an image and they’ll create a favicon out of the image which is what I’m going to do here.

So I have an image of this gal which is you know, rapidly becoming my logo and I’m going to make her heard my favicon. So if we choose a file and in particular, I’m going to use this one right here and upload that file, you can see that it has taken that file and it’s left the blank pixels or the blank areas blank and then has extrapolated from that image what this icon probably ought to look like. I think maybe I grabbed the wrong one though. Let’s import a different one here. Choose the file… you can… well, let’s just pull in this one for just a second. You can see what happens when we get an image that’s a little bit bigger. So here she is now and I think it’s a little bit more difficult to determine that this is a person with a hard hat on and a computer. So that’s why I want to zoom in on it, go back and import an image, go back and choose my small…open it, upload it.

Okay, well anyway, there we go. There’s our gal’s head and then all we have to do is download the favicon and now we have the image.

0 Comments… add one
0 comments… add one

Leave a Comment