Branding is something that companies use to keep their image cohesive and memorable to consumers. You may notice that with successful companies, brand imaging is the first thing you remember when someone asks you about their product or service.

Your job when a potential consumer comes to your site is to make them remember you and catch their attention. Something that you see on websites everywhere now, is a favicon. The favicon is the small icon you see next to the website title in the browser when you open a site in the tab. Don’t let yours be the brand of your website theme! Make it your own.

favicons

A lot of people wonder, how do I create a favicon for my site? It seems tricky, and most wonder if they’re going to have to actually create a tiny image for it. In most cases though, you can use your existing logo to create a functional and stylish favicon that is memorable to your consumers.

The Basics When Setting up a Favicon

Because of the way these small images are actually displayed in the browser, the image you’re working from should be a complete square. You might consider using the avatar you use for social media, or cropping a portion of your logo.

Some people go less directly, and find a small image that can fit into a square that fits their brand. For example, if you’re a vegetarian gardener, maybe you would have a small carrot as your favicon.

Quick Favicon tips:

  • The image you start with should be a square image, equal width and length.
  • It should be simple and distinctive.
  • You can use a cropped version of your logo, to achieve this.

Video: How to Crop and Resize a Portion of your Logo to be a Favicon

Let’s assume that you are pulling a square portion of your logo to use as your favicon.

So, your first step is deciding what portion of your logo you’d like to use for the favicon. A lot of people have begun using their first letter, or the image part of their logo (if there is one). Other times, if their brand has two “words”… for example “webmaster,” it could be broken into “web master.” For that they might use “wm” in the favicon.

Once you’ve decided what parts you want to use, if needed, cut out any additional portions of the image using an image editing tool. GIMP is a free one if you don’t already have one installed.

In GIMP, you use the rectangle selection tool to cut out the piece if your logo you intend to use. Make it a square of any dimension and you’re in business.

Once the square has been created, at the top of GIMP look for “Image” and choose the “Scale image” option. Once you’ve done that, you want to resize your image to 16×16 pixels, and save it as “favicon.ico” – this should be all lowercase and look exactly as it’s typed (without quotations).

Adding Your Favicon to Your Site

Creating your favicon.ico image is only half the battle, but the upside is that the other half doesn’t take much effort at all. Adding a Favicon to your site may seem overwhelming but I can assure you that it’s not.

You will have to mess with a little bit of coding (in some cases), but it’s only one line that needs to be added.

Many content management systems (CMS) offer an options panel to upload a favicon and you are good to go. But when not working with a CMS, or if the option isn’t there, you will need to modify the header of your web site files. Preferrably you would be making this modification in a templated file so that it is used on all pages of your site.

Here are the basic steps for adding the favicon to your site:

  1. Upload the favicon to your root directory. When uploaded there, the link to the image will be http://your-site-name.com/favicon.ico.
  2. Edit the web site files. Like previously mentioned, this is best when editing a header file in a templated system. However, as long as you get it on the most important page, the home page, you are doing alright.

    Locate the “head” tags in your HTML and place the following line within them:

    That’s all it really takes! You should now see your favicon loading next to your site name in your tab (depending on the browser) when you visit your website.