A couple weeks ago I was browsing around some of my favorite sites (David Airey among them, of course) and I noticed the nifty little favicons that people were using. 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.
I downloaded the file which is a plug-in that you can simply copy/paste/drop into Photoshop's plug-in folder. 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. I browsed through all my work to find a suitable candidate and came across a psd file for one of my old web site designs. In this file was a small character I'd made who I named Snets.
Don't ask me why. I haven't a clue. Names for things just come at me out of nowhere sometimes.
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. With my image I started by making a square selection over just the part of Snets that I wanted for my favicon, then I made that selection a mask. Since I wanted a thin black border around the image I created another layer above Snets, made black my foreground color, Ctrl+clicked the mask layer to get the square selection back, and then used Edit > Stroke (using a width of 1 pixel inside).
Satisfied I merged these layers and then reduced him to 16 x 16 pixels. This is a lot easier to do if you start out like I did by making an exact square selection of your desired image. Once merged I chose File > Save As and in the Format drop down of the Save As window I chose ICO (Windows Icon) [*.ICO,*.CUR]. 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 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.
I downloaded the file which is a plug-in that you can simply copy/paste/drop into Photoshop's plug-in folder. 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. I browsed through all my work to find a suitable candidate and came across a psd file for one of my old web site designs. In this file was a small character I'd made who I named Snets.
Don't ask me why. I haven't a clue. Names for things just come at me out of nowhere sometimes.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. With my image I started by making a square selection over just the part of Snets that I wanted for my favicon, then I made that selection a mask. Since I wanted a thin black border around the image I created another layer above Snets, made black my foreground color, Ctrl+clicked the mask layer to get the square selection back, and then used Edit > Stroke (using a width of 1 pixel inside).
Satisfied I merged these layers and then reduced him to 16 x 16 pixels. This is a lot easier to do if you start out like I did by making an exact square selection of your desired image. Once merged I chose File > Save As and in the Format drop down of the Save As window I chose ICO (Windows Icon) [*.ICO,*.CUR]. 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 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.
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.
Nope. Didn't do anything.
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