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!
{ 31 comments… read them below or add one }
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!
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!
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!
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!
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!
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!
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?)
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!
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!
Thank you! Pugly Pixel looks like a great resource. Now I just have to figure out how to use photoshop… : )
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!
I would love to help out with “translating” to Wordpress! Feel free to contact me via email with any questions you may have. : )
this is a great tip! thanks for including the blogger instructions.
l love your blog!
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.)
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!
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
thank u so much for this wonderful information
xx
done and done!
thanks!
Still waiting for it to show up. Thanks so much, these blog posts have been so helpful!
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??
I think wordpress has gone through an update since you posted this…any idea where they moved this? I’d sure appreciate the help!
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
Omg! It worked! Thanx a bunch…Nickie
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.
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 : )
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!
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 !!
Thank you for this!!!!!
{ 1 trackback }