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 The operating system used on iPhones and iPads. up to the iPhone 6+.
- 192x192px Android/Chrome app icon.
- 270x270px medium-sized tile for Windows.
The public API An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 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 A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors can add custom sizes to the site icon feature. To do this, filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the array of available sizes on the admin (and super admin) side and the array of meta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. 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 Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. 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
