A couple weeks ago I was browsing around some of my favorite sites and I noticed the nifty little favicons that people were using. First off, what is a favicon? For those of you who don't already know ...
I've always wanted one of these, but whenever I tried to make one it never worked. Then I came across Toby Thain's ICO (Windows Icon) file format plug-in for Photoshop during a Google search.
Toby's ICO plug-in is an easy way to create your favicons in Photoshop (all versions including CS and CS2), Elements or Paint Shop Pro (v9 recommended). I downloaded Toby's file, which goes into the "File Formats" folder inside your Photoshop Plugins folder. Once it is there then after you design your favicon (providing you're using Photoshop) you simply use "Save As" from the file menu and choose 'ICO (Windows Icon)' from the Format drop down. This will turn your graphic into an icon (ICO) suitable for use as a favicon.
There are many ways to create favicons, but I prefer using Photoshop myself. If you don't have Photoshop then here are a few favicon making programs on the Web ...
I've always been fascinated with pixel art so I had some experience with making icons. With a favicon the graphic must be 16 x 16 pixels in size. Now you can make a favicon out of just about anything, but the key here is to choose an image that is is somewhat simple. Why, you might ask? Because at such a small size the more simple the image the better.
For my favicon naturally I chose one of my FatBirds since they are the mascots of TBODC. This is another thing you will want to consider when making a favicon for your own site. Choose an image that best represents what your site is about so when
people see it they will naturally associate that image with you.
To design my favicon I started by making a new Photoshop document at 86 by 86 pixels (to give me a little room to work with), transparent background, and RGB format. Next I selected the Marquee Tool and went up to the options bar and chose Fixed Size, then I typed '16' for the width and height in the size boxes.
I clicked once and this placed a small 16 x 16 square marquee on my canvas. I made sure I had the default black and white swatches by hitting 'D' and then I hit 'X' to make white my foreground color. I filled the square by hitting Alt+Delete, then I deselected (Ctrl+D).
I then selected the whole canvas (Ctrl+A) and aligned the square by clicking on the alignment icons in the options bar. After this I deselected again.
Now I had my favicon-sized square aligned to the middle of my canvas, which I would use shortly to make a mask over my chosen image. I made a new layer (Shift+Ctrl+N) and then I opened the file with my FatBird and dragged him onto the canvas. Holding down my Ctrl key I clicked on the small square in the layer below and then clicked the "Add layer mask" button in the bottom of the layers palette.
I wanted to make a thin black border around my favicon so I Ctrl+clicked on the small square again, hit 'D' to switch my swatches back to default, and created a new layer above the FatBird. I then went to Edit > Stroke and in the dialogue box that popped up I chose 1 pixel for the width and Inside for the location, then clicked OK.
As you can see this gave me a nice border around my favicon image.
Satisfied I merged these layers (Shift+Ctrl+E). I then hit Ctrl+A (to select the whole canvas), Ctrl+C (to copy), and Ctrl+N (to bring up the New file dialogue box). When you do this the Name field will already be highlighted and you can just type in whatever name you want and click OK. You do not have to name the file 'favicon' (for example, I named mine 'dcfavicon') so just pick a name that you want.
Next I chose File > Save As and in the Format drop down I chose 'ICO (Windows Icon)'. This format option will appear in the list once you have Toby's plug-in installed in your Photoshop plug-ins folder.
As you can see by looking up at the URL address bar of this page (or your tab, if you are visiting with Firefox) my favicon turned out pretty good. I was quite impressed with it and I highly recommend visiting Toby's site and trying it out for yourself. The plug-in is free and there is a donation request on the site (for a mere $5), but personally for something like this that actually works and is insanely easy to use I would be a little more generous than that.
To add the favicon to your web page you will need to upload your file to the root of your website directory. After you do that you will have to insert the following HTML tag (in between the <head></head> tags of your web page) ...
<link rel="shortcut icon" href="favicon.ico">
It's also possible to use an animated favicon, but I would advise against it. The main reason is that anything animated detracts - or I should say distracts - the visitor's attention away from what they came to see, which is your main content. As one person put it ...
Just for the heck of it I did make my own animated favicon using ImageReady. Here it is ...
So what do you think? I hope the above tutorial has been helpful for you and thanks for reading. I look forward to your comments.
A favicon is a custom icon associated with a webpage or website that appears next to the http address in the URL window of a browser. The favicon will also occupy open tabs in tab-enabled browsers, and will display next to bookmarked links. Favicon combines the words "favorites" and "icon."
- wiseGEEK
- wiseGEEK
I've always wanted one of these, but whenever I tried to make one it never worked. Then I came across Toby Thain's ICO (Windows Icon) file format plug-in for Photoshop during a Google search.
Toby's ICO plug-in is an easy way to create your favicons in Photoshop (all versions including CS and CS2), Elements or Paint Shop Pro (v9 recommended). I downloaded Toby's file, which goes into the "File Formats" folder inside your Photoshop Plugins folder. Once it is there then after you design your favicon (providing you're using Photoshop) you simply use "Save As" from the file menu and choose 'ICO (Windows Icon)' from the Format drop down. This will turn your graphic into an icon (ICO) suitable for use as a favicon.
There are many ways to create favicons, but I prefer using Photoshop myself. If you don't have Photoshop then here are a few favicon making programs on the Web ...
Of the list above Jacob Gube of Six Revisions had this to say, "The favicon.ico Generator is my favorite out of the pack, and it was used to create Six Revision’s favicon." I would have to agree. You can check out Jacob's site to see how it turned out. Nice job :)
- favicon.cc -- a tool to create or download favicon.ico icons that get displayed in the address bar of every browser.
- FavIcon from Pics -- free favicon.ico for your website (animated, static, text, iPod icons)
- Free Favicons - Online animated favicon maker! Need a favicon for your site? Use our free favicon generator to create one.
- Dynamic Drive FavIcon Generator -- Use this online tool to easily create a favorites icon (favicon) for your site. Capable of generating desktop icons as well.
I've always been fascinated with pixel art so I had some experience with making icons. With a favicon the graphic must be 16 x 16 pixels in size. Now you can make a favicon out of just about anything, but the key here is to choose an image that is is somewhat simple. Why, you might ask? Because at such a small size the more simple the image the better.
For my favicon naturally I chose one of my FatBirds since they are the mascots of TBODC. This is another thing you will want to consider when making a favicon for your own site. Choose an image that best represents what your site is about so when
people see it they will naturally associate that image with you.Decide what picture or text you want to use as your favicon. Remember, it will show up tiny, only about 1/8 inch, so to be seen it needs to be something simple. Think of the Blogger 'B', or the Twitter 'T', and the Google 'G', as examples of simple, yet memorable favicons. Also look at your list of bookmarks. Next to each bookmark is that site's favicon. This will give you more ideas on what types of favicons are best.
- Bukisa
- Bukisa
To design my favicon I started by making a new Photoshop document at 86 by 86 pixels (to give me a little room to work with), transparent background, and RGB format. Next I selected the Marquee Tool and went up to the options bar and chose Fixed Size, then I typed '16' for the width and height in the size boxes.
I clicked once and this placed a small 16 x 16 square marquee on my canvas. I made sure I had the default black and white swatches by hitting 'D' and then I hit 'X' to make white my foreground color. I filled the square by hitting Alt+Delete, then I deselected (Ctrl+D).
I then selected the whole canvas (Ctrl+A) and aligned the square by clicking on the alignment icons in the options bar. After this I deselected again.
Now I had my favicon-sized square aligned to the middle of my canvas, which I would use shortly to make a mask over my chosen image. I made a new layer (Shift+Ctrl+N) and then I opened the file with my FatBird and dragged him onto the canvas. Holding down my Ctrl key I clicked on the small square in the layer below and then clicked the "Add layer mask" button in the bottom of the layers palette.
I wanted to make a thin black border around my favicon so I Ctrl+clicked on the small square again, hit 'D' to switch my swatches back to default, and created a new layer above the FatBird. I then went to Edit > Stroke and in the dialogue box that popped up I chose 1 pixel for the width and Inside for the location, then clicked OK.
As you can see this gave me a nice border around my favicon image.
Satisfied I merged these layers (Shift+Ctrl+E). I then hit Ctrl+A (to select the whole canvas), Ctrl+C (to copy), and Ctrl+N (to bring up the New file dialogue box). When you do this the Name field will already be highlighted and you can just type in whatever name you want and click OK. You do not have to name the file 'favicon' (for example, I named mine 'dcfavicon') so just pick a name that you want.
Next I chose File > Save As and in the Format drop down I chose 'ICO (Windows Icon)'. This format option will appear in the list once you have Toby's plug-in installed in your Photoshop plug-ins folder.
As you can see by looking up at the URL address bar of this page (or your tab, if you are visiting with Firefox) my favicon turned out pretty good. I was quite impressed with it and I highly recommend visiting Toby's site and trying it out for yourself. The plug-in is free and there is a donation request on the site (for a mere $5), but personally for something like this that actually works and is insanely easy to use I would be a little more generous than that.
To add the favicon to your web page you will need to upload your file to the root of your website directory. After you do that you will have to insert the following HTML tag (in between the <head></head> tags of your web page) ...
<link rel="shortcut icon" href="favicon.ico">
It's also possible to use an animated favicon, but I would advise against it. The main reason is that anything animated detracts - or I should say distracts - the visitor's attention away from what they came to see, which is your main content. As one person put it ...
PLEASE do NOT use animated favicons! This is incredibly annoying for your users and will just make them go to another site! PLEASE NOTE animated favicons ALSO animate in the UI tab in FireFox and this is HUGELY distracting and annoying. It will make users target your site as an annoying site to close immediately. Please Please use common sense, do NOT use them.
- Irritated User
- Irritated User
Just for the heck of it I did make my own animated favicon using ImageReady. Here it is ...
HI. I LOVE YOUR FAVICON, HIS EYES ARE SO BIG. YOU HAVE INTERESTING BLOGS, KEEP UP THE GOOD WORK. , LOVE MOM
Thanks, Mom :)
Looks very nice in my URL address box browser! Creatively done I would say, because everyone always using with a logotype for the favicon and those eyes are quite different ;)
Graphic Identity, I'm glad it worked for you.
Hi Doug,
Here's a resource you might find useful. It comes in handy for me everytime I prepare a favicon for clients:
http://www.chami.com/html-kit/services/Favicon/
Simply upload an image, and it'll prepare you three files automatically. One is a plain favicon on white background. One is on a transparent background. One is animated (a scrolling marquee).
Tell me if it's any use to you. I like it.
Off-topic, is there any way you can alter the comment form so I can add my full name? (David Airey)
Hi David. Thanks for stopping by - and for the great link. I've bookmarked that one. Personally, as a designer, I love making my own and Toby's plug-in made that possible.
I take it what you're asking me is if I can alter my own comment form so you can enter your full name? If so where would I do that? I don't see anything of that sort in Bloggers settings.
You're very welcome for the link, Doug.
As for the comment form, I'm not very familiar with Blogger at all, but from the looks of it, you may have already changed something?
I now have an option to enter my name and URL, as opposed to just the Blogger ID.
Hello and welcome to TBODC! If you like the article you just read you can subscribe here to get updates via RSS or opt to have them sent directly to your inbox. I appreciate your feedback so please feel free to ...
Post a Comment