How to Make a Favicon for Your Site – A Branding Opportunity 2


Image for FaviconFavicons are very tiny images that are used to identify websites. And, in case you are wondering, the word ‘favicon’ simply stands for favorites icon.

If you look in your browser bookmarks list, for example, your eye will no doubt be drawn to the listings that are preceded by tiny images. Hence the name ‘favorites icon’ or favicon. They provide a quick way for your readers to find your site in their favorites list. As such, favicons provide a great way to build your brand identity. You can also see it to the left of the address bar, provided the website actually has a favicon. So, how do you go about getting one for your site?

Setting Up Your Own Favicon

Favicon dimensions are 16px x 16px and the filename usually has the extension ico, such as seen in favicon.ico, the image that I have used on this blog. Some themes do handle other extensions such as .png and .gif but for the purposes of this tutorial, we will stick to the onnvention of the .ico extension.

You can easily see some examples in your browser. Just load some sites and then look at the tabs at the top- of your browser.

Sample Favicons

The Genesis Default Favicon

If you are using a Genesis theme, as I am for this blog, then you might be wondering how you already have a favicon showing up for your site.  In fact, when I first started using Genesis themes, I naively thought it was somehow picking up my initial. You see the favicon image is by default a G, standing for Genesis of course.

Genesis Default Favicon

To display your own branded favicon, it is just a matter of replacing the default.

Steps to Make a Favicon for Your Site

  1. Decide on the image that best represents your site. In many cases, this is taken from part of the logo or is the logo in miniature form.
  2. Create your image file using an image editor such as:
    • Photoshop
    • GIMP (free)
    • Any other editor that can save a file as type ico .
    • An online favicon generator such as favicon.cc.

    Save the file as type ico.

    If your editor doesn’t provide the option to save as an ico file, then simply save it as a png file. Then convert the image to an ico image using a converter such as convertico.com.

Steps to Upload Your Favicon

If Your Site Has a Default Favicon Already

  1. Using an FTP program such as FileZilla or the File Manager on your server, find where the default faviicon is currently stored.

    It will probably be one of the following:

    • wp-content/themes/name-of-your-theme
    • wp-content/themes/name-of-your-theme/images
  2. Replace the existing favicon file with yours.
  3. Empty your cache, refresh your browser and you should now see your new favicon.
  4. If for any reason you cannot see your favicon (perhaps the default is stored in more than 1 place) then you can follow the code option in the next section.

If Your Site Has No Favicon

  1. Upload your favicon.ico file to your image directory.
    If you are using WordPress, just click on Media from the dashboard and then upload.

    Upload media

  2. Find the image in your media library and get its URL.

    Favicon URL
    Paste it into notepad so that you can easily retrieve it for copying shortly.

  3. You will need the following line of code.

    Replace the URL path to your favicon.ico in the following line of code with the URL that you saved in notepad.

    <link rel=”shortcut icon” href=”URL path to your favicon.ico“>

     

  4. Insert this line of code into your header or footer HTML.
    Or, if you have a Genesis theme, you can just insert the line of code into the header or footer section of the Genesis Theme Settings.

Viewing Your New Favicon

  1. Clear your cache.
  2. Refresh your browser and you should now see your new favicon.

    Favicon in browser tab
    Favicon in browser address bar

An Easier Solution for WordPress Sites

If you are reluctant to tackle the code behind your site, then you can opt for a plugin instead.

The All in One Favicon Plugin is one such option.

 

Genesis Framework for WordPress


Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

2 thoughts on “How to Make a Favicon for Your Site – A Branding Opportunity