Favicons are a fantastic way to give your Blogs a little added flair and panache. Whenever you’re on the web you may notice small images displayed in the address bar of your browser. They appear directly before the URL of certain websites. These images are known as “Favicons” because they are “icons” associated with websites which show up in your browser’s “Bookmarks” list (in Firefox) or “Favorites” list (in Internet Explorer). They also display at the top of tabbed panels.
Favicons are small images which are usually 16px by 16px in size. Your site logo would be a natural choice for a favicon. If you find that your logo is too complex to shrink down to 16px by 16px, try stripping out the most recognizable logo elements and using them as a base for your favicon. You can use Adobe Fireworks or Adobe Photoshop to make one. Or else you can use online generators listed in the end of the post.
Favicons must be created in one of three possible image formats: .ico (Windows Icon), .gif (Graphics Interchange Format) or .png (Portable Networks Graphics). Of these the .ico format is probably the best way to go because all browsers will recognize it.
For adding a favicon to your blog follow these steps:
01. Login to your wordpress account and navigate to Appearence -> Editor.png "How To Add Favicon To Blog")
02. Then click on Header.php and add the code in the end and click on Update File Or Save..png "How To Add Favicon To Blog")
Then.png "How To Add Favicon To Blog")
<link href=’http://YOUR_PATH/favicon.ico’ rel=’icon’ type=’image/ico’/>
Change the YOUR_PATH url to the url of your image. That’s it.
01. Login to your Blogspot blog and navigate to Layout –> Edit HTML
.png "How To Add Favicon To Blog")
02. Now just before the </head> tag add the favicon code and click on SAVE TEMPLATE..png "How To Add Favicon To Blog")
<link href=’http://YOUR_PATH/favicon.ico’ rel=’icon’ type=’image/ico’/>
Change the YOUR_PATH url to the url of your image. That’s it.
Hope this helps.
Different Sources To Get Or Make A Favicon From Images:
- E-Consulant’s Favicon Gallery – 15,000+ Favicons Gallery , YIKES !
- Favicon Generator – Create your own Favicon.ico for free
- FineIcons Favicon Gallery – Favicon Gallery
- Mpp’s Favicon Gallery – One more inspirational Favicon Gallery
- The Favicon Gallery – Another Favicon Gallery
Run IE5 IE6 IE7 and IE8 In One Window
How To Add A Contact Form To Your Blog
Professional Code Box For Bloggers
Hide Navigation Bar
What Would Web 3.0 Look Like?
14 Responses to How To Add Favicon To Blog
Rapideo June 24, 2009
Thanks A Lot, Im Looking For This Thing From A Long Time But I Could Not Succeed. You Make Me Understand In Simple Way.
Bariski June 24, 2009
My pleasure buddy.
Color Printing June 24, 2009
Favicons are a wonderful way to add some personality (flair and panache as you would say) to one's website. These favicons are great for building branding and recall.
Thanks for posting this useful tutorial on how to add them to one's blog! Really helpful stuff :)
TheWildJoker June 24, 2009
Excellent post my friend. Well written and style was excellent. I am new to social media and blogging so I am still learning. This article gets you put on my RSS feed and if not already Dugg, then im Digg'n. I have always wondered how to set up a Favicon, and honestly I didn't know what they were called till this post. Goes to show how new I am to blogging and the whole social media scene. This article answered all my questions. Keep the good posts coming…
TheWildJoker
Bariski June 24, 2009
Thanks for your inspiring replies, I'm really glad this helped you :)
Pro-Vamsi June 24, 2009
Well Explained but the images are looking too small!! Try to host the images some where and use the img tag to bring it here. This would give a better look to the images!! Please contact me if you have any further questions.
pramod June 24, 2009
datz great dude..
Itz very helpfull…
keep rocking!!
Reverse Cell Phone Lookup June 25, 2009
I don't like to modify the php pages for WordPress themes cause when the theme is updated I have to modify the code again.
Johnson Koh June 26, 2009
Well written guide Bariski :D
Bariski June 26, 2009
Thanks for your comments buddies :)
Jash Sayani June 29, 2009
You have a great blog!
Bariski June 29, 2009
Thanks buddy, I'm glad you like this.
Mohammad B. Irshid June 30, 2009
Many thanks for the great way. I'll try it in few minutes and I'll tell you. Thanks
sagar July 17, 2009
Here is a simple step by step tutorials to create your own FAVICON easily on
photoshop cs version.
How to create FAVICON using Photoshop?