1 minute read

When I ask website owners, “Do you have a favicon.ico?” they often give me a blank stare or a shrug. This little icon is often overlooked, but is a great tip for helping you stand out, and improve your branding. What is favicon.ico? That is the tiny image file you see in your bookmarks/Favourites beside the name of the website. For example, if you’re using a tabbed browser right now, you probably see the 1 surrounded by green in the tab for this webpage, before the words One Day Website.

One Day Website icon<figcaption id="caption-attachment-882" class="wp-caption-text">One Day Website icon</figcaption></figure>

That is the favicon.ico for this website. If you have a WordPress website, the default favicon.ico is the infamous W with a circle around it:

Wordpress W Logo<figcaption id="caption-attachment-878" class="wp-caption-text">WordPress W Logo</figcaption></figure>

But why are you improving their branding, instead of working on your own?

So let’s create your favicon.ico! Intermediate skills are required to complete this process. To get started, you’ll need an image creating or editing program. My favourite free, open source option is The Gimp. Once you have one installed:

  • Create a new image that is 16 x 16 pixels or 32 x 32 pixels in size. (Note, most browsers support .png now, but stick with .ico to ensure compatibility with all browsers)
  • Save the file as favicon.ico
  • FTP this file to your WordPress directory
  • Go to your WordPress Dashboard -> Appearance -> Editor
  • Replace the line that looks like

    <link rel=”shortcut icon” and ends with /favicon.ico” />

    with

    <link rel=”shortcut icon” href=”<?php bloginfo(‘stylesheet_directory’); ?>/favicon.ico” />

  • Once you save this, hold SHIFT while clicking the reload page of your website, and you should see the new icon appear!

Here are the official WordPress instructions. If you get stuck, let me know what I can do to help!

Categories:

Updated: