Can You Change the Tab Icon for Your Website?

Today’s Website Wednesday topic is the Icon that shows up on the Tab for your website.

This is something that had bothered me since I switched to the Genesis Theme for my website.  I hated that the Tab icon for my website was the Genesis G.

I am not a very techie person, I am willing to admit it.  I don’t know HTML or CSS and I am definitely not a Graphic Designer (and NEVER will be)!

Attempting to design my own website while I build my business has definitely come with some frustration and confusion.

So many of the tutorials and help forums that I have seen assume that you have some fundamental understanding of certain elements, that I most definitely do not understand.

I was so pleased when I found this website that helped me to create what I needed to change that Icon myself, so I thought it would be something good to share with you this week for Website Wednesday.

Hopefully if you are reading this you have a WordPress.org website, because as I said, I am not a super techie person and I have only attempted this on my WordPress site.

So I learned that the Icon in the Tab is called a Favicon and is typically only 16 x 16 pixels in size.

The file name for the image that is stored for your Favicon is favicon.ico.

You can create a 16 x 16 image named favicon.ico from any image file that you have on your computer using this website http://tools.dynamicdrive.com/favicon/

Don’t worry, it’s free.

Once you convert your image to a favicon.ico file you just need to use your FTP program to upload the new file, replacing the file that is currently stored for your website.

I selected my new favicon.ico file in my computers directory in Filezilla (the FTP program that I use) and dragged it to my images folder.  I can’t gaurantee that your file directory is set up the same as mine, but I found my website’s favicon.ico file in my public_html folder, then wp-content, then themes, then picked the folder for my active theme, then images.

I hope you have found this helpful.

I would love to hear from you!  Have you made any changes to your website that you are really proud of?

Comments

  1. Hi
    Also, fyi you can use the Genesis Favicon Uploader plugin to add/change the favicon! Just search for it in your plugin section, download it and activate then upload your 16×16 favicon.ico file. :)

  2. Great article and a great idea to change the icon to so it will market you! Most people don’t know this or how to and you have shown and explained them out to make this change. Thanks great job. I appreciate you for doing this.

  3. Cool information. I studied graphic design in college and recently completed 96 hours of training on HTML and CSS online. Very informative and I loved it!! One of these days I will sit down and design a new site from scratch using some of the tricks I learned. I did all the design work on my site on blogger and had a lot of fun with it. That was before the html/css courses. Visiting you from The Ultimate Blog Challenge!!

    Kathy
    http://gigglingtruckerswife.blogspot.com

    • melissa says:

      Wow, 96 hours! That is very impressive! I’m going to check out your website now so I can see your design work. Thanks for stopping by!

  4. I’m like you and I too hated that all so common BIG E that shows up and last summer went through the steps of figuring out why some site have the E (for Internet Explorer) and others didn’t – like Facebook with their blue f. I love it because when you have a doesn’t pages open in your browser and you’re looking for a certain page, it’s so much easier to find when it has it’s own unique favicon.

    At first glance I thought your tiny favicon was some kind of “bug” with all sorts of arms and legs, but I liked it because it had great colors. Then I scrolled to the top and saw it’s actually a mini version of your logo.

    Now that logo – WOW – that’s amazing. The letter M and W and then “you” just dancing through life as Melissa Wright. That is a truly amazing, eye catching logo. I really really like it. Good job of design!
    Erica from http://startingafter50.com

    • melissa says:

      Thanks Erica! Not many people notice the M and W. I had the logo done on http://48hourlogo.com which worked out really well for me because I wasn’t clear on what I wanted up front. It was great to see a bunch of design concepts and to have the opportunity to ask for changes while I decided which design I like the most.

      I completely agree with you about making the tab easier to identify at glance. It has been a couple weeks since I changed my Favicon but it still makes me smile to see it!

      Thanks for stopping by!

Speak Your Mind

*

CommentLuv badge