How to add favicon to your blog (WordPress)
[ad code=2]
This is a simple tutorial to help you apply favicon to your blog if you are still wondering how to.
Favicons are small images or icons that represent your website or blog. Favicons are displayed on Address Bar, Tabs, Bookmark lists and Recently Opened Sites list if the browser supports.
What’s the use?
It may appear only the aesthetic value of favicons for any website or blogs, but if you give it a second thought, they provide some useful function. It might be subtle but has important role in building the brand on website. Favicon helps your site stand out in a crowd. When a visitor lands on a page, favicon can be a good indicator for them to inform them that they came to the right place.
Favicons provide great assist when you are skimming bookmarks page. Human eyes are more attracted by colorful pictures than text and numbers. Your readers will see the favicon before they read the txt. So, they can easily identify a page from your blog in a list of their bookmark.
The modern browsers are enjoying tabbed browsing. Chrome has thrown away title bar. Now, tab is the real estate you can harness to mark your presence. If you have a favicon, your site is distinguishable even when visitor is opening dozens of sites in different tabs. With the least available space, you could shout your existence!
Are these uses less important?
How favicons work?
Its very simple method. Just upload favicon somewhere in your site and tell the browser where it can find to display. Its not necessary but a common practice and matter of convenience to store favicon files on the root of a website. We use < link > tag to tell the browser – the type & location.
Type of favicon – animated or static
Look at following line of code that is responsible to communicate with browser to display favicon:
< link rel="shortcut icon" href="http://www.icttrends.com/favicon.ico" />
Here, rel attribute states that the link is of favicon. rel=“shortcut icon” indicates it is static favicon. rel=“icon” tells the browser that it is animated favicon. href portion of the code indicate where browser can find the file for favicon.
Favicon files are distinguished with .ico extension. In case of animated favicon you can use .gif files.
How to generate favicon files?
You require at least one .ico file to use static favicon or additionally one more .gif file if you wish to apply animated favicon. There are plenty tutorials available for those who prefer designing their own favicon in PhotoShop and so on. Just do a few Googling.
If you have some images you wish to convert into favicon, use some online tools like Animated Favicon. This site generates both static and animated favicon of your porvided image.
How to apply favicon for WordPress?
Are your brows raised for I presented too lot technical? Yes, I understand. A blogger is not tech savvy. He needs the power and flexibility at the finger tips. All these information might be unnecessary for a WordPress blogs. There are plugins available like WP Favicon that does everything for you after you upload your static and dynamic favicon to the root of your blog directory.
Don’t want to use plugin? You are welcome to edit your template html and put a line of code in between < head > and < /head > section.
Happy Blogging!
52 Responses to “How to add favicon to your blog (WordPress)”
icttrends on March 21, 2010
RT @icttrends How to add favicon to your blog (WordPress) http://ow.ly/1qtl0P
Kannanbala on March 21, 2010
RT @icttrends: RT @icttrends How to add favicon to your blog (WordPress) http://ow.ly/1qtl0P
Ileane
Twitter: Ileane
on March 21, 2010
Suresh,
This is an important tip. I think it adds to the professional look of a blog also. It helps with branding by using the same logo or avatar that use on Twitter and other social sites.
Even WordPress.com users can add this, but they do it on the dashboard settings.
Thanks for the plugin link too.
.-= Ileane´s last blog ..Say Goodbye to Family, Friends and A Good Night’s Sleep! =-.
Luigi | Postcard Printing on March 22, 2010
I have to agree with Ileane. I also think that it helps people recall your site. Sites with favicon actually helps me remember them than sites without it. It also gives an impression that it’s a top notch site.
Kiesha @ WeBlogBetter
Twitter: krenee76
on March 23, 2010
I’d love to know how you make your favicon flash and change – can I find this in another tutorial?
.-= Kiesha @ WeBlogBetter´s last blog ..What will the death of Youtube mean for bloggers? =-.
shkhanal
Twitter: icttrends
on March 24, 2010
Hi Kiesha,
Thanks for stopping by. Regarding the flashing favicon, I’ve applied the animated favicon. For that all you have to do is create an animated gif file and use it as your favicon! Voila!
Omer Greenwald
Twitter: WebTechWise
on March 23, 2010
I think favicons are essential these days to contribute to the website branding and overall style.
I used to use the a plugin for this but now I just use the link tag in my header.php.
Thanks
.-= Omer Greenwald´s last blog ..My Guest Post Experience =-.
shkhanal
Twitter: icttrends
on March 24, 2010
Yes Greenwald just a line of code is sufficient if I know little bit of HTML code. For the newbies plugins are great!
I wonder, though Chrome is the youngest browser it does not support animated favicon? Funny Huh?
Omer Greenwald
Twitter: WebTechWise
on March 26, 2010
Yes, it is odd.
Maybe the next release will support it.
.-= Omer Greenwald´s last blog ..My Guest Post Experience =-.
uberVU - social comments on March 24, 2010
Social comments and analytics for this post…
This post was mentioned on Twitter by icttrends: RT @icttrends How to add favicon to your blog (WordPress) http://ow.ly/1qtl0P...
Waldorf School on March 24, 2010
Thank you for this information. I just wondering if this can be applied to blogger.com blogs. I tried this one and still the ‘B’ favicon is still the one showing. What seems to be the problem with this?
shkhanal
Twitter: icttrends
on March 25, 2010
In case of blogs in blogger platform you need to find an .ico file hosting service because blogger does not host any images and Picasa don’t allow you to store .ico files. Once you are able to host the favicon.ico file somewhere, you can sit for adding one line of code in the head section of template html file. I’d applied custom favicon when I was hosting this blog on blogger platform. Please check if http://icttrends.com/where-can-i-host-ico-files.html can help you.
bbrian017
Twitter: bbrian017
on March 24, 2010
This is a great tutorial. Adding a favicon is so easy everyone shoudl do it and there no excuses. But to be really honest I still haven’t added one to my new blog template at seomkt. I shoudl but i haven’t had time to dedicate as of yet.
You know what you inspired me I’m going to add it now!
p.s. what plugin is it that ads the twitter name?
.-= bbrian017´s last blog ..I’m working on my e-book everyone =-.
shkhanal
Twitter: icttrends
on March 25, 2010
Its great to find you on my blog! Thank you for stopping by and sharing your ideas.
Regarding Twitter name I’m using TwitterLink plugin.
bbrian017
Twitter: bbrian017
on March 26, 2010
Thanks shkhanal I’m going to add it to my blog too I like it!
.-= bbrian017´s last blog ..How to get the most out of blog engage =-.
element321
Twitter: element321
on March 25, 2010
Great post. I haven’t added a Flavicon yet, but I do plan on adding one. Flavicon is also a good way to add your company branding. If you have a company logo or your site has its own logo, you might be able to convert it into a flavicon.
.-= element321´s last blog ..How Add Author Bio to WordPress Without a Plugin =-.
shkhanal
Twitter: icttrends
on March 26, 2010
That would a great aid in branding and promoting your brand, indeed!
Imran Yousaf
Twitter: bloggingjunkie
on March 25, 2010
Suresh, i liked your very simple but lovely Share this post animation/style.Keep working on your blog. Suresh, adding favicon from day first strengthens your brand image. Your post is very helpful for favicon.
.-= Imran Yousaf´s last blog ..We are Re-Designing our Site with Blogussion Skin =-.
shkhanal
Twitter: icttrends
on March 26, 2010
Thank you Imran for your inspiration.
Suhasini on March 25, 2010
Well this is a simple thing but will use many users, Thanks for sharing.
shkhanal
Twitter: icttrends
on March 26, 2010
Hi Suhasini, I’m happy to see you here on my blog. Please accept heartily welcome.
Jimi Jones
Twitter: JimiJones
on March 25, 2010
Good post, Suresh.
The are a must in my opinion. As pointed out by Ileane, great for branding and giving the professional look. They certainly look better than the default “blank page” icon of many themes.
I’ve seen some nice animated favicon around the net as well. They are eye catching and really cool.
.-= Jimi Jones´s last blog ..The Crossroads of Life Bring Opportunities =-.
shkhanal
Twitter: icttrends
on March 26, 2010
And there are pretty lot of plugins that help to apply favicon on a blog even if you don’t know anything coding. I wonder why blank page or wordpress logo is left unchanged.
Jimi Jones
Twitter: JimiJones
on March 26, 2010
I did a post about the MaxBlogPress Favicon plugin some time ago which makes this easy as well. You are right, no need to leave this undone.
.-= Jimi Jones´s last blog ..Build Your Brand with Twitter Directories =-.
Featured in MMO Social Network on March 26, 2010
Story added…
Your story was featured in Featured in MMO Social Network! Here is the link to vote it up and promote it: http://www.mmosocialnetwork.com/BloggingTips/How_to_add_favicon_to_your_blog_WordPress...
Nile
Twitter: blondishnet
on March 27, 2010
Word of advice…it is better to use the HTML relative code than use the plugin. You can hard code it into your layout and change it much easier. I think most webmasters should really try to learn about their site layout so they can make simply changes like their favicon.
I already had this tutorial for quite some time on my own site – http://blondish.net/articles/tutorials/adding-a-favicon-to-your-site/
.-= Nile´s last blog ..MailChimp: A User’s Experience =-.
shkhanal
Twitter: icttrends
on March 27, 2010
Thanks Nile for the comment. I agree, the best way is to hard code into template file. But we should not forget those blogger who are scared of codes. (Web-masters are very strong though)
ButDoottdueda on March 27, 2010
i truly adore all your posting style, very useful.
don’t quit as well as keep penning mainly because it simply that is worth to look through it.
looking forward to look over even more of your articles, have a good one!
pharmacy tech on March 28, 2010
Keep posting stuff like this i really like it
Robin Benedict
Twitter: robinbenedict
on March 28, 2010
Your favicon is great man, between text and your avatar..
.-= Robin Benedict´s last blog ..Kaspersky License Key & Activation Code =-.
shkhanal
Twitter: icttrends
on March 30, 2010
I’m happy you liked it. I though this way it will attract the eyes more.
Ching Ya
Twitter: wchingya
on March 30, 2010
I used to have a favicon back in Blogger template but it was forgotten after I migrated to new WP site. I was meant to create a new one maybe reading this post is an indication that I should really get on with it. Might not be now but it will be on my to-do list this time. Thanks for the enlightenment.
@wchingya
Social/Blogging Tracker
.-= Ching Ya´s last blog ..How to Manage Busy Social Networking Life with Multiple Projects at Hand =-.
shkhanal
Twitter: icttrends
on March 30, 2010
Hi Ching Ya!
Thanks for stopping by. I know busy persons have lots of tasks at hand and always think “Why the day consists of only 24 hours!”
BTW, you got a guest post by hesham. Its really great – a classic piece for bloggers.
John Sullivan
Twitter: jsinkeywest
on March 30, 2010
Hi Thanks Glad I came by after seeing your a Gentleman on Twitter and decided to check out the blogger with manners
Glad i did as a friend needs the awesome post, it’s hard to explain these things on twitter so I shot her this link. awesome Thanks 
Look forward to more and see many of my friends above
.-= John Sullivan´s last blog ..If I change my name to Scoble will you call ? =-.
icttrends on April 5, 2010
RT @shirleyszone: RT @icttrends How to add favicon to your blog (WordPress) http://icttrends.com/how-to-add-favicon-... <<Thank you very much for RT! U R so nice
shirleyszone on April 5, 2010
@icttrends Oh, Jesus! Suresh, you are nicer than I am
. You’re welcome 
.
cheap jewelry making supplies on April 15, 2010
Wow! thanks for this! I wish I have more time with my blogs like before. I’m just too busy with my business.
Lewis Smile
Twitter: mrlewissmile
on May 12, 2010
A GREAT plugin for this on wordpress is by MaxBlogPress. You can upload a favicon from your computer, put in a link to one on the web which it will import, or choose from the list of about 50 default favicons.
I use it on pretty much every blog I build!
.-= Lewis Smile´s last blog ..Blogging For Website Visitors =-.
apple ipad on June 16, 2010
I admire your style, the idea that your page is a tiny bit unlike others makes it so interesting, I am tired of reading the same-old-same-old all of the time. bookmarked
Aaron
Twitter: blogreaction
on June 27, 2010
Adding a favicon is very cool. It definitely makes your site stand out in tabbed browsing especially. Thanks for the tips and examples Suresh.
Net Age | Web Design
Twitter: Net_Age
on June 30, 2010
Favicons are a must have in a modern blog design, and in a world of templates and clones they could be one of the key factors in making your blog stand apart from the crowd. Do give careful consideration as to the style of the favicons when doing your design, so that they serve to complement and enhance your work, rather than pulling it down.
Animated favicons are quite good at catching the eye, and seems like a great means of getting the attention of your intended audience if executed right. Thank you for the insight and the tutorial, I am really learning loads from your blog.
Regards
Jacques | Net Age
Activation Codes on July 19, 2010
Great post – I’ve been struggling with this for some time and it’s great to see this information about it !
Geekyard on August 21, 2010
Cool….Now my site looks cool with this favicon
Ilike tuvuck
Twitter: koodayreview
on September 28, 2010
What the heck is Kooday. I see you have a Kooday advertisement or is it koolday? I dunno… kool day?!
Suresh Khanal
Twitter: icttrends
on September 28, 2010
Kooday is a search engine where you can buy keywords and earn through them.
Julien Woods on November 12, 2010
For 2 hrs I try to configure but I succeded because I found your tutorial. No, i'm playing it around with my other wordpress sites. thank u so much!
customize computer on December 31, 2010
thanks for your share,,, nowadays favicon is very important for design blog…
Stacy Renee on January 22, 2011
Very nice and informative post, I am just starting to learn wordpress, so I am reading every article I can find, thank you very much for sharing yours.
Stacy Renee
Tarot card meanings on February 19, 2011
Hey thanks for this post…I was looking around on how to change my favicon that is besides my domain name. So here it is and it seems simple. I think I’ll get the plugin to help me.
Jhonny Brown on February 26, 2011
Favicon it`s not just nice. I think people remember this icon.
thx for post, now i know more about favicons!
ipad 2 review on April 23, 2011
i really would like to add a favicon to my wordpress blog…thanks for the article!
Developer on May 13, 2011
Favicon helps to increase clickability for your site in SERP.
Usefull article, great thanks