Favicons and Logos

By Denese. Filed in Computer and Internet  |  
TOP del.icio.us digg

I’m still picking up tips about blogging and running a website and one thing I learned recently was how, and why, to add a  favicon and logo to my site. I decided to post about it with the hope it will help someone else.

What is a Favicon

It’s the little picture beside the web address in your browser.

Highlight Your Brand with a Favicon

What is Favicon.ico and How to Create a Favicon Icon for Your Website

What is a favicon and why should you have a favicon for your website?

How To Create A Favicon

Free Favicons

There are all sorts of free icons and favicons out there…

Free Favicons

20 Free Favicon Sets

Lorelei Web Free Favicons

Free Christian Favicons

…but I couldn’t find any I liked, so I made my own.

Make Your Own Favicon

First I drew my picture in Paint.net (free) using a 64×64 canvas size. I then resized it to 32×32 for my logo and 16×16 for my favicon.

The favicon has to be an icon file and Paint.net doesn’t have the capabilities to save it in that format so I used Irfanview (also free) to open the 16×16 image and save it as an icon.

If you don’t want to do all that, there are some free online favicon generators you can use to create one:

Favicon Tool

Dynamic Drive Favicon Generator

GenFavicon

Favicon.cc Generator

Online Favicon Maker

Adding Your Favicon and Logo to Your Site

Next, I uploaded my images to my site and added the code. I followed these instructions to add the favicon:

How to Create a Favicon

I had a little more trouble adding my logo to the left of my title. The instructions that actually worked for me are here:

Add Your Logo to FTW Themes

I did have to adjust the margins a little and to do that I used the “Edit CSS” function of Web Developer Tools for Firefox, then copied the code into my theme’s style sheet. Firebug can also be used to edit CSS, I just haven’t tried it yet.

Voila!

Let me know what you think. :)

Have a wonderful day,

Denese

Update

I’ve added some free Christian cross favicons here:

Free Cross Favicons

Tags: , ,

Comments are closed.