Favi...what? (Favicon)

As you are catching a wave on that wonderful world wide web, you might have noticed a little something extra in the URL box. Was it Santa? Maybe the Easter bunny? Nope, it is what is called a "favicon" short for "Favorites Icon"  and you will see it showing up in two places, in the URL window, and also in your bookmarks or favorites list. It is that little visual reminder that you have the right site.

Like this:

 

Here are some that you may be familiar with:

 

So, how do I get one of my very own? There are a number of ways, and I believe several software options that will allow you to create favicons which have their own file format ".ico" and are 16x16 pixels.

If you own Photoshop you can download a plug-in at Telegraphics that allows you to save a file from Photoshop to the ico format. If you don't own Photoshop, Google "Favicon" and you will be bombarded with options.

IMPORTANT: Install the plug-in before you begin.

Next, you are going to want to think about what you can include in your favicon. 16x16 pixels doesn't give you a lot of real estate to play with, so if you have a complex logo you may want to think about using just a portion of it, or if you have a graphic mark, just including that. For this site, I played with a number of options. I tried some chocolate photos that I had taken, and other configurations of letters/words, and landed on just using a simple "B."

Abide the KISS (keep it super simple) method is the best strategy. Contrast is good here, and simple shapes are best.

Lets start with your content in a 64x64 box as such:

Now, because I am using a type element, I have the option to adjust the sharpness of the type and "sharp" gave me the strongest line and letter definition. (upper right hand of image above, note the dropdown after type size) It is just going to depend on the letterform and contrast of the background. There are a couple of different options you can try including "Crisp, Strong, Smooth and Sharp." I would recommend adjusting them and then using your "control + minus" keys to reduce it to actual size to get a feel of which will show up best.

You can also place an image or your logo, but remember you may need to crop in on a portion of it so that when reduced, you can still make out what the image is.

Now, when you think you have everything in place, lets resize the image to the 16x16 final size. Here too, you have some options.

 You may need to do some experimentation to determine which will produce the sharpest image for you.

Now, you have a 16x16 pixel image, and it looks great, now what? Hang in there, we are almost done...

Save the file out as an .ico image, under the "File" menu, go to "Save As" and in the file format dropdown, you will see you have a variety of options including the "ico" format. Now, make sure the file name you are using is "favicon.ico" this is important.

If ICO does not appear in your dropdown, double check that you have downloaded the format from the link provided above and that the plug-in is located in the "file format" folder within Photoshop. 

So with 16x16 ico format file named "favicon.ico" lets go to the web. Connect to the server hosting your site and upload the file in the same directory as your home (index) page making sure that it isn't falling into any subfolder.

Now lets test it, a couple of things you need to consider is that Windows browsers may not display the icon until it is saved as a "favorite" and macs may need to have the cache cleared before it will appear.  

Here is a site that showcases a number of favicons: http://deltatangobravo.com/archives/2004/march/favourite 

Good luck and if you have a favorite site with a great icon, share it with us by clicking on the  "post a comment" button below.

Happy Faviconning!

Ode to the food stylist

If you have ever opened a food package and pondered what kind of magic or drugs the package designer was doing to make what you were holding in your hands look like what was displayed on the box, you will enjoy this site. While the design leaves something to be desired, it does deliver in content. 100 photos of food items, and the magic that a food stylist or photoshop expert has done to try to make them look good.

Check them out at: http://www.pundo3000.com/htms/1.htm 

Blog on Blogging! YouTube embed.

So, recently my friend, who shall remain nameless, posed the question....."How do you pull a youtube file into the blog. Do you know the code for it? That would make my lame little blog so much cooler." And rather than just explaining it to him, I thought I would share it with the rest of you as well.

First, locate the video you wish to embed on YouTube. 

 
You will notice off to the right and side in a gray box, there is more information about the video, who posted it, etc. At the bottom, there is a box called "Embed" followed by a some code. Copy that code and go to your blog site of choice and paste it into the content area.

 Now, I would assume that different blogging software may be a bit different, but for me, I compose my blog in WYSISYG (What you see is what you get) and by just pasting it in won't do the trick. I need to save my blog, and then change my view to HTML, paste it in and the video box will appear in the blog.

Like this:

Congratulations, you have just imbedded video from YouTube!

BONUS POINTS if you were also sharp enough to catch that "Training" is spelled wrong on the intro page to the video.