Tuesday Tip: How to create your own favicon.
Have you ever wanted to create a favicon for your blog? You know, this little guy:
It is actually really easy to do! You can add one to your personal, craft, or business blog.
Step 1: Design your favicon in your favorite editing program. It should be 32x32px. Save it as a jpg or png file.
*this is mine
Step 2a: After uploading your image, copy the http:// address. If you've uploaded it to your blog, click the image to go to the direct link (Just like mine is inserted above. When you click on it, it takes you to the direct link of the image.)
Step 3: Next, go to the design section of blogger, open up your EDIT HTLM
Step 4: Scroll down until you see <title>your title</title>
Step 5: Underneath that, insert this:
<link href='http://insert your source here' rel='shortcut icon' type='image/png'> </link>
Example: <link href='http://i35.photobucket.com/albums/d173/krisedde/BLOGS/favicon.png' rel='shortcut icon' type='image/png'> </link>
*note, if your image is saved as a jpg, change the part that says type='image/png' to type='image/jpg'
Step 6: Save
Tada! You have a favicon! That was easy, wasn't it?
This is my icon for our personal blog. See:
Let me know if you have any questions.
Come back next Tuesday for more Web Blogging Tips!
*this method does not work for Internet Explorer. IE has a lot of malfunctions when it comes to viewing code. I suggest using firefox or chrome.
24 comments :
wow that is sooooo cool! Thanks Im gonna have to try that out! Thanks!
Ahhh This rocks! I had to come back and comment, to let you know I did this, and it worked perfect! And that I featured you for this tut on my blog if you wanna check it out! :) http://agapelovedesigns.blogspot.com/2011/04/notice-anything-new.html
Thank you so much for sharing! :)
I saw Maria share this on her blog. Awesome! Thanks for the tip. Works great.
www.luxeboulevard.blogspot.com
I'm confused. I"m not getting it to work....could you please give an example?
where the link says 'your source here' do i just put my favicon image name? Sorry, I'm a bit thick sometimes. :)
Thanks! Tammy
I have always wanted to do that, you made it so simple! Thanks mine is up already:)
tt.scrapst, you first need to upload the picture to photobucket, flikr, or a hidden page on your blog. Once that is done, the image will have a source. mine is: http://i35.photobucket.com/albums/d173/krisedde/BLOGS/favicon.png that is what I put inside the 'marks' Did that help clear it up?
My design doesn't say "<link href='http://".
Any advice?
Hayley
Hayley, I'll send you an email to work it out.
Thank you for sharing this. Adding to my to do list for April.
Following.
Please drop by our blogwarming giveaway and enter to win six antique blue jars. www.theoldblockhouse.blogspot.com
Thanks so much!! Your directions worked perfectly.
You can check mine out at:
www.thegunnysack.com
thanks for sharing saw this on maria's blog!
It works!?!? Wow. I can't see it but I'm sooo glad it works!!!! Thank you!!! Thank you!!!! I really appreciate all of your help!! :)
Ohh this might my my job for the night to figure this out!
I came from Agape Love. Thanks so much!!! I have been revamping my blog, and I love this extra touch. I will be doing a post later this week about how I did many of the changes. I will make sure to link to you and send you a button too.
finally! after years of asking people how to do this.. you have made my life wonderful!! I never knew what this thing was called, so looking for tuts on how to change it .. didnt really work in my favor! Thanks again..
Thanks so much - just made a few but picked my favorite. The easiest tutorial I've seen. New follower!
This is great! Easy to read! I am featuring this at somedaycrafts.blogspot.com. Grab my "featured" button.
I'm a new follower. Thanks for the tip! I was just thinking about this the other day. I can't wait to try it.
Hi, I use a standard Blogger template. I tried searching on (title). The only hit I got was this:
(title><data:blog.pageTitle/)</ti tle)
Do you think it is the same thing?
Thanks for your help...
Jamie, It is the same thing. Blogger defaults that as your title. While there, go ahead and change it:
title> your blog name </title
I did it! Thanks!
Awesome! So easy and now I have a great-looking favicon. Thank you!
YAY!!! Thanks so much! :)
Internet Explorer does not recognize this html format (or several other html code). If you use IE, you will not see your favicon. I highly recommend using Firefox or Google Chrome. You'll be seeing websites from a different, better view!
Post a Comment