Giving Your Website Tab a favicon!

WOW!!! I feel special....and no...not that kind!! Y'all stop!  I can't recall if I've told Y'all or not, but ever since I switched from blogger to WP I've felt completely stupid inadequate.  There is such a HUGE learning curve!  I've slowly learned different aspects of it....and am still.

From the beginning.....I've wanted one of those cute little icons next to my name on the tab....look up! That's right!!! all the way up at the window tab!!! WOOT see that fluer de lis?  Today I'm gonna show Y'all how to do that.....or attempt to...it isn't hard....just kinda hard to explain!....and UNDERSTAND!!  Or at least for me....so if you struggle with it....don't feel stupid! You're not alone....and if you just "get" it....shut it Hush,  the rest of us have to work for the technical stuff!!!

First thing you have to pic a simple icon.....and I DO mean simple!  I tried using my ornate fluer de lis....NOT GOOD!!!...look at it below....the color...and let your eyes blur a tad.....Maybe I don't need to explain to Y'all what it looked like tiny and where you couldn't see the details!!! lol.....It wasn't good!

I tried it on the black background....and with a transparent background....neither looked like anything but that little bird that flies around an angry arm! lol  I really can't put that any nicer!!

Today....I'm not gonna show you how to make your icon's background transparent....that's a whole different post....so if you want yours transparent....stay tuned....I'll do that next....let's just get that bad boy up there next to your name on the tab.

Okay...now that you have your icon picked out....make sure it's a square.  Crop it if it's not....at this point it really doesn't matter what size the square is....just that it's a square.  This is the easy step....go to this site....http://www.prodraw.net/favicon/index.php.  The site will pretty much walk you through getting it into the right size and format.  It doesn't HAVE to be in "ico" format....but from what I'm understanding....it is more friendly to the most browsers.  So....on this free generator....it will take your large file and resize it to the 16x16 pixel ico format file.  Then you can upload that file to your media files in your blog site.

Once you have the ico in your blog media folder....you're ready to do this thang!!!

Pay attention...this is the part that gets confusing....or it did for me...because I shut my whole site down one time by changing ONE line in my editor....so be careful! and....be sure you back everything up PRIOR to changing it....so you can go back if you don't get it right.....but you will!

Okay...(this is in WP)from your dashboard....go to appearence...editor.   Over on the right....make sure your in the editor for your theme.  Find the header....or header PHP file.   Now once you're in there.....look for the  </head> tag.  It looks a tiny bit different in all themes...but you'll find it.....If you don't feel too comfortable....back up before you do this....or really look at where you're at so you can go back and change it.  If you have an icon built into your theme....there will already be a line there that looks similar to this one.....you'll need to replace it with your icon file.

<link rel="shortcut icon" href="http://www.yoursite.com/wp-content/uploads/2012/10/blahblahblah.ico" />

Now....copy and paste this into your code right below the </head> tag.....save it....and either open another tab with your dashboard (this is how I prefer to do it.) or save and come back....go to your media files and find the permalink to your ico file.....copy it.  Now go back to your editor.....now.....look below and see the part I have bolded.....past your permalink in that part of the code.

<link rel="shortcut icon" href="http://www.yoursite.com/wp-content/uploads/2012/10/blahblahblah.ico" />

Now save....and open your site....not the dashboard....just like if your are going to the site that all your readers see.....

WOOT....this is where you should have your REALLY cool new icon next to your name!!!!  I'm not gonna talk about if you don't....cause I'm an idiot...and I did it....if I can....you can!!! But.....just keep trying if it didn't work....there are soooooo many "head" tags....just really look for the "head" only tag.

Well.....tell me if it worked!!!!

Love Y'all!

Tammy

Recent Posts by Deja Vue Designs

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.