digital monday :: favicons
Favicons, short for "favorite icons" are small icons used by most browsers to identify your site (or blog page). It appears in the address bar to the left of the URL when you are viewing a site. Mine should be showing in your address bar right now. It's the little blue and green icon next to my blog address.
Favicons also show in your bookmarks and, if you're using a browser that supports tabs, your favicon will show on the tab, like mine and Ali Edwards' in this screenshot of my Firefox tabs.
Creating favicons is easy. The thing to remember, though, is to keep them simple. These little pictures are only 16x16 pixels...tiny! So the less detail the better. Here's what you need to do:
Create a new, blank document in either Photoshop or Photoshop Elements. Make it 16 pixels wide and 16 pixels high. Resolution doesn't matter, because you are giving Photoshop the pixel dimensions. Just make sure it's no bigger than 16 x 16 pixels.
What you end up with is a very small image that looks like this...
To design, you want to be able to use the grid. This is way too small to see any grid lines, so zoom waaaaaay in (I use 1200%) until you have something you can work with. Set your grid preferences to 1 pixel with 1 subdivision and, if you're using Photoshop, use guides as well. My window looks like this when I begin designing. (I made the background white so you could easily see my grid and guides, but you can use any color you like.):
Now the fun begins! Design your little icon. You can make your initial (like Ali does), or create something geometric like mine. Just remember to stay away from detail. Also, limit your colors to one or two. And make sure there's a lot of contrast between the two colors, otherwise they will tend to blend together.
To test the "legibility" of your icon, just reduce it back to 100% and see what it looks like. Here's one at 1200%...
and at 100%.
See what I mean about contrast and how important it is? This thing is minuscule!
When you're satisfied, save your new icon as a GIF file.
Now that you've designed your icon, what next? Well, before you can use it as a favicon, you have to convert it to a special format. If you're using Windows, you can download IrfanView. Or, you can do what I did and convert your icon using one of the online free conversion sites. The cool thing about these sites is that they also offer pre-made icons which you can use if you don't want to create your own or to use as inspiration.
To be honest, I don't remember which site I used, but there are lots of them out there. One of the most popular is Favicon from Pics, but you can just do a search using the term "favicon" to find others.
After you've converted your GIF file to the correct format (.ico), you're ready to upload your icon to your blog account. I don't know about other blogs, but Typepad makes this very simple to do. Instructions for typepad users can be found here.
There you have it! Be sure to let me know when you've created and uploaded your own favicons.
Scroll on down and keep reading to find the Design Friday post I forgot to do on Friday.
later...
Just wanted to say how much I'm enjoying the tips and ideas now that you've returned. I'm starting to seriously get into digital scrapping now, and you're a great resource. Book 2 is on the way, and I can't wait to dig in!
Posted by: Kathy T | Monday, 09 July 2007 at 01:08 PM
i read your interview on the ScrapGirls newsletter...and was linked to your blog.
i am just delving into the digi world and can't wait to get your new book!
I love your post today and can't wait to try it out.
I am a DT member at ScrapGalaxy and have to do a blog challenge every day and i loved this post so much that I linked your blog to my challenge!!
thanks for the digi inspiration.
nikki
Posted by: Nikki | Monday, 09 July 2007 at 07:50 PM
Thanks for the favicon info, Renee! Just uploaded my Cubs favicon ... we are die-hard Cub fans at our house! :)
Posted by: sarah vrolyk | Monday, 09 July 2007 at 10:27 PM
I always wondered about those! Thanks so much, Renee! I feel like I have gotten a gift of knowledge every time I visit your blog! Your explanations are excellent -- very clear and understandable. Thank you!!!
Posted by: Lynne | Monday, 09 July 2007 at 10:30 PM
Thanks Renee! I enjoying learning about things that I didn't know! Thanks for making the time to share this info. with us!
Posted by: HeatherS | Tuesday, 10 July 2007 at 09:53 AM
Never a dull moment...You always have something wonderful to share. Great tutorial!! Thanks!
Posted by: stephanie t. | Tuesday, 10 July 2007 at 08:10 PM