Monday, April 16, 2012

Blogging Tip...Add A Favicon For Blogger With No HTML Code

Have you noticed the little tiny picture some websites and blogs have next to their web or URL address? It also shows up next to the website's name in your favorites or bookmarks. That cute little picture is called a Favicon...short for Favorite Icon. It is a 16x16px image...really tiny.

If you research those little cuties, it can be very complicated (HTML Codes). There are websites that will take your gif, jpg, png, and bmp image and transform it into an ico. What does all that mean...I don't know...too many big computer words for me. I'm still learning as I go, but my goal is easy.

Until I figure it out, here's the easiest way to have a favicon next to your address.


First, you need a clear, crisp image or vector. I like the image on a white background. You can use one of your own or there are a hundred sites that have images. Some images are free (you have to give credit though) and some you have to pay a small fee. Please read all the rules for the free images on each site. These are my favorite sites below.

Free Digital Photos

Dreamstime

123rf

Here's a quick tutorial on how to do it...

If you need an image, browse through the sites above. This one is easy and free with credit give to the photographer. Free Digital Photos...I have no affiliation with them just like the ease of use.



I found this red flower as an example...


In the picture below on the right, I have circled the size (400x400), where it's free and the credit that needs to be given.


After you have saved and down loaded your picture to your computer, you need to upload it to PicMonkey. Remember I did a post on PicMonkey a while back...it's my new Picnik since they are closing.



Once uploaded to PicMonkey, you need to either "Resize" or "Crop and Resize". For me this picture was 400x400 (square) and the image was in the center, so no need to crop.


For Blogger Favicons, the image has to be 100x100 or smaller. Click "Resize" and type in 100x100 then "Apply".  Now save this image to your computer. Type in a name so you'll know which one is the resized one...like Red Flower 100 or Red Flower 16

You might want to experiment with the size you make your photo. Maybe going right to the 16x16 image would work better for the picture you have. You won't know until you add it to your blog. (that's in the steps that follow)

Here's my 100x100 image. This image is from this source.


To add that little cutie to your blog, go to the "Design" page. Click the edit button next to the Favicon section (circled below).


Click the Browse button to find where you saved you Resized image.


Once you select the image, click the save button and you're done!! You can keep going back and removing the image and adding another size again until it looks right to you.


It may take a little time for the image to show up. Some browsers may not support this either, but it's cute next to your blog name in your blogger reading list.

Hope this is easier than reconfiguring an image and then getting an HTML code which you then have to go into expand your widget section. That whole section scares me, especially when they tell you to back up your blog first!! Not for me just for a tiny picture.

Have fun with it. I've changed mine several times already...it's a button now. We'll see how long that lasts!
~Karen~

Pin It

24 comments:

  1. Cool! I have noticed those on various blogs, but didn't realize how to add it was right there in front of me. Thanks! I am already playing around with it.

    ReplyDelete
  2. Thanks Karen! I have seen those on several of the blogs and wondered how they did that! Your blog is definitely my go-to blog for blogging tips! I have sent a lot of new bloggers your way when they ask me how I did something! Now, what do I want for my favicon.....?

    ReplyDelete
  3. Thanks for sharing this Karen! Do you have a tutorial on how to add the button you have on the side of your blog that says Sew Many Ways? The one that people can take and add to their blog. I have an icon for one, but don't know how to add the code and add it to my sidebar.

    ReplyDelete
  4. OK, call me slow but I don't see your red button... where does it show up??? sorry, slow this morning. I followed your steps, THANK YOU! Now I'm not sure where to look for it :-(

    ReplyDelete
  5. Fun! It worked a treat, but I had to go to "layout," not "design" to add my favicon. Thanks for your instructions!

    ReplyDelete
  6. I've always wondered how to do that, thanks for showing us.

    ReplyDelete
  7. Karen, you are a gem to all of us bloggers who are learning as we go. I love learning from your blogging tips. Thanks for sharing!

    ReplyDelete
  8. You share the best tips and resources - thank you!

    ReplyDelete
  9. I'm slowly catching back up with my blogging, reading & writing, and just had to stop and change my favicon because of this post. Thanks for sharing this! PS you have a spam comment on this post.

    ReplyDelete
  10. Thank you so much for taking the time to explain how to do this! I was just wondering how to do this the other day. Thank you! Thank you! Thank you!

    ReplyDelete
  11. There is one thing I have been wondering also that I wondered if you could help with. How do we find those cute buttons for Facebook, Twitter, Pinterest, etc.?

    ReplyDelete
  12. Wow! In never knew this! Thanks for the lesson! Off to change mine now....

    ReplyDelete
  13. Hey,this is great! Thanks. I changed mine,but it's not showing next to my URL,does it take a few days?

    I would love to know how to add the small facebook,twitter & pinterest buttons too!

    ReplyDelete
  14. how many hours until it takes effect?

    ReplyDelete
  15. newest follower! I've been working on this for hours and then found your blog. Thanks! Hoping it will show up in a few hours. Hope you'll visit me too..
    ~betty

    ReplyDelete
  16. i still cant figure out how to do it now with the new layout

    ReplyDelete
  17. Ooo! Nice post! :) I had similar post but its pretty short one compared to this ;)

    ReplyDelete
  18. Thanks for sharing! Just a couple of things I learned: You don't have to change the image file name to .ico to get your favicon to work and it took a couple of hours for my favicon to replace the default "B" for blogger image.

    ReplyDelete
  19. Please miss, i managed to upload a favicon just the way you described. It hasn't shown up yet but I guess I should give it some time. But what I'm eager to know is how to credit the image owner? Do I rename the icon to include the link of the source or do mention somewhere within my blog? When you're at it can you please explain how to properly credit the source of any images that I post in my blog? Thanks in advance.

    p.s.

    The post seems a bit old, so I'm not sure if you'll still want to comment here. if that is the case please contact me at my email: avengedavenger2@gmail.com
    Eagerly avaiting your reply.

    ReplyDelete
  20. Thank you! This is by far the simplest explanation I've seen so far.

    ReplyDelete
  21. How Much Time It tooks to change? please help me karen

    ReplyDelete
  22. Loved this post and blogged about it here http://www.iwebu.info/2013/05/web-secret-259-lets-hear-it-for-girls.html

    ReplyDelete
  23. Well explained and written, But it will not work for some bloggers until they add a line code inside head section for favicon. Generally favicon takes time around 1-2 days to appear on blog.

    Regards,
    Divya @smtutorial

    ReplyDelete

Thanks so much for taking the time to leave a comment...I just love hearing from you!

Related Posts Plugin for WordPress, Blogger...

LinkWithin

Related Posts with Thumbnails