How to Add a Favicon to your Website or Blog

Using a website favicon that matches your branding will help with brand recognition. A favicon is the tiny graphic associated with your website that appears:

  1. On browser tabs:
    Favicon in Browser Tab

    Favicon in Browser Tab

  2. In the website address bar on many browsers
  3. In browser bookmarks and favorites
  4. As the application icon on mobile devices (for example, when someone adds your website to their phone’s home screen)
  5. In Pinterest rich pins:
    Favicon in Pinterest Rich Pins

    Favicon in Pinterest Rich Pin

Tips for Creating an Awesome Favicon

  • Try to use a variation of your logo, if possible. At the very least, use a favicon that matches your brand’s colors.
  • Keep it simple! It is going to be teeny tiny – so it can’t have a lot of detail in it.
  • If you want your image to have a transparent background, you will need to first create your image as a PNG or GIF file format with transparency enabled.

For example, my favicon uses the “K” from my logo – with a transparent background:

Favicon with a transparent background

Favicon with a transparent background

 

Below are instructions that will walk you through how to setup a favicon for your website. Just click on these links to jump to the section that applies to your type of website:

Adding a favicon to a WordPress website or blog running WordPress version 4.3 (or later)

WordPress version 4.3 has a new feature that makes adding a favicon to your website SUPER easy.

  1. Create an image that’s 512 pixels wide by 512 pixels high. Save it as a PNG, JPG, or GIF image. 
  2. In your WordPress admin area, click on Appearance > Customize
  3. Click on “Site Identity”
  4. Click on the “Select Image” button. Then upload your image (or select it from your Media library if you previously uploaded it). Click the “Select” button to use that image.
  5. You will now see a preview of your favicon as it will look on a browser tab – and how it will look as a mobile application icon. Click the “Save & Publish” button at the top to save your new favicon!
    Adding your favicon to WordPress Site Identity

    Adding your favicon to your WordPress “Site Identity”

To see your new favicon, you may need to clear your browser’s cache or restart your browser.

Adding a favicon to a WordPress website or blog that’s running an older version of WordPress

Naughty, naughty! Why are you using an outdated version of WordPress?! Go update your WordPress and then follow the instructions above for adding your favicon to the updated version of WordPress. Don’t want to listen to my advice about upgrading WordPress? OK, I’ll still help you:

  1. Create a square image for your favicon and save it as a PNG, JPG or GIF image. 
  2. Use an online favicon generator to convert your image into your favicon icon (in the ICO file format). I have used both http://tools.dynamicdrive.com/favicon/ and http://www.favicon-generator.org/. They are free and work great. After uploading your image, it will create a favicon.ico file for you. Download your favicon.ico file to your computer.
  3. Some themes include a section where you can upload your favicon. If your theme includes that functionality, go ahead and upload your favicon through your theme’s settings – and you’re done! But if your theme does not include that functionality, keep following the steps below.
  4. Use an FTP client to connect to your website. Upload your favicon.ico file to your website’s main (root) directory.
  5. In your WordPress admin area, go to Appearance > Theme Editor. Click on the Header file (header.php) to edit it. (Note: the best way to edit your theme’s files is by using a Child Theme.)
  6. In the Header file, search for the line of code
    that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />.
    If that code exists, overwrite it with the below code. If that code does not exist, just add the following code below the <head> HTML tag. Make sure to use your own website address instead of www.yourwebsite.com:
    <link rel="icon" href="http://www.yourwebsite.com/favicon.png" type="image/x-icon" />
    <link rel="shortcut icon" href="http://www.yourwebsite.com/favicon.png" type="image/x-icon" />
  7. Save your changes.

To see your new favicon, you may need to clear your browser’s cache or restart your browser.

Adding a favicon to a non-Wordpress website

  1. Create a square image for your favicon and save it as a PNG, JPG or GIF image. 
  2. Use an online favicon generator to convert your image into your favicon icon (in the ICO file format). I have used both http://tools.dynamicdrive.com/favicon/ and http://www.favicon-generator.org/. They are free and work great. After uploading your image, it will create a favicon.ico file for you. Download your favicon.ico file to your computer.
  3. Blogger users can follow the instructions here. If you’re not using WordPress (see sections above) or Blogger, keep following the steps below.
  4. Use an FTP client to connect to your website. Upload your favicon.ico file to your website’s main (root) directory.
  5. If your website has its header code saved in a separate file, add the following 2 lines of code to that file. If your website does not have a separate header file, you will need to add the following 2 lines of code to every web page in your website (or every web page that you want to use your favicon).

    Add this code below the <head> HTML tag (making sure to use your own website address instead of www.yourwebsite.com):
    <link rel="icon" href="http://www.yourwebsite.com/favicon.png" type="image/x-icon" />
    <link rel="shortcut icon" href="http://www.yourwebsite.com/favicon.png" type="image/x-icon" />

To see your new favicon, you may need to clear your browser’s cache or restart your browser.

 

Now get going and add a favicon to your website! Then leave a comment below with a link to your website so we can check out just how awesome you are!

Don’t forget it… Pin it! Pin it to Pinterest

Using a website favicon that matches your branding will help with brand recognition. Read this article for tips on creating an awesome favicon plus instructions that walk you through how to setup a favicon on your website!

 

Download my Ultimate Checklist for Creating a Website that helps you Stand Out Online!

Ultimate Checklist for Creating a Website

Woohoo! Your website checklist is on its way! Check your email for your free download.

Pin10
Share2
Tweet