Skip to content

Instantly share code, notes, and snippets.

@morgyface

morgyface/favicons.php

Created July 9, 2019 13:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save morgyface/cacb65257cb90399a52227667a020f52 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save morgyface/cacb65257cb90399a52227667a020f52 to your computer and use it in GitHub Desktop.
Download ZIP
WordPress | Favicon list function
Raw
favicons.php
<?php
function add_favicons() {
/**
* Looks in the theme's favicon folder for ico and png files, if files exist
* a list of favicons will be generated.
*
* To cover most devices, copy four files into the folder:
* A standard favicon.ico which is a compilation of three PNG's 16, 32 and 48.
* Two Apple device favicons favicon-152.png and favicon-120.png
* A Microsoft favicon favicon-144.png
* All icons should have a height equalling the width.
*/
$favicon_folder = 'favicon/';
$favicon_directory = wp_normalize_path( get_template_directory() . '/' . $favicon_folder );
$favicons = glob( $favicon_directory . '*.{ico,png}', GLOB_BRACE );
if( $favicons ) {
$output = '';
foreach( $favicons as $favicon ) {
$path_parts = pathinfo( $favicon );
$favicon_ext = $path_parts['extension'];
if( $favicon_ext == 'ico' ) {
$rel = 'shortcut icon';
$sizes = null;
} else {
$dimensions = getimagesize($favicon);
$favicon_width = $dimensions[0];
if ( $favicon_width == '152' || $favicon_width == '120' ) {
$rel = 'apple-touch-icon-precomposed';
$sizes = 'sizes="' . $favicon_width . 'x' . $favicon_width . '"';
} elseif ( $favicon_width == '144' ) {
$name = 'msapplication-TileImage';
$rel = null;
}
}
$favicon = get_theme_file_uri( $favicon_folder . basename( $favicon ) );
if( $rel ) {
$output .= '<link rel="' . $rel . '" ';
if( $sizes ) {
$output .= $sizes . ' ';
}
$output .= 'href="' . $favicon . '" />';
} else {
$output .= '<meta name="' . $name . '" content="' . $favicon . '">';
}
$output .= PHP_EOL;
}
echo $output;
}
}
add_action( 'wp_head', 'add_favicons' );
@morgyface
Copy link
Author

morgyface commented Jul 9, 2019 •
edited
Loading

Favicon for your WordPress theme

I created this as having a list of dead favicon in my header.php file was bugging me.

The concept is:

  1. You create a folder called favicon in your theme;
  2. You add the above code to your theme's functions.php file;
  3. You create favicon files and copy them into the folder; and
  4. The function then automatically creates a list of the favicons in the <head> of your pages via wp_head.

This function works best with the following range of favicon files:

  • favicon.ico - A compilation of 3 or 4 images. Typically 16 × 16, 32 × 32 and 48 × 48. Some like to include 96 × 96 also.
  • Two favicon files for Apple devices - favicon-120.png and favicon-152.png
  • A favicon file for Microsoft devices - favicon-144.png

Using the above naming convention i.e favicon-size is a good idea but not essential as the function goes off the image dimensions not the filename.

I manually include a tile color meta tag to:
<meta name="msapplication-TileColor" content="#FFFFFF">

I use this online tool to generate my .ico file. I've also thought about using this clever library to generate the ico file from the png files but it'll have to wait, I've got proper work to do.

I've recreated this as a less integrated function right here

The origins of both these are here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment