October | 2007 | Dish on Design Gal

How hard can it be to add an favicon to your website? Pretty darn hard, actually! What I thought would be a simple hour or so project turned out to be a day into the night painfully long process. I discovered that every instructional article that I found through google searches either spoke in a geek speak terminology I didn’t understand or they left out a key component or two (kind of like grandma’s secret recipes!) that left me really frustrated!

Because I love to network , I’m breaking it down to simple stupid, so that if you want to add a favicon to your site, you will be spared the grief and frustration I experienced when attempting to learn how to do it.

In a nutshell, here is everything you need to know about favicons from a totally self taught female entrepreneur 🙂 You will need a little photoshop & microsoft publisher knowledge to create the actual image.

THE ANSWERS TO SOME BASIC QUESTIONS…

What is an Favicon? It’s that cute little picture that represents you or your company – for example, if you look at the address bar right now for wordpress you’ll see a black and white W inside of a circle. That’s the Avatar for WordPress. Mine looks like this…

you can see it at http://www.assistantproductgroup.com/ as well.

I can’t see a little picture – why not? Apparently, from what I’ve read, it’s because you might be using an older version of explorer. I have to say I initially fought the switch to explorer 7.0, but absolutely love the features now that I have it. Totally, recommend getting it.

Why do I need a favicon? Well, really you don’t, but everyone else has them, they’re cute, and “experts” say it makes your site look more professional. Consider it the little black dress for computers.

STEP by STEP Instructions for posting a Favicon to your Website

Select an image that you want to use for your favicon. Make it 1-2 colors and simple. It also needs to be square. Because it is so small – simple with a punch works best.

Here is how I created my favicon:

I inserted a text box into publisher, kept it square & made the back ground white.
I inserted another text box, typed an “a” in bold, chose a clear background and made the font red. I then placed the “a” on top of the white text box and centered it.
Grouping the two boxes, I right clicked and saved them to my pictures as a jpeg.
I then opened photoshop, opened the jpeg and cropped the picture so that it was still square and had minimal white showing around the edges. I saved that to a jpeg.
I opened that jpeg and in photoshop resized the jpeg to 16 pixels by 16 pixels and saved that.

Technology Newsflash: You now must convert the jpeg to an ICO. Truly, I didn’t know ICO’s existed until this point. An ICO is simply a file format. There are pictures in jpegs, gif, tiff, eps, and who knew…ICO. By the way ICO is short for Icon.

Next you must convert your latest jpeg to an ICO. I used a program called Irfan View
I downloaded a free Irfan View plug in for my photoshop to do this, but there is a free download for infran at http://www.download.com/IrfanView/3000-2192-10021962.html?part=dl-IrfanView&subj=dl&tag=button which is probably easiest.
Once downloaded, convert your favicon to an ICO and name it favicon. When converted to an ICO file it will be called favicon.ico. It MUST be called exactly this to work.
Save (import) this file into your image file on the root directory of your website.
go to your home page in HTML (the view that shows all the text and codes for that page) and below <head> (towards the top of the page) cut and paste this text exactly:

Here is my HTML before I pasted in the link above:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html><head> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>

<title>Decorating Organizer for decorating, building or remodeling a home</title>

Here it is with the link pasted below <head>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html><head> <LINK REL=”SHORTCUT ICON” href=”images/favicon.ico” mce_href=”images/favicon.ico”> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>

<title>Decorating Organizer for decorating, building or remodeling a home</title>

Make sure that it pastes exactly as you copy it – mine changed when I pasted it and I had to correct it.
Check your preview to make sure that it isn’t showing up anywhere on the website home page anywhere, which would mean that something is wrong. If it is showing up on the page, check to make sure placed it in under the first <head> and not elsewhere. Sometimes you have to experiment till it’s right. Always preview before you save!
Save page and open up internet explorer (hopefully, you have 7.0) and go the website. It may take a minute or so to show on the front page and several or more minutes f(or even several hours) or it to spread to the other pages. It should show up on the tab that it was opened in and also on the address bar. If you don’t have explorer 7.0, it will only show when you save it as a favorite. Note: I didn’t think it worked on the other pages and was just done with the whole deal and went to bed in the wee hours of the next mornng. When I woke up – voila! It was magic and had spread to all my other pages. How cool is that? I guess it takes time for explorer to generate it to the other pages.

