Favicons Inside of WordPress
Adding a Favorite Icon / Bookmark Icon / Favicon / Website Icon to wordpress is a lot easier than you may think. But it still does require some work. The first way won’t take more than a few seconds after you have the icon you wish to use. But it is highly suggested you use both methods since it will work better across different browsers and search spiders.
Method 1 - Favicon.ico in Root Directory
This method is the most common method, and a lot of websites that show favicons next to URL’s (YouTube and Google Plus for example) will use favicon method. Instead of having to parse your website’s HTML for the favicon, they just check a single URL of [website]/favicon.ico.
So to get started with this method, you will want / need your favicon. The suggested size is 16x16 pixels. I usually create a set of icons from 16px to 64px so desktop icons, bookmarks, etc all appear nicely.
- Create your PNG Favicon (or ico if your editor supports it). Make sure it uses a transparent background if you don’t need it filled.
- Convert the PNG to ICO using the website at ConvertICO.com
- Upload the .ico file to your website’s root directory (usually /public_html/ OR /www/) and make sure it’s name “favicon”
- Navigate to [website]/favicon.ico and make sure it loads.
Now, this method is great for most uses, but using the next method along with Method 1 is highly suggested for compatibility.
Method 2 - Link Tag to Favicon (png / ico / jpg / gif)
Adding a link tag to your website that also points to the favicon is highly suggested instead of just uploading the favicon.ico file. Also using the link tag method, you can use GIF’s, PNG’s and various other icon formats. I usually point my link tag to a PNG. They both are the same image, but the PNG I have in a higher size of 32px or 64px.
- Create your icon (1:1 ratio / resolution) and save it into a directory you can access easily. For WordPress, place it in the “images” folder of the theme that you are currently using. /public_html/wp-content/themes/yourcurrenttheme/images/favicon.png
- Open up the
header.phpfile in your theme. This file name can vary depending on the developer so you may have to open up a few files to find it. It will include the <head> tags. - Before the closing
</head>tag, include the code below to add your icon.
/* ICO File - Root Directory */
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
/* PNG File - Root Directory */
<link rel="shortcut icon" href="/favicon.png" type="image/png" />
/* GIF File - Root Directory */
<link rel="shortcut icon" href="/favicon.gif" type="image/gif" />
/* ICO File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.ico" type="image/x-icon" />
/* PNG File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.png" type="image/png" />
/* GIF File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.gif" type="image/gif" />