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]