Good Luck! Let me know if it helps or if you have any tips to share!

Advertisements

Turning an extra room into a guest bedroom is a great project to take on this fall and you’ll be ready for friends and family who visit during the holidays. We thought it would be fun to share our thoughts and inspirations that went into the development of this guest bedroom that Jayne and I designed for one of our favorite clients. Watch as it starts with a painting and grows to a room that now holds some very special memories.

Inspiration: When we saw this picture at the Z Gallery and immediately knew we had found our inspiration-we loved it and our client did too! It’s the first thing we purchased and everything else evolved from this. Inspiration can come from anything – a magazine picture, sea shells, a treasured vase, etc. Find something you love and go from there!

We purchased a bed, side table, dresser and an armoire for a TV, and went with black because it was strong enough to beautifully frame and accentuate our picture and additionally, black was a common link to the pub and theatre room nearby. Typically, a bed is the focal point of a bedroom, so we hung the picture above it and found great bedding to really tie it all together. The walls were painted a neutral medium toned mushroom color which created warmth and nicely accentuated the white painted trim on the windows and baseboards.

What we like to do when choosing bedding and accessories is to really mix up the patterns, textures and shapes. Here, using the inspiration picture as a guide, we mixed shades of copper, taupe, and winter white; accenting with a punch of rouge – to match our diva’s lips. Patterns & textures included a beaded pillow, faux fur pillows, a box channeled silk comforter with shams, crisp white sheets. We neatly folded a thin coverlet at the bottom and added a very soft animal print throw with a silk lining for warmth on wintry days. Although we loved the look and feel of the Macy’s hotel collection sheets, they didn’t fit our budget, and instead we opted to splurge just for the pillow cases, pairing them with a high thread count sheet set that we found at homegoods. We got the look and feel of a 5 star hotel, with out the price tag. You gotta love that!

Next to the bed is a lamp for reading, alarm clock and telephone. We put a bible in the drawer with a pen and note pad along with a TV guide. A friend of mine always includes a picture frame and inserts a photo of her with the family or friends that are visiting. It’s a really special touch and brings back some great memories for her and her guests. Other thoughtful items can include a pitcher of water, bucket of ice and beautiful glasses on a tray, a bottle of wine or a box of chocolates or mints next to a pillow. We also purchased a luggage rack which is stored in the closet along with wooden hangers for guests.

A chair with a footstool is nice to for guests to lay their clothes upon, quietly read or sit to put on their shoes. We adore this round mirror from Bombay which is hung with a chain, adding a new interesting shape to the space. When hanging a mirror, make sure that you check out what it will reflect – in this case, it’s across from the bed and you get a glimpse of our Diva and bedding. It was a great way to pull the color into that side of the room in a really interesting way.

For Draperies we chose a simple thin semi sheer readymade panel from JC Penny – one of our favorite ready made sources for window treatments. The fabric has thin copper stripes with threads of black running through it and we hung them on a sturdy black rod with architectural finials. It was important to get a substantial rod that aestically held it’s own with the oversized furniture. We topped our TV armoire with a fern for warmth.

What we ended up with is a room that is both beautiful and functional. In this case, our clients’ 2 daughters loved it so much, that before the oldest one went off to college, she and her little sister slept in it over much of the summer. It’s already been a source of great memories! Isn’t that what decorating is all about?

Dish on Design Gal

dishing about designing a beautiful life…

Monthly Archives: October 2007

Favicons made Simple (a technology tip for do-it-yourself website owners)

See a Guest Bedroom from Inspiration to Completion