Wednesday , 20 September 2017

How to Create a Custom Favicon for Your Blog

Autumn Butterfly

Autumn Butterfly | by: DecouDermy

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?

‘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 (or not!), 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.

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 + shift + r'.

A favicon is one of the many things included in my custom blog theme, 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! 

Related Posts Plugin for WordPress, Blogger...

11 comments

  1. I have always wanted to know how to do this…..thanks for sharing.

  2. how cool! thanks for sharing this – I was getting bummed that I don’t have my own dot com blog so I could add one, but then I saw you linked how to do it on blogger. THANK YOU! going to do it right now. :)

  3. http://robotsareawesomeshop.blogspot.com
    Used that same article to create my sometime ago, won’t display in IE (boo) and now with FF 4 looks a bit odd, but I like my wee sneaky robot.

  4. Cool info. I couldn’t get it to work, though (made it, but could load it onto Blogger)

  5. Useful information.Bookmark!

  6. Hi I added the code exactly as shown but with my url and double checked to make sure it looked the same but the blogger logo still shows up. What am I missing?

  7. Thank for sharing this. More powers to you!

  8. This was so helpful! I now have a cute little favicon for my blog! At first, it didn’t show up, but then I pressed Ctrl & Alt & Shift & R and it showed up almost immediately! thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>