BLOGGING 101: How to Create and Install a Favicon

 

::WHAT IS A FAVICON?::

Some of you may be asking, “What in the world is a favicon?”

I can give you the technical definition from Dictionary.com:

favicon: an icon associate with a particular website or web page and displayed when that site is bookmarked; also called favorites icon

 

Got it?  No?  Maybe it would be easier to just show you:

A favicon is the little image to the left of a url in the browser window.  Favicons also show up with urls in website bookmarks and favorites, which makes those urls easily identifiable.  Having a favicon makes your blog or website more credible and unique.

If you have not set up a custom favicon on your site yet, your favicon probably looks like the following example, or has a “B” icon if you are using the Blogger platform:

I was inspired to create this lesson because many blogs I have visited in the past lack a favicon, which is unfortunate,  There are several online tutorials on installing favicons, but I wanted to simplify the process and share what I have done to set up my own favicons.  All of the steps will work for both Blogger and WordPress platforms, unless otherwise stated.

So, ready to get started?

 

::CREATING YOUR FAVICON IMAGE FILE::

The first step, and possibly the most difficult step, is choosing an image for your favicon. Your image will be resized to 16 x 16 pixels, so keep that mind when choosing.  It is also preferable that you use an image that is square in shape to avoid any distorting.  If you are having trouble coming up with image ideas, turn to your logo or branding for inspiration.  To get an idea of what your finished product will look like, resize images to 16 x 16 pixels in a photo editor.  It’s okay to experiment with several images in this process-I did!

The second step is saving your image file. When you have selected an image, save it as a .gif, .jpg, .png, or .bmp file and make sure it is no larger than 150 KB. NOTE: If you are using a transparent background, it is important that you save your image as a .gif or .png file only.  You do not need to resize your image to 16 x 16 pixels before saving, this will be done automatically in the next step.

The third step is creating an .ico file from your saved image. You must now take your saved image file and convert it into an .ico file.  Luckily, there are nifty websites out there that do all of the converting for you!  The most user-friendly site I have found is Dynamic Drive located at www.tools.dynamicdrive.com/favicon, so I would recommend using that one.  Simply browse and select your image file, then click “create icon”.  You’ll get a nice preview of your favicon in the window below, and if you’re not happy with it, try another image.  When you’re happy with your final selection, click “Download FavIcon” and your favicon will be automatically resized and saved to your computer.

NOTE: You can also create .ico files directly in Adobe Photoshop, but you must be Photoshop savvy.  The .ico files will be higher quality compared to using online conversions.  Visit this link for instructions.

 

::UPLOADING YOUR FAVICON FILE TO A WEB HOST::

In order for the world to see your amazing favicon, you must upload your favicon file to a web host.  In other words, your favicon must be uploaded online.  There is a catch, though.  Not all hosts allow .ico files.  If you experience this problem with your host, try a free web hosting service like Bravenet.com (I use this to host my favicons), which is .ico friendly.

ADDED LATER: Many readers (many Blogger users) were getting hung up on this step, so I decided to add step-by-step details on how to upload your .ico using Bravenet, which is free and easy to use.

Instructions for setting up a Bravenet account and uploading a favicon to Bravenet:

1. visit Bravenet.com and click on “get hosting” to the right
2. click “get bravehost”
3. select the FREE signup to the left
4. fill out the form, making sure you enter a valid email account and agree to the terms at the bottom
5. at this point, you still start receiving offers (this is why the service is free), so make sure you skip them all, unless you’re interested in any of them
6. after you pass all of the offers, click “continue to member’s area”
7. you will then be prompted to validate your account by checking your email, and if you cannot find the message in your inbox, try checking your spam folder (especially if you are using a gmail address)
8. after validating your account, continue on to the member’s area
9. click on the “websites” tab above
10. click “get bravehost” to the left (yes, you can have this before, but repeat)
11. select the FREE signup to the left (like before)
12. click “build a new website”
13. click “use a sub domain”
14. you will need to enter a sub domain name, which can be anything (I use momspark)
15. click on “file manager”
16. click “upload file”, then browse for your favicon icon .ico file
17. when you’ve selected your .ico file, click “upload”
18. after uploading, you should see your file, click on it
19. when you click on your uploaded file, you should see your favicon image and the url of that image in your browser
20.  copy the url in the browser of your favicon, because you’ll need it for the next step (you can paste into notepad or textedit for now)
21. if you return to, or need to use Bravenet later, just look for the “websites” section, and click on your website you created.  from there you can go to “file manager” to upload or remove files

