HOW TO ADD A FAVICON TO YOUR WEBSITE

One of the essential elements of a website is the favicon (aka “website icon” or “site icon”). Your favicon plays a big role in your branding. And it also allows website visitors to quickly recognize your website. So I highly encourage you to add one to your website or blog.

Don’t know what a favicon is? It’s 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. In search engine results
  5. As the application icon on mobile devices (for example, when someone adds your website to their phone’s home screen)

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

WordPress has a 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 General Settings > Site Identity
  4. In the Site Icon section, 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 “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”

*Note: 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 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 “yourwebsite”):
    <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" />

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

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

How to Add a Favicon to Your Website or Blog