One of the new features in WordPress 4.3 is a Site Icon (also known as favicon). It allows you to specify what icon should be associated with your website. This displays in browser tabs and mobile bookmarks.
Just go to Appearance > Customize > Site Identify and you’ll find a Site Icon uploader in the left panel. If you upload an image, WordPress will automatically resize it to the proper sizes and insert the code into your page for browsers to see it.
Genesis has a similar feature built-in (although there’s no UI for it). In Genesis, if you have a favicon.ico (or .gif, .png, .jpg) in your theme’s /images directory, Genesis will use that as your favicon and add code to the page for browsers to see it. If you don’t specify one in your theme, the icon defaults to the favicon found in Genesis, which is why you see so many Genesis websites with the “G” as their favicon.
Genesis 2.2 and later will have this feature disabled already, but if you want to use WordPress’ Site Icon with Genesis 2.1 you should disable the Genesis feature so you don’t end up with two icons in your site’s code. Simply add this to your child theme’s functions.php file:
| <?php | |
| /** | |
| * Disable the Genesis Favicon | |
| * @author Bill Erickson | |
| * @link http://www.billerickson.net/wordpress-site-icon-with-genesis | |
| */ | |
| remove_action( 'wp_head', 'genesis_load_favicon' ); | |
Carlo says
Hi Bill. Beta testers don’t have to do this because their version of Genesis does it automatically. It will be rolled out to all users in the 2.2.0 update.
Bill Erickson says
Updating the post to note this.
Nir Rosenbaum says
Thanks Bill for this update.
Before 4.3, I implemented your advice found in here – https://www.billerickson.net/code/multiple-sizes-favicon/ in order to have a high resolution favicon.
In WP 4.3, the required favicon size is 512px, if am not mistaken.
So, based on this post I understand that it is better to remove Genesis favicon or your previous code ( https://www.billerickson.net/code/multiple-sizes-favicon/), and use the default WP faviocn with a size of 512px ?
Thanks
Bill Erickson says
Yes, I recommend using the WordPress Site Icon. It provides a larger range of favicon sizes (goes up to 512px), provides an easy-to-use interface for changing the favicon, and in the future as there are new uses for favicons, WordPress will update the Site Icon code so your site automatically supports them.
Nir Rosenbaum says
Thanks Bill,
I also found out that there are two useful filters that WP provides if you want/need to add custom size on top of the 4 sizes that WP generates.
The filters are: site_icon_image_sizes and site_icon_meta_tags
I found this example: https://gist.github.com/nirrosenbaum/68c1e8178ac4f06d8f36
Valerie says
Are you using the new site icon here on your site? (it doesn’t look like it)
With a ‘coming soon’ change to Genesis, I’m hesitant to add code which will throw an error when the update comes.
I dislike settings that upload what I consider to be theme elements into the uploads directory. Drives me nuts because they are harder to reference. For instance, I like to use the following function to add the favicon to the admin area:
// add a favicon for the admin area
function cdg_admin_favicon() {
echo ”;
}
add_action(‘admin_head’, ‘cdg_admin_favicon’);
Once I implement the site icon functionality it won’t work (unless I also manually upload the favicon to the theme’s images folder anyway). I suppose he file name is stored in the database and can be referenced with a query, but that’s just one more thing to load. Hmph. Maybe I’ll just start adding my own dashboard icon to the images folder and brand it that way.
Bill Erickson says
No, I’m not using it on my website currently, since 4.3 wasn’t out when I built my site and I haven’t bothered to make changes to the theme since. I am using it on the client site I’m building this week.
This will not cause any errors when you upgrade to Genesis. Genesis currently has (and will always have) a function called genesis_load_favicon() hooked to ‘wp_head’. You are removing this function. When Genesis 2.2 comes out, this function will still be there but it will do nothing if the site has a Site Icon. The code I listed above won’t negatively affect the site in any way, but will positively affect the site if you use a Site Icon with Genesis 2.1.
If you use the Site Icon in WordPress, it adds the favicon to both the frontend and the backend of your website. You will no longer need to hook into admin_head and add it yourself.
Or you can keep doing it the way you have been doing it – uploading a favicon into the theme, letting Genesis add it to wp_head for you, and you manually add it to admin_head.
Either way will work.
Valerie says
Thanks! I appreciate the clarification. It will simplify things.
Nancy Seeger says
For the new Site Icon feature… what are you thoughts on upping the dpi to say 300dpi? Are there any limitations on which file formats with older browsers? I prefer 24 png when possible but not sure that is supported.
Bill Erickson says
Do you mean DPI (dots or pixels per inch) or just pixels? WordPress recommends a 512×512 image so that’s what I’ve been uploading. But any image you upload online should be 72 dpi as that’s the standard screen resolution.
Nancy Seeger says
Thanks Bill. I meant for pleasing the retina screens since sometimes a 72 dpi image can look less than wonderful for those devices. I did try 300 dpi last night, keeping the image at 512 x 512 pixels. Looked pretty good resized for my retina MacBook Pro and iPhone 6. Size of the image was only 22KB although I would like to get that down.
Neil Brown says
Great piece of information, thanks
Matt Whiteley says
Great article as always Bill. Thanks.
Toby says
A 512 x 512px icon will rarely look good at 16 x 16px – at this small size it is usually necessary to adapt the design and re-align pixels. WP’s new site icon feature seems imperfect to me.
Sindre says
This does not work for me. I add this: remove_action( ‘wp_head’, ‘genesis_load_favicon’ ); right after the opening tag. But still the favicon is there.
Bill Erickson says
Have you viewed the source of your page to confirm it’s still on the page? Favicons can be hard to clear from cache for some reason.