The definition for a favicon at Wikipedia is:
A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.
For the rest of us who are not as technical. It is that tiny picture next to the browser URL area that might change when visiting one site to the next.
1. To add one, it is simple. First you at least need to make a 16×16 pixel icon in your graphic editing program.
2. Convert it to the accepted .ico (for icon) file extension. There are a few favicon generators online. Here is one I often use: Favicon Generator Tool at Dynamic Drive
3. Once you have saved the file to your computer, you will need to upload it to your web hosting space.
4. In your layout’s template, before the ending head tag, put the following code:
<link rel="shortcut icon" href="http://YOURDOMAINHERE/favicon.ico" />
Make sure you replace “YOURDOMAINHERE” with your URL path where you have uploaded your favicon file.
Once you have done, bookmark your page. You might have to clear your computer’s cache, and also restart your browser to see the changes.
For those who use WordPress, normally this would go in your header.php file. In the case that you are deciding to use a plugin for this – DO NOT. Just use this tutorial. It is less coding and if you are still confused, ask and I can try to help walk you through it.
I created all favicons for my site, it's like accessories for people. Beautyful favicon makes good associations in visitor's brain.
My recent post SEO-??????????? – ???? ?????????? ?????? ?? ????????
This is a GREAT reference. I was wondering how you got that little icon next to your website's title! Thanks Blondish!
Hi Nile
I think favicon is a great way to personalize a website or a blog and your favicon is pretty cool. I am not too happy with my own, but have not had the time to fix it yet. By the way this is my first visit to your blog 🙂
My recent post Twitter Guide For Dummies part1
I never thought of using favicon(lol), thanks for the generator.
Nice tip, I don’t know how much it helps or not but it is something I will look into for sure. I guess adding some uniqueness can never hurt!
its so difficult to make good favicons. There’s so little space, lol
i agree i also have this trouble when i am going to design favicon due to little space
Thanks for this post Nile, for me this is much better than using a favicon plugin.
Short and helpful post but there are too many tutorials on how to add favicon….was expecting something better…. anyways…. this site rocks..
Hi Shan! Thank you for coming by and commenting. Actually, this post has been re-purposed and a screencast will be added shortly.
Hi Nile
Even I can understand this one! Awesome an so easy to do. I had my web designer do it for me a while ago. I hope it still works lol! If not, not I can do it myself.
Thanks for making the world a little easier for me.
Blessings,
Donna
Hi Nile,
a while back my favicon was showing up and then it did not.
Now it shows up in my shortcut in my browser toolbar but not in the URL box.
It does show up on the Tab of the browser window.
It was good to see how you do it.
Thanks for the great tutorial
Very informative sharing. Favicon is a great way to personalize a website or a blog. This info will help allot. Thanks for sharing this step by step guide.
Hi Nile
Even I can understand this one! Awesome an so easy to do.Thanks for making the world a little easier for me.
i use to believe the so called favicon are very specific to certain sites like microsoft, Wikipedia etc., never thought any site can have it. Wise choice though any web owner if creative enough should create a favicon in my opinion. I hopw you are aware of the fact that your site fav icon is not displayed in chrome.
Hey Niles, Thanks for the great tip. I really didn’t know much of the technical terms until I stated reading your blog. You really keep it simple.
I love these tips and even as a pro blogger – or at least a full-time one 😉 I concur and WELL-DONE and well-written with your writing voice through and through.
thanks for sharing it 😉
Nile,
Nice tutorial to set a fav icon for the website. the site looks so cool with have an awesome favicon. i think a good favicon really help us to get highlighted in even multi tab browser.
Whatsoever web proprietor if creative enough should create a favicon in my view
Wise choice though any web owner if creative enough should create a favicon in my opinion. I hope you are aware of the fact that your site favicon is not displayed in chrome
I checked on three different computers outside of my home on different networks, but with Chrome. The favicon is showing.
Yes i also think favicon is a great way to personalize a blog,This info will help allot to me and others people also…Thank you for sharing …
Interesting how we like to have images everywhere. I love the way the Internet is turning into a world of pictures in so many places. I haven’t got round to doing a favicon yet, thanks for showing us all how to do it Niles.
Hii .. Nice post …. Thanks a lot…
Thanks for that handy little tip, Nile! I haven’t done one yet, but it’s good to know how, especially since it looks pretty simple.
Willena Flewelling
Nile, this is a task I need to add to my “to do” list for my blogs. Thank you for putting this resource together for us! I’m embarrassed to say this, but I don’t even think I have a graphics editing program: which do you suggest?
There are many website to generate fevicon, using fevicon is best way to brand your blog/ website.
I think having a cool favicon makes you look much more professional. If you have a lot of tabs open when you browse, it’s super helpful. I know that when I’m surfing the web, it’s not uncommon for me to have 10 tabs open at one time. It’s so much easier to click between the tabs when I can glance at the favicon and not even need to read.
Good post!
Can we use animated favicon in the same way.
I really have not seen an animated favicon. You could try, but I do not think the .ico can handle animations.
Thanks for the simple tutorial. I am trying to learn how to put the favicon on my site. Hopefully I figure it out. This was helpful.
Thank you, really helped.
I used to wonder how people add Favicon to their website, now, you made it much easy!. Thanks
Hey there! I just want to offer you a huge thumbs up for your great information you have right here on this post. I am coming back to your web site for more soon.
Thanks for Favicon Generator Tool link info 🙂
Thanks for the great information, Nile. I could easily add favicons when I was using Weebly. Now I can put them on my wordpress blogs. I think they make the blogs much more unique and attractive. I’ll be getting to this pronto.
Until today i didn’t use favicon.i thought it’s useless and reduce site speed…Thanks for your Favicon Generator Tool link info
It did not work for me anyhow the favicon generator tool helped me in creating. Thanks for sharing.
HI
I GUEST that makes a nice favicon you professionally. If you open a lot of tabs when you surf, it’s super helpful. I know that when I browse the web, it’s not uncommon for me to have 10 tabs open at a time. It’s so much easier to click through the tabs, if I look at the favicon and not even read.
Good post!
Thanks Nile, now I can uninstall the plugin I was using and just insert into the header.php. The favicon does add another layer of professionalism to any site. Awesome footer btw.
Yes, you can uninstall the plugin and use the code I gave. You just have to remember to make sure that your link to your favicon is the right one.
Nile, I’m so excited. I’ve been looking for a tutorial like this for a while. (And also procrastinating). What if I don’t have a graphics editing program: is it best to go through a service like Fiverr to have one designed?
You could have someone design one for you. However, there are also graphic editors online like Pixlr.com that you can make an image, save it in PNG format and then convert it on another online site. Also, there is an open source graphic editor you can download from free called GIMP… look it up, download it, and play around with it some. 🙂
I don’t know about it before,,,after reading it i tried to do this but didn’t get success.
Plz can you tell me whats the problem??????
I followed all of the option you describe…I am using WordPress…
Did you use the direct path to the file of the icon? Is the link correct?
This does not always show up right off the bat. I do see a favicon for WPLook on your website…. so you just need to re-upload the icon and overwrite the one that is in your theme’s file.
Thank you for helping me how can I add a favicon to my website! However, I did not understand the header.php. What should I do with this file? I hope you can give some advice cause I am using WordPress. Thank you again!
Thanks for your exclusive post. It’s easy to add a favicon to a website. We just need to follow a few steps. In wordpress, there are many ways to add a favicon. Just like using code on header, using plugin or using javascript.
I think it’s easy to all. So all the best…