We've covered most of the basics of starting a blog from scratch. As you'll find, there will always be tweaks and improvements you can make to your blog. Installing a favicon is one.
What is a favicon?
It's a little logo or image that shows up with your blog around the web. It's probably most commonly seen in a browser like so:
Click for a larger view.
Why do I want a favicon?
Well, a favicon is by no means necessary, however it enhances your branding and your professionalism.
How do I get a favicon?
First, you create an image 16×16 pixels to be used as your favicon. Save your image as favicon.ico and install it on your server. Let me explain…
How do I create a favicon?
As I said, a favicon is a 16px by 16px image.If you're familiar with creating images already, simply create an image 16px by 16px then skip to the next step.
If you're not familiar with creating images, here are some options:
Option 1: You could use an image-editing application like Photoshop or Gimp to create a favicon of your own, however, learning either for this purpose would be overkill.
Option 2: You could also use one of the many favicon generators online to make your own, like this one.
Option 3: But here's my simple (and perhaps unconvential) method, using Picnik. Update: Sadly, Picnik is going away, however I'll leave this video tutorial up since the techniques for creating a favicon can be duplicated in other similar programs. Check out this post for alternatives to Picnik.
Can't see the video? Watch it here.
How do I get my favicon to show up online?
Make sure your 16×16 pixel image is named favicon.ico. If it doesn't have the .ico extension, this will not work. To change the file name, simply rename your image from, say, favicon.jpg to favicon.ico. You could also open your favicon.jpg file and then "Save as" favicon.ico.
How to install the favicon file
Now, upload the favicon.ico file to your server. Choose your theme below for specific instructions…
How to install a favicon in Genesis
If you're using Genesis for your theme (I am!), there's another step to take. Here's how to install a favicon in Genesis.
How to install a favicon in Elegant Themes
It's very easy to install a favicon if you're using Elegant Themes. Simply click on Elegant Themes Options in the left column on your Dashboard and then click the Upload Image button under Favicon. Don't forget to Save!
How to install a favicon for most other themes
Option 1: For many themes, you can simply upload the favicon.ico file to your public_html folder via your File Manager. Here is How to Access Your File Manager.
Option 2: A second option would be to access your files via FTP. Here's How to Use FTP. If you don't see your favicon.ico file on the left or your public_html on the right, you'll have to open up the files by drilling down (like clicking the computer icon at the top of the right side, for example).
That's it! If you follow the instructions, note that you may have to wait a day or so for it to show up. It's gotta make its way around the web.
Disclaimer: The links in this post are my affiliate links. My disclosure policy is here.
Is there a way to do this using Blogger?
I haven't tested this method myself, but you might try this tutorial.
Here is the website where I found my favicon! You can create your own or search for one that has already been created – they even host the image for you!
http://www.favicon.cc/
I am also on Blogger – Here is the tutorial I used to change my favicon!
http://newbloggingtipz.blogspot.com/2009/04/how-to-change-your-blogger-logo.html
It totally worked! Thanks.
Yay!
Hi Amy,
Does this take a while to show up after uploading to the file manager?
If you can't see it, try emptying your cache.
I cleared my cache in hopes it would appear. I uploaded the favicon to my hosting site correctly. Do I need to do something from WP to make it show up?
Oh, there it is. It took some time to appear. Thanks Amy~
Favicon… nice to know, haha.
This how much of a novice I am with working with this…
The file manager is the bluehost.com???? Feel like I'm getting a little crazy trying to figure all of this out!!!
Duh! found the file manager! However– I made the favicon according to directions and using a photo. Successfully uploaded it to the file manager wp-content
cleared the cache, and it still does not show up (I did this yesterday around 2p). Can anyone suggest what to do? …and how?
YAY I actually did this! Thanks Amy! You are making me feel like I know what I am doing
LOL!
Thank you so much for this AMAZING blog! Each step has been so easy and extremely helpful. My blog is up and running thanks to you!
Amy,
I just worked for awhile making my favicon and I got it uploaded to bluehost. However, it is still not showing up and I have tried to reload the page and clear the cache.
I am not sure if I did something really wrong:
1. when I uploaded the favicon, the directory in bluehost was: /public_html. Did I put it in the right place? I did see the other favicon there and I see mine now.
2. I deleted the old one – is this what is causing the problem? I can't sort out why, but it is still not showing up. How can something that isn't there anymore keep showing up?
Ah….technology?
Give it a while.
Hi Amy,
Thanks SO much for this tutorial, I tried it and it worked! Amazing!
I do have a question, however. How do I get my favicon to show up instead of the Bluehost favicon next to my site title in places like Blogger's Blog List? Thanks in advance!
Looks like it's working for me! (Takes a while sometimes.)
Hmmm… yes, I installed mine 2 months ago, it works on my website, but not on blogger blog lists. Trying to figure out where else I need to install it.
When you post a response, your picture always appears next to it. Is that a favicon too? Or is that something else? Do you have a tutorial for that?
When I "renamed" my favicon.jpg, it now says "favicon.ico.jpg." Am I doing something wrong? How do I get rid of the jpg, or do I need to?
I figured out how to rename it correctly! I used your method for cropping and resizing the photo in Picnik, then uploaded it to http://www.favicon.cc/, then saved it again to my desktop.
I'm glad to hear your videos are working again!
Way to go!
So I started watching this video yesterday, and didn't have time to finish. Now I'm here to watch it and You Tube says the account has been terminated. Say it ain't so!
Christy, I'm so glad you left this comment as it is what alerted me to the problem! It led to a 2-day what-will-YouTube-do but alas, all is well and the videos are back up. Yay! They never told me why they pulled my videos in the first place, so not sure what happened, but it's good to go now. Thanks so much!
What a ride!
I'm excited to watch the video now! Glad it all got worked out.
Like Sandy above, It's been over 24 hours and my favicon is still not showing up. You mentioned something about clearing my cache? How do I do that? Would that help?
Well, it took 48 hours or so to show up, but my favicon is working! Maybe that will give some hope to others whose favicons are taking their good ole time.
Thanks for everything Amy…you're a lifesaver! My husband's been watching over my shoulder this past month, and now he's thinking he might create a fantasy sports blog using your instructions.
me again…I'm finally able to get back to working on the favicon. Question: I renamed my favicon file, but it's saving in my computer as favicon.ico.jpeg. Will that still work, or do I need to find a way to save it without the jpeg? It's not showing up on my site and I'm wondering if that's why.
Hi Amy! I've been loving your website. I followed these directions to install a favicon, but it only shows up on my mobile browser (smart phone, Android), and not my desktop computer's browser (Internet Explorer). Any insight?
Sometimes it takes a while. Is it working now?
I installed it about a week ago…so I'm thinking it isn't going to appear? Does it show for you? Maybe my personal computer is just moody?
I see this.
Huh. Guess my computer is just moody. Go figure
Thanks Amy!
Hi Amy,
I have been trying to add a favicon according to your directions. So far, it has not worked. Then, I found the directions under Altahualpa about how to "add a favicon." It seems, that in Internet Explorer, you are not able to add your own image and simply rename it with .ico. Instead it suggests software to convert the jpeg to an ico file. After searching, I found a site that woud do this without a download, and I thought I followed all the directions in the Altahualpa set up, but still no favicon. After spending this much time on it, I'm rather determined to make it happen. If you have any other idea of where I may have gone wrong, I would appreciate your thoughts.
Also, as one other person asked, how did you get your face to appear next to all your comments. Is that another favicon?
I feel like I'm in over my head, but I won't quit now that I've got this far. Thanks again for your very thorough directions and tutorials. I have really appreciate them, and I'm learning so much.
Hi Amy- I uploaded the favicon.ico to my root directory 48 hours ago, and still nothing. Any suggestions?
Hmmm…you might look through your theme files and see if there are any other favicon.ico files in there that might override the one you uploaded.
Argh! What am I doing wrong? I followed the instructions and it isn't showing up. I cleared my cache. Still nothing. I waited 24 hours. Still nothing. What am I missing?
Fire up FTP, locate "favicon.ico" and "View" it. If it's the Atahualpa default favicon, upload your new one to that very spot and make sure you indicate that you do want to rewrite that file. I hope that makes sense.
Ok, so I did that and it shows my favicon. I noticed that my favicon (a piggybank) shows up on the tab when I'm in WordPress and editing or adding a post. But if I just go to my website, http://www.thisissavvylicious.com, it shows the generic Atahualpa favicon?
Try putting your favicon file in both the root directory as well as the image files within your theme files (I hope that's not too confusing).
Yay! Finally! The Atahualpa favicon was called new-favicon.ico. I was not looking for that.
Woot!
here i’m found something may be can help..
http://graphicriver.net/item/favicon-generator-action/741740
Superb blog! Do you have any suggestions for aspiring writers? I'm planning to start my own site soon but I'm a little lost on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I'm completely overwhelmed .. Any recommendations? Bless you!
I don't recommend starting with a free platform unless your budget doesn't allow $10 a month. First, I'd start your own website to use as your online "home" and hub for your writing services/portfolio, etc. I walk through the steps of starting your own blog or website here. Also, check out this post about How to Make Money Writing.
Hey Amy! My favicon shows up whenever I am in my dashboard but not while on my home page. Is there a reason for this? What do you see whenever you go to my site?
Hello! I am trying to install my favicon and it's just not working! I've waited days and checked back in, cleared my cache, and then tried it all again. Is there a plugin one needs to download, too?
No, a plugin is not necessary (although there may be some available, just search "favicon" in your Plugins –> Add new screen). Are you using Genesis? If so, make sure you check out this post. Depending on your theme, the favicon might be in a different file. The post about Genesis should give an example of other places to look.
Hi Amy, Thanks for the response. Prior to my first post, I'd scoured all of your posts on favicons. I'm using Genesis with the Prose child theme. It might also help to add that I use HostGator. If anyone out there who also uses HostGator and/or Prose has some ideas, I'd greatly appreciate it!
Genesis has the favicon installed in a few different folders. I just switch all of them out with my newly created favicon file. So this post -> how to change your Genesis favicon didn't help at all?
I didn't mean to say that none of your posts on favicons were helpful. Quite the opposite! They definitely helped in giving me an idea of what I need to do and how it's done. But I think what you said there is the key… I suspect I'm not switching out the old favicon for the new in ALL the folders. I just don't know which others I need to try. I've already switched in out in the images folder of my Prose and Genesis folders via my webhosting cpanel. Grrrr.
Amazing! Thanks for your awesome instructions! The favicon adds a touch of cuteness on my blog. haha
PS: I'm a Picnik fan, too, but now I use picmonkey.com and it's really similar!
Yay!
Amy, I followed the steps as above and it has been a few days. My favicon is still not showing up. Any advice. Thanks in advance.
Are you using Genesis? If so, did you see this post? If not, maybe your theme has got it in another place, so I'd hunt around some.
I do not use the Gensis theme. However, I did read the post. I put the image file in the child theme directory and in the public_hmtl folder. Still no image after 24 hours.
Thanks Amy, your detailed instructions and screenshots for installing a favicon are great. Got mine to work today with very little trouble.
Glad it worked!
Mine is finally showing up in search results–hooray! But it still doesn't show up on the tab. I've still got the lame bluehost grid thing. It's been a while since I played around with it…followed your instructions and then waited to see if it would appear. No dice. Perhaps I should go back through your instructions and try again….Thanks for helping me get my favicon to show up in searches–a big step in the right direction!
Did you read the post How to Change Your Genesis Favicon? It's a bit different with Genesis.
I don't use Genesis. In fact, I'm still using a random free theme. I want to change it, at least to twenty-eleven or twelve, but am scared b/c I should back up the blog first (right?) and don't really know how to do that…Am hesitant to mess with major tech stuff like that when everything is going pretty well for now. But I do really want to change my header and the look of the blog so it looks more professional. Don't think I can do that with my current theme. Hmmm. I'm sure you've got instructions for backing up and changing themes…