Creating a Favicon for Your Website

May 3, 2016

What’s a favicon, you ask?  Well, a “favorite icon” is the small picture you see to the left of your website page in your browser. A custom favicon is one way to add a bit of polish, customization, and branding reinforcement to your website. Since my name is Missy Mayo, I decided to hone in on the M initials in my name when creating my brand.  My predominant colors are grey and white, so when creating my favicon I simply used an “M” with my brand font. If you go to each page in my site, you will see my favicon right in the browser.

dallas_photographer_missy_mayo_website_homepage

So how do you create a favicon?  It’s easy! Here’s what you do:

1.) Begin by creating a square version of your logo or brand image.  Obviously it will end up being quite small, so I suggest keeping it simple.  One or two letters or a simple image is perfect. I created mine in photoshop very easily. You will want your image to be 32 x 32 pixels, but it may be easier to create the favicon image first at something like 100 x 100 pixels and then resize to 32 x 32.  Save your image as a .png file if you are wanting a transparent background or a .jpeg if you have a solid background.

.jpeg file (I kept the square shape)

M example

 

 

 

 

 

 

.png file (I started with a transparent background and then added a rounded rectangular shape)

M example

2.) The next step is to convert your .png image into an .ico filetype.  There are several free programs out there that do this, but I used this one and it worked great.  What’s nice is that it will create two separate icons for you (one sized appropriately as a desktop icon and one for the browser) but it is all within one file.  Simply check the box that says “merge with a 32 x 32 desktop icon.” Download and save the favicon.

3.) Now that you have your favicon, you just need to add it to your site.  I am a prophoto user on wordpress, so for me the process looks like this:

Customize ProPhoto -> Site Settings -> Site Icons -> Add Favicon

It’s that easy!

website_missymayo_prophoto website_missymayo_dallas

Your website template may be much different than mine, but if nothing else you can always add code to insert your favicon.  The dynamic drive site does provide coding information if you need it.

That’s it!  You can do this in under 30 minutes and it’s an easy way to personalize and differentiate your site.

You Might Also Like

No Comments

Leave a Reply

%d bloggers like this: