Spice up your address bar with a Favicon made in ACDSee Photo Editor

April 9th, 2007 by Connie

I don’t feel good today – so I’m here to entertain you! :)

My sister had requested that I make a favicon for our site… (Can’t sisters just be demanding?!) So my first question was WHAT! is a favicon? I didn’t ask her because as a librarian, I Google all the time (or let’s say – pretend to know things but rely on the net heavily? maybe!).

Wikipedia says – A favicon (short for “favorites icon”), also known as a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface.

And for those of us that use Firefox & LOVE our colored tabbed browsing, we see favicons all the time – we just didn’t know what they were called! I use that icon all the time when I bookmark by dragging it into the toolbar just below the address bar. Here’s a screenshot of my browser for those of you that like visuals:

favicon

Making a flavicon is VERY easy!! Now everyone has to realize that I do NOT have PS. I scrap in ACDSee Photo Editor and am quite happy with being able to get things done. And on a side note, on the weekend I made my first blinkie, but I had to have a friend animate it because I am PS challenged. I digress, sorry… (we’ll save the blinkie making instr’s for another time).

So the first thing you need to do is decide what flavor of icon you want? (I love plays on words – and doesn’t favicon just look like flavor?) It’s not very big – so it has to be simple and specific. We decided on a question mark. Then there was the color … because it needed to match with our website. So once I knew that I wanted a red question mark with a blue circle & red border it was easy. In ACDSee Photo Editor I made a 2″ square and filled that space with the circle & question mark and saved it as a png.

Now for the fun part! There’s a site that makes favicons from your image. (I saw a site where you could pay to have them made, but… we’re on low ‘no’ budget). So once you have your image, go here to FavIcon from Pics

  • browse to your image
  • click on ‘Generate Favicon’ It will show you a preview & you can test it in the browser.
  • Then if you like it, you can download it as a zip. When you unzip it there will be a Read Me file giving instructions on how to place the code in your webpages. (My sister did this. As I’ve said before, she’s the brains of this operation.)

So, if you make one, add a comment & link us to it! I want to see what flavor you choose for your favicon & how it personalizes your site!

I just found this:
Adding Custom Favicon to Your Blogger Blog

http://how2make.blogspot.com/2007/02/adding-custom-favicon-to-your-blog

My sister, the techie, adds this suggestion –
As you starting installing favicons, they might not show up right way.

In firefox, Tools | Options | Advanced Tab | Network Tab | Cache Clear Now Button.

6 People have left comments on this post

Apr 9, 2007 - 01:04:19
Connie said:

Here’s what my friend, Jane made for her favicon

http://www.thehappymoo.com/index.html

Apr 9, 2007 - 02:04:07
Monique said:

wow, that’s great info! thanks! i had always wanted to make one for our site but never knew where to start, thanks again! we’ll be adding one to our business and personal site soon…lol.

Apr 10, 2007 - 10:04:18
Jane said:

Well everyone saw it before me… but finally today my favicon showed up in IE7 on my machine! Whoo hoo!!!

Thank you Connie and Heidi for all the fabulous information you give us for free – as we’d say in England, “You’re a gem!”

Aug 16, 2008 - 07:08:57
Hans said:

Hi,
I am using
http://www.mobilefish.com/services/favicon/favicon.php to create my favicons. This site also contains other useful tools.