Site Icon

WordPress 4.3 adds the ability for site owners to manage their site’s favicon on desktop and mobile. Site Icons work out of the box, are theme independent, and don’t require theme support. There are four sizes that WordPress supports by default:

  • 32x32px favicon.
  • 180x180px app icon for iOS up to the iPhone 6+.
  • 192x192px Android/Chrome app icon.
  • 270x270px medium-sized tile for Windows.

The public API is very simple:

  • wp_site_icon() displays all available favicons and app icons.
  • get_site_icon_url() returns the url to the current site’s icon, or the default passed to it.
  • site_icon_url() displays an escaped version of the url to the current site’s icon.
  • has_site_icon() returns whether the current site has an icon set up or not.

At this point we discourage theme authors from using site icons as logos in the front-end. It’s unexpected behavior for users since it doesn’t fit the API’s purpose.

Custom Site Icons

Plugin authors can add custom sizes to the site icon feature. To do this, filter the array of available sizes on the admin side and the array of meta tags on the front-end, like so:

<?php

function prefix_custom_site_icon_size( $sizes ) {
   $sizes[] = 64;

   return $sizes;
}
add_filter( 'site_icon_image_sizes', 'prefix_custom_site_icon_size' );

function prefix_custom_site_icon_tag( $meta_tags ) {
   $meta_tags[] = sprintf( '<link rel="icon" href="%s" sizes="64x64" />', esc_url( get_site_icon_url( null, 64 ) ) );

   return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'prefix_custom_site_icon_tag' );

Customizer Controls

Nick Halsey published an article about the new Customizer controls that were introduced for Site Icon. The new controls make it trivial for any theme or plugin author to add custom features that require cropped images. For example, a logo manager. 😉

#4-3, #customize, #dev-notes, #site-icons