Blogger Hacks, Categories, Tips & Tricks

Wednesday, September 07, 2005
Blogger Hacks - The Series: Graphics

I have said previously that I am in no way to be confused with Mr Photoshop. I have the graphic-design abilities of a sleepy 2 year old. Here, then, are some tools that can help you to create unique graphics, and add those graphics to your blog even if you're artistically challenged.

Button Makers:

You may have noticed that there are two-tone buttons on every website in the entire world at this point, or so it appears. It's a good way to get a distinctive, uniform sized logo that other sites can use when they link back to you. For the largest collection of these I have yet encountered see Steal These Buttons, a repository for button-kind.

There are a number of sites that offer automatic button generation. They allow you to pick the color of each field, the color of the border, and the text to be displayed in each section.

When you've generated your button, you'll need to save it and upload it to the web, then link to it from your blogger account to show it on your template. If you're lucky enough to have your own server, you can of course store the image there.

Logo / Banner Makers:

Want more than the skinny button? Need an image that has real impact to introduce your blog? Check out these logo / banner makers. Limited design skills required, and quality output possible.

Favicon:

This is as close to hackery as this particular post is going to get. There's a bit of code for the head of your blog, but first you'll need an image. Check out these sites:

Then see Wikipedia for the what / why / how.

Once you have an image, saved and uploaded to a webspace of your choice, the code for the head of your template is as follows:

<link rel="shortcut icon" href="http://example.com/favicon.ico" />
<link rel="icon" href="http://example.com/favicon.ico" />

Replace "example.com" with the URL of your webspace, & paste the code between the head tags of your blog. The favicon will appear in the address bar of the majority of browsers, and in the bookmark lists of people who bookmark your site. You'll be branded!!

I recommend picking a color scheme / font style &c, and then using these tools to develop a "house-style" for your blog. Try the tools out, & let me know how they work for you.

See other posts in Blogger Hacks: The Series

Posted at 4:01 PM by John.
22 Comments:
<    >
Blogger Ariel said...
Any advice on how to find a webhost for a favicon when using the blogger platform? My regular (free) image host won't accept the ico format.

BTW, I recently managed to implement tags, thanks to Freshblog. One more satisfied customer...

<    >
Blogger titanium said...
can't use ico?
howto use a png, hosted on flickr
note it doesn't have to be flickr, it can be anything really.

<    >
Blogger Morgan said...
you can also 'trick' it out and make an ANIMATED favicon by renaming a gif (of the same 16x16 format that .ico are made of) by simply changing the file extension from .gif to .ico. i did it for my site at memeshift dot com, by for some reason it only works on PCs...

<    >
Blogger noodle said...
Sorry to be a dumbass, but where are the 'head tags' in my template?

I really can't make sense of html, so please be specific.

Thanks in advance!

<    >
Blogger John said...
Noodle,

Your template is divided into 2 parts... The head is the stuff that the computer can see but isn't on the monitor, the body is what's on the monitor. You should see html & head as pretty well your first 2 tags, & then, later a closing /head tag followed by an opening body tag that marks the transition between computer / server stuff & cool stuff that people can see.

<    >
Blogger deb said...
you know, i looked around everywhere and your description and code was the best i found!

thank you!!!

<    >
Blogger Maii said...
Myfilestash.com is a good place to host the ico format...

<    >
Blogger Deezee said...
excellent info, and thanks to maii for pointing me to myfilestash!

<    >
Anonymous Anonymous said...
Likewise, I didn't know about myfilestash...what a great resource! Thanks for the code and whatnot as well. Life is better with my favicon!

<    >
Blogger M Fahmi Aulia said...
it works...
thx.. :)

<    >
THANK YOU! I googled and found this ... it helped a lot! :-)

<    >
Blogger LJP said...
Thanks very much. I have been trying for ages to get this to work. Your description is simple and it works!
Cheers

<    >
Blogger :: Suzanne :: said...
you rock! Thanks

<    >
Blogger SmellWing¬© said...
Gracias...er...Thanks!

You have the corrected code, is the only works well!

I'm added my icon thanks to you on my blog (On el blog del Smell, becouse I have 4 blogs, lol).

it's work perfectly on a PNG format, 24-bits and transparent background, anyway.

<    >
Anonymous Anonymous said...
i hosted on blogger... by posting to draft... eg. save, not publish... before pressing done... find the url of the icon.... and feed in the adress as described. I used a .png and it worked...
http://www.mitchatnot.com

<    >
Blogger James said...
nice! this favicon is now fully operational

<    >
Anonymous Anonymous said...
If you are hosting the favicon.ico on googlepages, is not going to show it. Simply rename it and will work! :) Renamed mine to icon.ico and works fine on blogger too!
Nice blog! ;)

<    >
Blogger Brian said...
Thank you so much I couldn't get it to work with Flickr or any other host so I decided to dust off my ancient Geocities account and what do you know it worked flawlessly.

<    >
Anonymous abel said...
thank's for your stuff.
cheer's

<    >
Blogger adubtheengineer said...
how do you post to draft in blogspot?

<    >
Anonymous Isu said...
hi,

thnx, its workd 4 me....!

great...

<    >
Blogger Lanna said...
Nice blogger hacks! I find this post is similar to yours that your readers might find it helpful too:

How to Add a Favicon to Your New Blogger?

Links to this post:

Create a Link


eXTReMe Tracker