Create a Favicon

So, you’ve noticed that your website still has your webhost icon in your address bar- and you’d like to change it pronto. You’ve also noticed that in your list of bookmarks or favorites there are cute little icons next to each. So how do you get one of those cute little icons for your own website or blog?

At this point you might even be thinking ‘What in the heck is she talking about?’ So I’ll rewind a bit:

What exactly is a favicon?

How to Create a Favicon | Viva la Violette

‘A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage.[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.’ -Wikipedia

You don’t have to have any special programs, just an image of what you would like your favicon to be. The best images to use are those that are not too detailed, and are square-ish in shape. Your favicon will be displayed at 16 x16 px- which is very small, so you’ll want to keep your image as simple as possible. You may want to take a look at your bookmarks and notice which icons appeal to you the most.

So grab an image and let’s get started. There are quite a few websites that create favicons at no charge, and here are a couple I recommend:

http://www.favicon.cc/ – Allows you to upload an image to convert into a favicon -OR- you can create a favicon right there on the site.  If you would like to use your own image, choose import image- and then you can preview what it will look like in the bottom center box. To create your own, simply choose colors and get creative! Once you are happy with your Favicon, select ‘Download Favicon’ under the preview and save the file. You must save it with with name favicon.ico.

http://tools.dynamicdrive.com/favicon/- Another free place to create a favicon, but this website only allows you to upload an existing image. Same thing as above, upload- preview- download. Again, you must save it with with name favicon.ico.

Ok so once you are happy with your shiny new favicon, you will need to log in to your web hosting account. You will need to upload the favicon to the root directory of your website.

*If you are using Genesis (you are, aren’t you?=), you can also download and install the Genesis Favicon Uploader plugin, and upload your favicon.

And that’s it! It should appear relatively quickly, but if you are impatient (like me!) and would like to see it immediately- reload your page data by pressing  ‘ctrl/command +  F5'.

A favicon is one of the many things included in a full design package, but I thought I’d share the knowledge for those of you who already have a snazzy website or blog (minus a favicon). I should probably note that getting a favicon to show up on blogger or wordpress.com does not work this way, since you can not access the root folder. However, you can add them by following the directions here: Blogger or WordPress.com.

Have fun!

  • http://www.everkelly.com Kelly

    Thank you so much for this tutorial! Can’t wait to give it a try.

    • http://vivalaviolette.com Violet

      Yeah! Have fun!