How to change your website’s “fav icon”

What’s a fav icon? In your browser bar, there’s a little image next to the URL:

fav-icon-before

 

This image will also appear in browser tabs and in the bookmarks folder. Customizing it is a nice touch and helps readers find your site easily. The Genesis theme by StudioPress uses a black box with a G by default.

To create a fav icon, you can use an online generator like this, or you can create a 16px by 16px image in Photoshop. Save the file as “favicon.ico” (the name must be that, or it won’t work). That isn’t a default file type in Photoshop, so you can save it as a .png or .jpeg and just change the file extension afterward by renaming the file. Next, you’ll upload it to your WordPress theme’s folder on your server.

To do that, you can use an FTP client, or the File Manager from your web host’s cPanel (I use InMotion Hosting).

For this instance, I’m going to use the cPanel.

  1. Click on “File Manager” and select “Web Root (public_html/www)”
  2. In my case, I had to navigate to the Genesis theme folder’s image folder (/wp-content/themes/genesis/images)
  3. Click “Upload files”
  4. Click “Choose file” – then browse your hard drive for your “favicon.ico” file and select it
  5. It’s a small file and uploads quickly.
  6. Close that window.
  7. I also had to upload the file to my child theme’s image folder (/wp-content/themes/epik/images) — If you’re not using a child theme you can skip this step.
  8. Now, go back to your site and refresh the page (Cmd-R on a Mac, or F5 on a PC)
  9. You should see your new image in the toolbar.

 

One more tiny thing checked off the to-do list! I still have a long way to go.

fav-icon-after

Leave a Comment