How to Add a Custom Favicon to Your WordPress Website

show more Adding a custom favicon provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress 3: Building Child Themes show less
please wait ...

Adding a custom favicon

Once you have a child theme you can be proud of, you need to put on the last finishing touches. These seem trivial and less important, but they make all the difference in the long run. One such finishing touch is a custom favicon. A favicon is the little icon you see at the top of your browser when you visit the site and it also appears next to your site name should someone decide to bookmark it. Favicons are easy to create and easy to install. You just have to remember to do it. To see what a favicon is, you'll notice that when I'm on this Red 30 blog site I have a little page up here in the corner in my browser.

But if I go to a different site, like for example, this site for Western Front, you'll see that their logo is also mimicked up here, and that's their favicon, so that's what I want to create. I already have a graphic here. It's called favicon.png and it's a PNG file transparent and it's the one I want to use as my favicon. But I can't just use a PNG as my favicon, I have to transform it into an icon file first. I can do that online through many different services.

A service I like a lot is one called xiconeditor. This service allows me to upload an image and then create a favicon based on it. So I'm going to go in here, click Import to upload the file. I'll upload my file, scale it up so that the application understands what I want to do, and then I can choose what sizes I want. I can choose all four sizes, you see them here or I can uncheck either one of these. I'm just going to leave them all on.

I'll click OK and the application now creates a favicon for me. I can preview the favicon if I want to and here you can see what it would end up looking like in my browser and also on other places, and if I'm satisfied with it I'll click Export. Now I have a favicon.ico file downloaded onto my computer and I can show it in my folder. What I want to do is move this file into my child theme--so I'll go and find my child theme--and just place the file inside my child theme.

Now that I have the favicon in my child theme I need to call it from my theme. Now I'm going to do that in the header. So I'll open header.php for my child theme, then I'll go up here in the very beginning right under head and I'll type in the code to create a favicon. It starts link and then relation="shortcut icon" and then you have to put in the href; this is the link directly to the favicon. Now because I don't know what the URL is going to be for this site, instead of putting in the actual URL, I'm going to put in a function that gets the URL.

So I'll say php echo get_stylesheet_directory_uri and then I'll finish it by saying /favicon.ico. What's happening here is I'm asking WordPress to print out the directory to my child theme and then we're just appending favicon.ico at the end of it. When I save this and reload my site in my browser, you see that my favicon now appears up here in the corner, which is exactly what I want.

It doesn't seem like much until you go to a different site. If you're at a different site you can now see the icon up here and it's far more eye-catching than that little page that was there previously, which is why it matters. Adding a favicon is one of those small things that make a huge difference. This is something people nearly always forget and it's something that is very easy to do, so make it part of your habit and always add your favicons.

Adding a custom favicon
Video duration: 3m 58s 3h 11m Intermediate Updated Nov 27, 2012


Adding a custom favicon provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress 3: Building Child Themes

please wait ...