Do your site a favicon.

A favicon or “favorite icon” is the little image that you see to the left of a website’s URL in your browser’s address bar as well as next to your list of bookmarks or favorites. If you are using tabbed browsing they appear on tabs too. They get around quite a bit don’t they.

Favicons clearly identify a site as being yours – unless you are using a hosted platform and are using their default icon. For example a blogspot.com default icon clearly identifies the blog as being blogspot’s. blogspot favicon. However much you style your template to make it look individual, without changing the favicon icon it is not totally recognizable as yours.

It is quite simple to change this situation (unless you are using a wordpress.com hosted blog which does not yet support this).

The first step is to create or download an icon. Take some time to study favicon icons on other sites to get some idea of what appeals to you. As they are tiny images only simple images work well. Icons are image files which have the extension .ico. Favicon icons need to be 16px x 16px in size and have the filename ‘favicon.ico’.

How do you create them?

The simplest method I have come across is an online utility myfavatar .

myfavatar favicon

Upload an image and myfavatar will resize it, convert it to icon format and provide you with the code that you need to place in your template/theme. You can then leave your icon to toddle off and do some social-networking for you on their site.

If you are feeling artistic you could create an image from scratch using:.

  • IconArt – an icon editing and drawing tool, that allows you to create new icons , edit existing ones or to import an image (or part of it) and convert it to an icon.
  • Any image or photo editing program you are comfortable using, such as Photoshop or the free Gimp. Even the built in Windows program ‘Paint’ is good enough to create these simple images.

If you need a little help or inspiration:

  • Iconfinder – the icon search engine – you didn’t think I made the images for this post did you :-)
  • A Google Search for “Free Icons”

Once you are happy with the look of your image convert it to ico format using myfavatar or one of these methods.

  • FavIcon from Pics is an online utility which will resize and convert an existing image stored on your computer. Upload your image, press “create FavIcon.ico” and the image will be reduced in size, converted to .ico format and emailed to you. You will need to change the name of this file to “favicon.ico”.

To do the conversion to .ico format yourself you can download free programs..

  •   Irfanview an image editor / viewer / converter / optimizer / scanner interface/slideshow creator…. (I use Irfanview as my default image browser and for quick image editing jobs – I like it a lot).
  • Imagicon – will convert .bmp .jpg and .png files into icon format.
  • The Photoshop Ico file format plugin if you want to use Photoshop.

Now that you, hopefully, know how to create your image I am going to make you wait until tomorrow to show you how to add it to your template/theme. This was not intentional – it is getting late and, tired after a hot day, sleep is calling me. If you are unfamiliar with icons then you have probably had enough for today in any case.

Sueblimely signature

RSS feed

18 Comments

2007-11-26 15:57:13

Kramer auto Pingback[...] Your page is on StumbleUpon [...]

(Comments wont nest below this level)
 
2007-11-27 14:21:29

Kramer auto Pingback[...] Do your site a favicon. | Blogging Sueblimely [...]

(Comments wont nest below this level)
 
2008-03-04 05:57:10

[...] Do your site a Favicon [...]

(Comments wont nest below this level)
 
2008-07-06 09:43:13

The online editors make creating a fav icon so much easier. It’s worth doing as it makes your site standard out in old fashion browser bookmarks. I have found that firefox finds my favicon, but explorer doesn’t. I guess Explorer not doing what it’s told is nothing new!

Simons last blog post..Free Terminator Vector Image

(Comments wont nest below this level)
 
2008-08-06 03:35:06

I knew I was forgetting something on my blog – forgot the Favicon! Thanks for the tips and the reminder.

(Comments wont nest below this level)
 
Comment by Acai Berry
2008-09-03 16:04:36

Great information! Thanks for writing this. It is an honor to participate in the discussion.

(Comments wont nest below this level)
 
2008-11-26 12:18:53

I remember years ago making a favicon was not an easy thing – now there so many options!

(Comments wont nest below this level)
 
2008-12-03 18:08:24

favicons are a great way to make a site more memorable (and also the bookmarks). Some sites even manage animated favicons – haven’t learned this trick yet… Ideas anyone?

and p.s. funny that this site has no favicon :mrgreen:

(Comments wont nest below this level)
 
Comment by Minnesota Attorney
2008-12-04 05:52:55

Marius, for tools and tutorials to make an animated favicon, check out the links here: http://www.google.com/search?q=animated+favicon. :)

Minnesota Attorneys last blog post..Minnesota DWI DUI Drunk Driving Attorney

(Comments wont nest below this level)
 
2009-06-16 05:15:13

It’s cool. but I’m not interested to change my favicon.

Belajar SEO Para Pemulas last blog post..Belajar SEO kepada Google

(Comments wont nest below this level)
 
Comment by Holiday discounts
2009-07-28 01:10:26

It sounds great, but I don’t use favicons for my site. I might do next time.

(Comments wont nest below this level)
 
Comment by Used Tires
2009-07-28 02:19:02

I really should create a favicon for my website, they are fun to look at for sure!

Till then,

Jean

(Comments wont nest below this level)
 
Comment by tomasab
2009-09-05 06:17:02

Hey!
I know another interesting program to edit/create/extract icons – IcoFX.

It’s very good and it’s free, you should mention it.

Thankyou for the post!

(Comments wont nest below this level)
 
2009-10-04 18:40:41

I’have been changed my favicon by your great tutorial..thanks a lot :D
.-= belajar seo blogspot´s last blog ..Microsoft umumkan kerjasama dengan Yahoo! Jadi Microhoo! =-.

(Comments wont nest below this level)
 
Comment by mktanny
2009-10-30 10:10:06

Moved from blogspot to wordpress and then was searchinhg for a way to add favcon to my blog then got here thnx.
How To Add Favicon To Your Blogspot Blog

(Comments wont nest below this level)
 
Comment by lynnscott
2009-11-06 18:04:03

Good Post….I love seeing the Favicon the creation and the imagination of the designers..are at its best…as one of your other post say it is free…to use…Thanks…

(Comments wont nest below this level)
 
Comment by aks
2009-12-10 07:10:13

Great suggestions and examples, especially for a newbie like myself who lacks a natural sense of web design.

(Comments wont nest below this level)
 
Comment by jack skellington
2009-12-21 18:47:07

Nice post about favicon. I like your blog very much because it has very interesting articles of different topics like testking 220-602, testking 642-566 and testking 650-621 and their tips and tricks. I am a very big googler and search on different topics. Between searching i found your nice blog. Thanks for your this great blog.

(Comments wont nest below this level)
 

Sorry, the comment form is closed at this time.

WordPress | Based on The SandboxPrivacy and Terms