Brand Your Site With A Favicon
After you sweated over the perfect design for your site or blog theme, did you forget one last detail…the favicon? You know that little icon that browsers use to identify a bookmarked Web site? Does your site or blog have its own unique favicon? (Look up. See the purple butterfly just before the dazzlindonna.com blog address in your browser’s address bar? That’s my favicon).
A favicon is a minor detail, but it can go a long way towards helping readers remember who you are. Most people have a huge list of bookmarks, and if they see a familiar favicon next to yours, they will be more likely to visit you again.
Favicons used to be quite a bit more difficult to create than they are now. These days, there are free favicon generator tools that will quickly turn any jpg or gif file into a favicon. Simply upload a picture that matches your site’s theme and a favicon will be returned to you. (Note: The favicon will turn out better if the original pic is fairly close to being square, rather than rectangular).
Once you’ve got your favicon, what do you do with it? Simply place it in your site’s root folder (wherever your home page is), and then include the following code in your site’s header file:
<link rel="shortcut icon" href="/favicon.ico" />
That’s it! Take care of that small issue now and you can’t check that off of your list of things to do.
Thank you for visiting, consider subscribing to my full-text feed, and remember:
You'll never shine if you don't glow.
(from Smash Mouth. "AllStar" Astro Lounge
. Interscope Records, 1999.)
Posted on November 1st, 2007 by DazzlinDonna
Filed under: Site Promotion
Subscribe via RSS
Subscribe by Email
I noticed you do have a favicon at the root level of your blog ( ie, http://www.dazzlindonna.com/blog ) but when I’m looking at an individual post or page, the butterfly icon does not show up in the address bar of my browser! Just thought I would point that out!
Doh! You’re right, and the reason is because I didn’t have the forward slash in front of favicon.ico. (I showed it correctly in the code snippet above, but didn’t put it in correctly in my own header). I’ve slapped my forehead for being a doofus. Thanks for letting me know. All fixed.