Favicons are the little icons that appear next to the website title in your browser’s tabs. They allow websites to be easily recognizable when switching from tab to tab and create brand identity. They are super easy to create and implement – here’s how!
Note: The instructions below are for a self-hosted WordPress site, if you website is hosted on WordPress.com these steps may not work.
Step #1: Create
- Select the image you would like to use for your favicon (oftentimes an element taken from your logo) – making sure the image is a square. Tip: Images with transparent backgrounds look best, so look for a PNG or GIF file.
- Visit Favicon.cc and click on Import Image.
- Click Browse and select the image you would like to use for your icon.
- Select Keep Dimensions and click Upload.
- View your favicon in the Preview pane and if everything looks good, click Download Favicon.
Step #2: Implement
- Log-in to WordPress and click on Media > Add New and upload your new favicon.
- Once finished uploading, click Edit and copy the File URL in the right sidebar (Ctrl + C).
- In the left sidebar, click on Appearance > Editor.
- In the right sidebar, select the file titled Header or Header.php.
- Scroll through the code displayed and locate the line of code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />. If you are able to find the code – replace it with the code below. If you are unable to locate the code, add the code below just after the <head> HTML tag. Remember to replace http://www.INSERT-IMAGE-URL-HERE.com with the File URL you copied in #2 above.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>http://www.INSERT-IMAGE-URL-HERE.com" />