Last updated on December 7th, 2016 at 08:30 pm
Do you have a custom favicon? You know that little image that appears in the tab of your browser that’s unique to a website. Here’s how to make and install a favicon on a WordPress blog.
It’s Tech Tuesday—if you’re not a blogger, feel free to pass it on by! Or give it a read to learn all of our deep, dark blogging secrets.
Let’s talk favicons. A favicon is the little icon that appears in your browser tab. Mine is a pair of scissors — you probably see it in your browser tab. It also shows up if you have Pinterest’s Rich Pins installed:
Here are a few other favicon examples:
Sugar and Soul uses a watercolor heart, which mimics the watercolors in her logo. Hey There, Home has the mod chair icon throughout her branding. The Kitchn‘s logo has the yellow circles, and the suitcase from Kids are a Trip is used throughout her website. A favicon is a nice way to extend the branding of your website (and to get rid of the default favicon that has nothing to do with your blog!).
Want to make one for your WordPress blog? It’s easy!
Design a Favicon
First, you need to design a favicon to use. You can do this by creating an image in Photoshop, Illustrator, PicMonkey, Canva, or any other image software. WordPress recommends your favicon image be 512 pixels square, even though the final image is only 16 pixels square. WordPress will shrink it for you.
You want something simple that matches your brand. You might take a portion of your logo. You may choose the shape of the icons on your blog. Make sure to use your brand’s colors, too. I chose the scissors out of my logo:
You can then export your image as a PNG with a transparent background or a JPG. If you use a PNG with a transparent background, you will get an image like Sugar and Soul’s above. Just the heart, and the background color of the tab. If you use the JPG, you’ll get a white box, like The Kitchn’s yellow circles. It depends on your preference and the colors you use — either one will work!
Create a Favicon
In your WordPress dashboard, click Appearance and then Customize.
Then click on the “Site Identity” tab. In this section, you can not only change your site’s title and tagline, you can also upload a favicon.
Click Select Image and choose your exported image. Click Insert and voila! You’re done! You may need to clear your history and cache to get it to show up.
Easy, and so much better than the generic hosting icon that appears if you don’t have a favicon installed.
[wpp range=daily header=”TODAY’S TOP TEN POSTS” limit=ten order_by=views stats_comments=0 wpp_start=<ol> stats_views=1 wpp_end=</ol>]