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 16×16 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
Related Posts

This may seem like a stupid question, but how does one go about finding a royalty free image to use as a favicon? While I would use my logo, I have a feeling it’ll come out looking really smashed and would prefer to look for something pretty simple/straightforward online. Thanks for this!
There are many places that have free pictures and clip art on line. Do a search for free clip art. You could even get into an editing program and just get a pretty letter the the “sits” site. You want something VERY simple and something that will fit in a small square.
This may seem like a stupid question, but how can I find a royalty-free favicon online? I would use the logo for my blog but I don’t think it would look right taken down to size. Is there a way to find something for free online? Thanks for this!
hey pixie girl – another thing you could try is using only a tiny portion of your header. For instance, you could use one of the daisies or a tiny bit of the pixie’s wings [like this: http://www.flickr.com/photos/52834118@N03/8187624449/sizes/o/in/photostream/%5D. That would distinguish your blog’s tab from all the other tabs and look super cute, too. OR if the resolution isn’t good enough, you could find or make a black daisy or pixie wings. Favicons are so tiny (usually 18×18) that it doesn’t have to be perfect. I could even draw something for you if you want (for free, I mean) – let me know.
You could also do just the “P” from pixie if you have access to the font used in your header.
There are also widgets to add the favicon to your blog so you don’t have to mess with code. I use the plugin “all in one favicon”
Good Call Jill…Thanks for helping her!
awwww man – I just typed out some suggestions for pixie girl…but then it got lost. I’ll just tweet you 😉
Nice post – you can also use a plugin to upload your favicon to your site. I used “all in one favicon”
It may not be lost….my comments are acting funny this week.
Just so I understand, I am a blogger and use WordPress, does this mean that I can’t have a button like you have?
Yes….this is a word press site….the tutorial above is for wordpress. 🙂
Hello, I’m hopping over from the SITS site, I just had a question. Since I blog on WordPress, that is different than having your own site is that right? Also, that means I am not able to have a little button right?
I have a dot com….but you still should be able to customize your site…the regular wordpress is the same as self hosted.
I could not get this to work. I kept trying and trying. Then realized you need this piece of code added to the end of what you have in your post: type=”image/x-icon” /> I got this from the site that generated the code.
I tried and tried and could not get this to work. Then comparing your code with what was on the site that generated the little pix, I found that you left this piece of code off: type=”image/x-icon” />
hmmm….I didn’t have to add anything. May be the difference in themes. Not sure it worked like I did it for several of my themes though. Glad you got it to work! 🙂 ~Tammy
Thanks for the tip! It worked and now I have my little thunderstorm on my tab. Awesome!
Awesome! I’m glad it worked! ~Tammy