For all other web host users:

Once you upload your .ico file to a web host, click on your favicon url and copy it-you’ll need it for the next step (you can paste into notepad or textedit for now).  To double-check the accuracy of your favicon url, paste it into your web browser.  You should see your little creation, and nothing else, on the web page.

 

::INSERTING YOUR FAVICON INTO A WORDPRESS BLOG::

If you have a WordPress platform, you’re in luck because this step is easy!  All you need to do is install the Shockingly Simple Favicon plugin, which you can find by searching in the “add new” section of your WordPress Plugins admin section.  Once installed, you will see the plugin under your “settings” section and can then follow the instructions to add your favicon url.  Easy as pie!

The Admin Favicon plugin is also great for displaying your favicon in the admin section of WordPress.

 

::INSERTING YOUR FAVICON INTO A BLOGGER BLOG::

Installing your favicon into your Blogger blog isn’t as easy peasy as installing into WordPress, but it’s still pretty simple. It does involve adding some code into your html template, but nothing major.  It is important that you follow the steps exactly.

1. Go to the “Layout” section of Blogger and click “Edit HTML”.

2. Search for the following closing:

</head>

3. Insert the following code RIGHT BEFORE the </head>:

<link href=”YOUR-FAVICON-URL rel=’shortcut icon’/>

<link href="YOUR-FAVICON-URL" rel='icon'/>

 

You will need to replace both of the “YOUR-FAVICON-URL” sections with your own favicon url.  NOTE: If you do not paste this code right before the </head>, it will not work properly.

4. Preview your blog.  If it is working correctly, click “save”.  If there is an error, try again.

::YOU DID IT!::

So it’s official-you have a favicon!  You are now awesome.

Have questions?  Leave a comment and I’ll be happy to help.  In addition, if you have any tips and tricks, or if you would like to show us your new favicon, please share with us in a comment!

Want to see more from our Blogging 101 series?  Click here to see more!

Have an idea for a future Blogging 101?  Please email us at momspark@gmail.com.

