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

by Kira @ Her New Leaf on January 17, 2012

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!

{ 39 comments… read them below or add one }

hemborgwife January 17, 2012 at 7:15 am

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!

Reply

Our Wired Lives January 17, 2012 at 7:51 am

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?

Reply

Kira @ hernewleaf January 17, 2012 at 8:51 am

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!

Reply

Jen January 17, 2012 at 8:08 am

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!

Reply

Loribeth January 17, 2012 at 12:53 pm

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.

Reply

Kira @ hernewleaf January 17, 2012 at 6:54 pm

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!

Reply

Loribeth January 17, 2012 at 8:01 pm

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!

Reply

mycoignofvantage January 17, 2012 at 8:24 pm

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!

Reply

Cory Katherine January 19, 2012 at 11:11 pm

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?)

Reply

Grace - Love Your Healthy Life January 22, 2012 at 8:10 pm

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!

Reply

Kira @ hernewleaf January 22, 2012 at 9:47 pm

Thanks for stopping by, Grace! To make my titles, I used these tape images from Pugly Pixel (http://www.puglypixel.com/2010/04/15/free-clip-art-tape-strips/) and added the text using Photoshop. Enjoy!

Reply

Grace - Love Your Healthy Life January 23, 2012 at 7:31 am

Thank you! Pugly Pixel looks like a great resource. Now I just have to figure out how to use photoshop… : )

Reply

Sarah at The Blog Guidebook January 30, 2012 at 9:01 pm

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!

Reply

Kira @ hernewleaf February 3, 2012 at 7:17 pm

I would love to help out with “translating” to Wordpress! Feel free to contact me via email with any questions you may have. : )

Reply

Irene [BAKER/MAKER] March 5, 2012 at 4:03 pm

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

Reply

thelateandgreat March 31, 2012 at 8:04 pm

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!!!

Reply

Kira @ Her New Leaf April 1, 2012 at 12:38 am

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.)

Reply

thelateandgreat April 1, 2012 at 7:56 pm

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!

Reply

thelateandgreat March 31, 2012 at 8:10 pm

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

Reply

Aange April 7, 2012 at 12:10 pm

thank u so much for this wonderful information :) xx

Reply

ashazenzi April 24, 2012 at 7:50 am

done and done! :D thanks!

Reply

Tiffany April 25, 2012 at 1:03 pm

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

Reply

Kaitlin Jenkins May 4, 2012 at 12:57 pm

I’m using wordpress.org and self hosting with HostGator. I don’t see an option under my General tab to add this? Any ideas??

Reply

Kaitlin Jenkins May 10, 2012 at 12:56 pm

I think wordpress has gone through an update since you posted this…any idea where they moved this? I’d sure appreciate the help!

Reply

Kira @ Her New Leaf May 10, 2012 at 1:06 pm

Kaitlin, this tutorial is for Wordpress.com blogs, not self-hosted Wordpress.org blogs. To learn how to install a favicon on Wordpress.org, you can check out the information here: http://codex.wordpress.org/Creating_a_Favicon

Reply

Nickie May 15, 2012 at 6:14 pm

Omg! It worked! Thanx a bunch…Nickie

Reply

K May 21, 2012 at 10:11 am

Just an FYI, not all WordPress blogs have that option for uploading favicons. :) I’m on a self-hosted WP blog, and I use a Genesis theme, which doesn’t give the option to upload a favicon under the General settings. The easiest way to change a favicon on a Genesis theme is to install a plugin called Genesis Favicon Uploader. You have to upload an .ico file, so create my 16px X 16px favicon using my photo editing software, then upload it to http://www.favicon.cc After it generates the .ico file, I download it to my computer and then upload it via the Genesis Favicon Uploader plugin. It sounds a lot more difficult that it really is.

Reply

Kira @ Her New Leaf May 21, 2012 at 6:40 pm

K – this tutorial is for Wordpress.com blogs, not self-hosted Wordpress.org blogs. I use the Thesis theme for Wordpress and it’s built in : )

Reply

Ana July 2, 2012 at 1:06 pm

I’ve always wondered how people do that and if one should have a self-hosted blog to use it, but it’s this simple – yay!

Reply

Tina August 7, 2012 at 5:57 am

I learn so much from your blog. Thanks for giving us theses tips for blogging, I really appreciate that ! But I wonder how to add some little stars that follow after your browser, thank you !!

Reply

Patrizia Chiarenza January 3, 2013 at 6:53 pm

Thank you for this!!!!!

Reply

Sherri June 18, 2013 at 5:57 pm

Thanks for this. I am a new blogger and really appreciate when someone is willing to share the path they have already carved!
Sherri recently posted..Cat PoseMy Profile

Reply

Rebecca @ Love at First Book September 16, 2013 at 11:25 am

This doesn’t seem to exist anymore for Wordpress. Do you have any other tips on a way to add a favicon for Wordpress now? I checked out a plugin, but there are so many!

Thank you!
Rebecca @ Love at First Book recently posted..Skinny Bitch by Rory Freedman & Kim BarnouinMy Profile

Reply

Saeed Mohamed September 29, 2013 at 8:30 am

Nice Post very helpful, seems like we share the same content http://www.moneyy2maker.blogspot.com

Reply

Diane October 21, 2013 at 6:08 am

I am on wp.org. My theme is asking for a url of the favicon I created but photobucket and flickr won’t accept an ico file. I tried using a png file but the favicon doesn’t show up on the nav bar. How could such a tiny symbol be so hard to figure out ??

Reply

win mobile games March 23, 2014 at 12:14 am

Good article. I certainly appreciate this website.

Thanks!
win mobile games recently posted..win mobile gamesMy Profile

Reply

download brick mansions April 18, 2014 at 11:40 am

Undeniably believe that which you said. Your favorite reason appeared to be on the internet the
simplest thing to be aware of. I say to you, I definitely get annoyed while
people think about worries that they plainly don’t know about.
You managed to hit the nail upon the top as well as defined out the whole thing
without having side effect , people could take a signal.

Will probably be back to get more. Thanks
download brick mansions recently posted..download brick mansionsMy Profile

Reply

download neighbors April 18, 2014 at 2:43 pm

I almost never leave a response, however i did some
searching and wound up here Primp My Blog: How to Add a Favicon to
Your Blog. And I actually do have 2 questions for you if you usually do
not mind. Could it be simply me or does it give the impression like a few of these responses appear like they are coming from brain dead visitors?
:-P And, if you are writing on additional online social sites, I’d like to follow anything fresh you have to post.

Could you make a list of all of your community pages like your linkedin
profile, Facebook page or twitter feed?
download neighbors recently posted..download neighborsMy Profile

Reply

telecharger pdf creator April 21, 2014 at 3:59 am

Every weekend i used to pay a visit this web page, for the reason that i want
enjoyment, as this this web site conations really fastidious funny information too.
telecharger pdf creator recently posted..telecharger pdf creatorMy Profile

Reply

Leave a Comment

CommentLuv badge

{ 1 trackback }

Previous post:

Next post: