Primp My Blog: How to Add a Favicon to Your Blog

While working on my blog’s redesign, it was a (lofty) goal of mine to do all of the design work myself. Considering I am a self-taught Photoshopper, have minimal HTML experience, and little to no CSS knowledge, this was a lot to take on. I found it really difficult to find the information I was looking for out there on the big, bad internet, and the information I did find was often too technical for me to understand or poorly translated to English. But I accomplished my goal, and I love my new blog, and in the true spirit of Her New Leaf, I learned a ton of new things in the process!

I’m excited to share my knowledge with you in a new feature called Primp My Blog. I hope to present the information I find all over the internet in an easy and readable way so that someone who is brand new to blogging can utilize it. Please let me know what you hope to learn, and I will do my best to learn it myself, then share here!

Have you noticed the tiny icon that appears in your browser when you visit certain websites? That’s called a “favicon.” While adding one may seem complicated or fancy, it’s actually quite simple!

For WordPress blogs…

From your WordPress dashboard, select “Settings,” then “General.”

On the top right, you will see the “Blog Picture/Icon” box. This is where you will upload your icon.

Important: Though your favicon will only be 16 x 16 px, the image you upload must be at least 128 x 128 px (since WordPress will also use your icon in several other places around its site). Your uploaded image may be larger than 128 x 128 px, but any smaller will cause there to be black space around your icon.

Upload your image and crop as desired, click “Crop Image.”

Wait a few minutes and your favicon should appear when you navigate to your blog. If you are not seeing it, try clearing your browser’s cache and/or restarting your browser. Your new favicon should appear soon!

For Blogger blogs…

From your Blogger dashboard, click “Design,” then “Edit HTML.”

Don’t get scared! It will all be okay. Find this tag near the top of your code:

<title><data:blog.pageTitle/></title>

Create a new line of text directly below that line, and paste this tag:

<link href='URL' rel='shortcut icon'/>
<link href='URL' rel='icon'/>

Replace “URL” in each line with the URL of your favicon image.

Click “Save Template”.

Wait a few minutes and your favicon should appear when you navigate to your blog. If you are not seeing it, try clearing your browser’s cache and/or restarting your browser. Your new favicon should appear soon!

Sources used to create this tutorial: All About Basic (for WordPress) and Blogger Tricks (for Blogger).

What do you hope to learn from the Primp My Blog series? Post your ideas in the comments and I will do my best to include them in the feature!

Advertisements
This entry was posted in primp my blog, tutorial and tagged . Bookmark the permalink.

22 Responses to Primp My Blog: How to Add a Favicon to Your Blog

  1. hemborgwife says:

    That is so fun!! I really want to be good at this kind of stuff too but I am always afraid I am going to mess it up forever!

  2. Yay for more self-taught bloggers and blog designers. I am determined to keep designing and improving my blog myself as well. I can’t wait to read more about what you’ve learned! Did you move to wordpress.org or are you on wordpress.com?

    • I’m still on WordPress.com with the Custom Design upgrade. I think it’s a great “in between” option before making the jump to self-hosted. Frankly, I have fewer server issues with my blog on WordPress.com than I’ve heard people have hosted elsewhere, so for now, it works for me!

  3. Jen says:

    Thanks so much for doing this! I’m totally not that techy and just moving to wordpress.com was confusing! haha 🙂 I’m going to find this series incredibly helpful!

  4. Loribeth says:

    There’s an easier way to do a Favicon in Blogger. On the screen you indicated, right under “Add and Arrange Page Elements
    Click and drag to rearrange page elements on your blog.”
    There is a tab that says Favicon edit. Click on “edit” and it gives you an option to select a picture to upload… Easy-peasy and no need to edit the HTML! That’s how I added mine.

    • Loribeth, thanks so much for this! My “expertise” (if you could call it that) lies with WordPress and I decided at the last minute to add the Blogger tutorial as well. I’m going to edit this tonight to include your method!

      • Loribeth says:

        I’m glad I could help! I know a LOT of people will appreciate your help, because so many people are intimidated by editing HTML. I mean, I know a little bit about how to edit it, but I avoid it as much as possible!

  5. Thanks so much for posting this. I just added a favicon and I am waiting to see when it shows up. I definately don’t know these kinds of things about blogging and I really appreciate your efforts!

  6. How did I not see this before? Can’t wait for more Primp My Blog (ps you decided to do this with me in mind, didn’t you?)

  7. Hi Kira – I just found your blog and I can’t wait to read more Primp My Blog posts : ) I’m using typepad right now, but soon I’m going to make the switch back to wordpress. I was wondering how you got your sidebar section titles to be so cute and have that pretty pink background. If you could share that, I would be so grateful. Thank you!

  8. Kira,
    LOVE your new series! It will be very helpful to other newbies and inspirational to those that want to design it themselves! Please feel free to stop by The Blog Guidebook and check out all our tutorials on Blogger if you ever need help (I almost commented on the Favicon in Blogger, but then saw someone else had mentioned it already!). We’re not into WordPress yet, but just might be one day…maybe you’d be interested in writing some WP tutes for us?!
    Love your design too…super feminine and sweet…

    Have a lovely evening!
    Sarah
    http://www.blogguidebook.com – for all things bloggy!

  9. this is a great tip! thanks for including the blogger instructions. 🙂 l love your blog!

  10. thelateandgreat says:

    Kira,

    I’ve been trying to use the WordPress way of doing this, but every time I upload the picture I want to make my favicon it’s not getting the whole picture that I want, and if I resize the image that doesn’t seem to help either. Any tips? Basically the cropping lines are always maxed out- does that make sense? But it’s still not getting all of my image in the cropped box. So frustrating!!!

    • It sounds like the ratio, rather than the size of your image is what’s messing you up – since the favicon is a square, if your original image is not, you won’t be able to grab the whole thing with the crop tool. Try resizing in an image editing program, I think that will solve your problem. (Unfortunately your link didn’t work below since that image is located on your hard drive and not the internet.)

      • thelateandgreat says:

        Thanks so much for the quick reply! I was so tired when I posted that link, duh it won’t work! Lol. I’ll try resizing the image then, thanks for the help! 🙂 I have gotten a lot of great tips from your blog. Once I have mine up and running like I’d like, I’d be happy to slap your link on there!

  11. thelateandgreat says:

    I don’t know if this will help, but here’s a link to a screenshot of what I’m talking about!

    file:///C:/Documents%20and%20Settings/Owner/Desktop/L&G/favicon_problem.htm

  12. Aange says:

    thank u so much for this wonderful information 🙂 xx

  13. ashazenzi says:

    done and done! 😀 thanks!

  14. Tiffany says:

    Still waiting for it to show up. Thanks so much, these blog posts have been so helpful!

Discuss!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s