[ad#large-rectangle-adsense]

If you enjoyed this post, follow us on Facebook for more goodness.

   Pin It

Amy Bellgardt

AMY BELLGARDT is a wife and mom of two boys, as well as founder and lead blogger at Mom Spark. Amy also manages Mom Spark Media, a social media marketing firm.

sign up for young living essential oils

58 Responses to “BLOGGING 101: How to Create and Install a Favicon”

  1. #
    Elizabeth — April 8, 2010 at 6:35 am

    not to sound like an idiot but how do you upload your favicon file to a web host? I have gotten to that point in the instructions but am stuck there. I have no idea what that means or how to do it. I clicked over to bravenet (like you suggested) but am not sure what to do there. Thanks!

    [Reply]

    • Mom Spark replied: — April 8th, 2010 @ 9:22 am

      @Elizabeth, Did you sign up for Bravenet’s free web hosting? I think I will add step-by-step instructions on how to upload your image file to this post. Thank you for pointing it out. Stay tuned for an update.

      [Reply]

  2. #
    Meg — April 8, 2010 at 10:22 am

    note: step one under the “added later” the get hosting button is on the right not the left!

    [Reply]

    • Mom Spark replied: — April 8th, 2010 @ 10:31 am

      @Meg, OMG, that was only up for a second and you saw it? I changed it right away! lol

      [Reply]

      • Meg replied: — April 8th, 2010 @ 10:37 am

        @Mom Spark, and another question… after step 8 I clicked on the website tab and it took me back to the start where I have to sign up all over again.

        • Mom Spark replied: — April 8th, 2010 @ 10:42 am

          @Meg, Let me go through the steps and see what I’m missing…

        • Mom Spark replied: — April 8th, 2010 @ 11:02 am

          @Meg, Okay, Meg, I added two steps that should help, start at step #9 and keep me posted.

  3. #
    Meg — April 8, 2010 at 11:40 am

    I got it working! Check out my fancy favicon thanks to Mom Spark: http://www.thoughtsnstuff.com/

    [Reply]

    • Amy replied: — April 8th, 2010 @ 6:02 pm

      @Meg, It looks great! Awesome job!

      [Reply]

  4. #
    ali — April 8, 2010 at 12:23 pm

    Thanks for posting this! I thought I would give my blog a much needed makeover this weekend and this info is great!

    [Reply]

    • Amy replied: — April 8th, 2010 @ 6:01 pm

      @ali, It’s my pleasure!

      [Reply]

  5. #
    Craftymomof3 — April 8, 2010 at 5:55 pm

    Thanks for that! As soon as I am done making dinner I am going to install it. Looking forward to more tutorials. :)

    [Reply]

    • Amy replied: — April 8th, 2010 @ 6:01 pm

      @Craftymomof3, You are so welcome! Let me know if you need help with anything.

      [Reply]

  6. #
    CraftyMomof3 — April 8, 2010 at 10:25 pm

    It works great! Thanks.

    Check it out:

    http://www.craftylife.net/

    [Reply]

    • Mom Spark replied: — April 10th, 2010 @ 12:31 am

      @CraftyMomof3, Great job! Looks awesome!

      [Reply]

      • Craftymomof3 replied: — April 10th, 2010 @ 12:45 am

        @Mom Spark, Thanks! Now I just have to figure out the author box thing and clean up my site. LOL :)

  7. #
    Jenny — April 9, 2010 at 2:12 pm

    I have one on my site and I lurve it muchly :D

    [Reply]

    • Amy replied: — April 9th, 2010 @ 2:13 pm

      @Jenny, Did you just add it? Awesome!

      [Reply]

      • Jenny replied: — April 9th, 2010 @ 2:14 pm

        @Amy, nah I put it up when I put my current design. I figured I needed a kind of… brand ;) HAHA

        • Amy replied: — April 9th, 2010 @ 2:16 pm

          @Jenny, I like the design of your blog!

        • Jenny replied: — April 9th, 2010 @ 2:21 pm

          @Amy, Thanks :D

  8. #
    Sky — April 9, 2010 at 2:24 pm

    Girl, I could just KISS you! That was so easy. Thanks for spelling it out there for the not-so-tech-savvy people like me.

    I love it! And it’s something I could easily change when I get a wild hair.

    Thanks again!

    [Reply]

    • Amy replied: — April 9th, 2010 @ 2:30 pm

      @Sky, It looks so good!! Congrats!

      [Reply]

  9. #
    Tehlia — April 9, 2010 at 11:02 pm

    I was wondering what those were called and why some people had them and others didn’t. Thanks for the info I am definitely doing it.

    [Reply]

  10. #
    Allie — April 9, 2010 at 11:44 pm

    OMG you just made my year. I have tried to do this for ages and get frustrated half way through and walk away. I love you!!

    [Reply]

    • Mom Spark replied: — April 10th, 2010 @ 12:21 am

      @Allie, My pleasure! Let me know if you need any help or if you get stuck.

      [Reply]

  11. #
    Fire Wife Katie — April 10, 2010 at 12:03 am

    Just a quick note — the following code for transferring to blogger reads:

    It should read with double ” marks instead, as:

    Other than that, easy peasy! Thanks so much! :D

    [Reply]

  12. #
    Fire Wife Katie — April 10, 2010 at 12:05 am

    Well, that post didn’t work out right, but basically, the ‘ marks need to be replaced with ” marks. :)

    [Reply]

    • Mom Spark replied: — April 10th, 2010 @ 12:18 am

      @Fire Wife Katie, Thank you for letting me know, I will change it right away! I’m so happy I have you gals to keep my act together! (and to test it with Blogger)

      [Reply]

  13. #
    Ann — April 11, 2010 at 10:26 pm

    Finished all the steps, but can’t locate the , within the coding on blogger :(

    [Reply]

    • Mom Spark replied: — April 11th, 2010 @ 10:41 pm

      @Ann, You can’t find the ? Keep looking, it’s in there. :)

      [Reply]

      • Mom Spark replied: — April 11th, 2010 @ 10:41 pm

        @Mom Spark, The code doesn’t appear in this comment, just so you know, I was referring to the /head tag.

        • Ann replied: — April 11th, 2010 @ 10:53 pm

          @Mom Spark, I found it, but it still would not work :( I’m afraid of messing up my blog. I’ll ask my web designer. Very clear steps. Thanks again. I know blogger can be tricky.

    • Mom Spark replied: — April 11th, 2010 @ 10:59 pm

      @Ann, Keep me posted, Ann. It has to be in the right spot or it won’t work.

      [Reply]

  14. #
    Coma Girl — April 15, 2010 at 9:03 pm

    Hey Amy, I’m just stuck on how to upload it to my site (blogger). I’ve created and downloaded the .ico file, but that’s as far as I’ve gotten.

    Thanks for your help and for stopping by my site :)

    [Reply]

    • Mom Spark replied: — April 16th, 2010 @ 10:17 am

      @Coma Girl, Have you uploading it to a web host yet? If not, go through the Bravenet steps above.

      [Reply]

  15. #
    Rachel Tiller — April 16, 2010 at 11:24 am

    I cant get it to work on blogger either. I get this error.
    We were unable to preview your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.

    [Reply]

    • Mom Spark replied: — April 16th, 2010 @ 11:33 am

      @Rachel Tiller, It sounds like you are putting the code in the wrong place. Blogger is very particular. It must be placed right before that /head tag.

      [Reply]

  16. #
    Milcah — April 19, 2010 at 9:49 pm

    I was fighting with this very thing on the very day that you posted this with my blog. I’m so glad you posted this. It easily let me know which step I was missing and I have it up now. blogneighbors.com. Thanks :)

    [Reply]

    • Mom Spark replied: — April 19th, 2010 @ 9:51 pm

      @Milcah, That is awesome!! So glad it is working for you.

      [Reply]

  17. #
    Coma Girl — April 19, 2010 at 10:50 pm

    I did it! Thanks so much for your help!

    [Reply]

  18. #
    pammy pam — April 26, 2010 at 2:44 pm

    i wish i had had this tutorial before i spent a month working on my favicon!
    thanks !!

    [Reply]

  19. #
    Ashley — May 1, 2010 at 11:54 am

    Thanks for sharing this tutorial! I was able to install my favicon to match my new blog look! :) I used webs.com, as I had other files stored there for my blog.

    [Reply]

  20. #
    Kristy@MyPetSavings.com — May 3, 2010 at 2:25 am

    Thank you so much for this, I now have a cute icon thanks to your super simple tutorial! :)

    [Reply]

  21. #
    Michelle — May 3, 2010 at 1:07 pm

    Wow! Thanks so much for this tutorial. I’ve been wanting to do this and now I have. It worked like a charm for me. Thanks again! Peace. :)

    [Reply]

  22. #
    Jennifer — October 9, 2010 at 8:46 pm

    I am still having trouble loading it into WordPress. After a favicon is created, how do you upload to your website?

    [Reply]

  23. #
    Kandace — April 8, 2011 at 9:39 am

    Thank you so much for the tip! I’m new to blogging, stumbled upon your site, and love the helpful information you share! Thanks to you, I got my favicon activated!

    [Reply]

  24. #
    Skye Diaz — July 23, 2011 at 11:50 pm

    THANKS FOR THIS! It worked in the Safari browser, but not working on the IE9 browser, any clue? It’s awesome that you can post something a year (or years) ago and still help people!

    Thanks again! really appreciate it.

    Skye

    [Reply]

  25. #
    Skye Diaz — July 24, 2011 at 12:20 am

    Man, just learned how to change my avatar! DOH!!

    [Reply]

Trackbacks/Pingbacks

  1. Pingback: uberVU - social comments

  2. Pingback: Saturday Sharing | 1stopmom

  3. Pingback: Blogging 101 Series : Bloggin' Mamas Cruise

  4. Pingback: A Bit of Personalization for Your Blog (thanks to @MomSpark!) | Blog Neighbors

Leave a Comment