Mom Behind the Curtain

every mom wants to be an all-powerful wizard

Install a Favicon on WordPress tutorial (2012 and other themes)

This post may contain text and image affiliate links. You pay the same price, but I may receive a small commissions for purchases through those links.

by

You may want to know how to install a favicon on your WordPress blog, so that when you apply for Rich Pins on Pinterest your blog name will have the little icon next to it. Or you might just want it so that your website has a nice little icon in a browser tab. I was waiting to install a favicon until I managed to do my complete redesign. But I wanted to go ahead and apply for Pinterest Rich Pins, so I decided to make a “quick” temporary favicon and install it on my WordPress website. (Maybe my tutorial will help it be quicker for you!) I’m currently running the Twenty-twelve theme, but since I used a plugin to generate and install the favicon, this should work for most other themes as well.

How to Install a Favicon on WordPress

Tutorial for how to design a quick favicon logo for your website and install it on your WordPress blog for Pinterest Rich Pins.1. From How to Add a Favicon to Your Blog Design By Blog Design For Dummies, by Melissa Culbertson of BlogClarity.com, I found out that I need a square image. Also, since I don’t want to touch my code right now, I need to use a plug-in to install the favicon.

2. I made a square image 125 pixels x 125 pixels. Well actually, first I made one that was too small. But I found that for the favicon generator I found, I needed one at least 70 pixels x 70 pixels. 260×260 would have been ideal. See, I’m saving you time! So if you have an option, make your image 260×260.

3. If you have an image or icon associate with your blog that will resize well to a tiny size (not much detail), then you can resize it and use that. (If you’re new to image editing, here’s a tutorial that will get you started using the free on-line photo editor Pixlr and another that will show you how to resize an image using Pixlr.)

ES favicon blue glow on white 125x1254. For a quick hack, I just used some initials that matched my temporary blog banner. I ended up with the 125×125 size, because this was as big as I could go with the font I chose. To make the image, I used pixlr.com. (Here’s a tutorial that will get you started on how to make an image with text in Pixlr.)

5. If you want to have the image for use in other places on your website, on your WordPress dashboard go to Media>Add New. Upload your favicon image. (I couldn’t tell that this made a difference as to how the favicon worked.)

6. Then to install your favicon on your WordPress site, from your WordPress dashboard choose Plugins>Add New and searched for “favicon.” The plug-ins I’d seen recommended hadn’t been updated in years, so I chose Favicon by RealFaviconGenerator, which had 60K downloads and had been updated very recently. Find it and click “Install Now.”

7. From the plugin dashboard, click “Activate.”

8. On your WordPress dashboard you now have the option to navigate to Appearance>Favicon.

9. If you uploaded your favicon image to your Wordress site, click on “Select from Media Library” and click on your favicon image. Then click “Generate favicon.”

10. If you didn’t upload your image, go straight to “Generate Favicon.” Click on “select favicon picture” and browse to the image you made for your favicon. Click “Generate favicon.”

11. If your favicon is smaller than 260×260 it will let you know it’s not ideal. Click “Continue with this picture.”

12. Make any adjustments for the different types of favicons if you want to. It looks like you have the option to use different images for devices that use different size images. I didn’t do this since it’s just supposed to be a quick placeholder.

13. Click “Generate your favicons and HTML code.”

14. Your favicon should now be installed! It took mine awhile to show up. While I was waiting, I regenerated the icon about three times. So I’m not sure if I did something wrong the first time (I don’t think I changed anything), or there was just a delay. 🙂 But according to this instruction sheet on RealFaviconGenerator.net, it should be automatic.

15. For information on getting my WordPress blog set up for rich pins on Pinterest, I went to Set Up Pinterest Article Rich Pins with Yoast SEO Plugin to get me started and make sure I had my Yoast SEO settings correct.

16. Then I went to the Pinterest Rich Pins Validator and applied to validate one of my recent posts. (The first time I tried to do it, I did it before I uploaded my favicon. I had to use another post to get my favicon to show up on Pinterest for rich pin validation.)

So now I wait and see! I hear it can take anywhere from 24 hours, to 2 weeks, or more. I wonder if they see that I have a tutorial on getting Rich Pins validated it will go any faster…. :). Maybe I should have applied for Rich Pins with this post!