• 818-758-4076
  • office@legit.com
  • 3146 Koontz Lane, California
Let's Connect

How to Easily Create a Favicon

Have you ever wondered how in the world fellow bloggers get those cute little pictures to appear by their url?  Well, most of them have paid the blog whisperer to do it for them!  Someday when I grow up I hope to do the same, but for now my no-money-self designs her own blog with the help of graphics on Scrapblog.com.

You don’t have to speak geek in order to mess with your own blog.  You don’t have to use a pre-made template, and most everything you could ever want to know is simply a google search away!  Don’t be scared to mess with your design, margins, layout, sidebars, background, header, and favicon.  It is easier than you think.

So today I am going to teach you how to make your own favicon.  There are several ways to do this, but I am going to show you the easiest!

1.  Click on the link favicon.ico.  This site allows you to draw or upload a photo to use as your favicon.

Go ahead and register for an account.  It’s free and all they ask you for is a user name, email, and password.
2.  I simply drew the letters a-z to use as my favicon.  But for the purpose of this tutorial, let’s say you wanted to use one of your photos, or an image.  Pick a photo of a single object on a neutral background.  You can use a photo of yourself, but I would recommend cropping the photo closely around your face before uploading.  Click on “Import Image” and upload your photo.
Here I have uploaded a pic of a red barn star.  It looks a bit blurry in the big zoom box, but if you look below it will show you under the “Preview” box what it will look like on your url bar.
3.  If you want to alter the image, you can do so by adding or subtracting colors by using the “color picker” options on the right.  
4.  Once you are happy with your favicon, click on “Publish under an open license” under the Preview Box.  Name your favicon and hit “OK”.

5.  Now comes the scary part!  Have no fear! You CAN do this!  Copy the code under the second box where it says “Add this HTML snipped between the …”

6. Go to your blog’s Dashboard and click on Design, and then click on the small tab that says “Edit HTML”.

7.  Now click on “Expand HTML”.  You are now headed into the bowels of your blog.  Ew, that’s gross.  Try again… You are lifting the hood on your blog and you will have no fear!  You can see below that I have “checked” the Expand Widget Templates box on the right and I’m ready to enter my code!

8.  Scroll down until you see the word “Footer” and then start looking for b:skin and head .  Enter that copied code after the word head. (For some reason my first “head” is missing here but it still works.)

***Edited to add: Some of you are having difficulty finding where to insert the code.  On my computer it looks like the pic below.  The red arrow is pointing to the b:skin word.  Right after that it should say “head” and then you insert your code.***

9.  Now, do NOT hit save!!!  Always PREVIEW your work first.  If something goofy happened, just hit “Clear Edits” or just close your page out.  No harm will have been done unless you saved your changes. So please remember to NOT save until you are sure you did it right!  Below you can see that my code was entered correctly and my little red barn star is showing in my preview.  If I am pleased, I can then click Save Template and I’m done!

***Edited (again) to add:  Some browsers do not support favicons.  If you go through all the motions and your little favi isn’t showing up, try using Google Chrome or Safari before giving up!***

There is a tiny learning curve to messing with HTML, and I am a major novice at it.  But I have managed to create a decent design on my blog, make columns for my sponsors, generate buttons, and add a favicon all for FREE.  I think if you can’t afford a designer right now, it is great to know that you can decorate your blog all by yourself.

Happy Faviconing!

p.s. Don’t forget about the Chalkboard Paint Linky Party Tomorrow!!!!  I’m so excited to be inspired by your old and new chalkboardy creations!

Share this:

Comments

  2. Actually, I would much rather know how much you would charge to draw and html-out a nice header? I love your style and think you'd do a great job!

  3. How much would you charge to draw and make one?? I too am on a tight budget, but I would love something more personal than the blogspot template.

  4. Hmmm…mess with my blog…I REALLY want to. Maybe sometime today I will overcome the fear! 🙂
    Thanks for posting this!

  5. Thank you for this!!!

    I can't tell you how many failed attempts I have made trying to add one of those little icons.

    Thank you, thank you, thank you!

  7. Thanks for the tutorial. I'm gonna give it a try. I hope I don't crash and burn.

  8. Great tutorial, Beth! I just might get some gumption and try this on my own. 🙂

  9. Muuuuuuuch better! Thanks so much for adding that extra info for the HTML-ly (yep…thats a word now) challenged!

  10. yeah! I just got mine to work! I have always wanted one of these but never know what to call it to even search how to do it. Thanks.

  11. yeah! I just got mine to work! I have always wanted one of these but never know what to call it to even search how to do it. Thanks.

  12. this tutorial is exactly what i need, very basic and complete with pictures…but i can't find where to insert it! gah! i found footer, it appears i should put it between head and body? or skin and head? you said you don't have the first head…i think i give up!

  13. Very easy up until you explain where to put it. So much mumbo jumbo in the HTML lingo that I can't find where you're talking. Please help!

  14. I am supposed to have a favicon. I made it when I did my big blog redo. Since then it has mysteriously disappeared. I am going to try again your way, hope it will stay with me forever now.
    I am working on the chalkboard post. I just hope my paint is drying fast enough. I might have to get up at 5 to get it ready in time. But all for you, my friend, all for you!

  15. Woot! It worked! Thanks for the tutorial. I've been meaning to add a favicon to my blog for a long time and your post made it easy-peasy.

    gibbs5.com

  16. Is it wrong that I can identify every one of those websites just by their 16 pixel favicon?

  17. You're awesome!! I, too, have no blog whisperer – just little 'ol me – and I've been slowly making changes. *SCARY*
    I'll work on the favicon today perhaps! Thanks for taking this computer dork by the hand and spoon feeding me : ) cross your fingers & wish me luck!!

  18. Hi Beth~ ~ ~I can see that your mind is just whirling with great ideas. That chandy is si cute. Now the messing with HTML is amazing I have got to try this. I always knew you were geneus!
    ~ ~Ahrisha~ ~

  20. ummm hi, how awesome are you! I'm so going to try this out, now just to think what icon I want hmmm

  21. You have made it look a bit easier. Thanks for taking the time to post this, Beth! Enjoy your week!

    xoxo
    Jane

Shop