How to display .ico files in the media library

Question 1

I have added a .ico mime type into my WordPress site and I’m able to upload favicon files. But the media library only displays the default.png image for these images and also in the Customizer. How can I get WordPress to display these favicon images, in the media library and the customizer?

Question 2

Update: It looks like this will be supported in 5.0+. See ticket #43458

The default

This is how the favicon (.ico) files show up in the Media Grid view:

default

This is the corresponding part of the micro template:

<# } else if ( 'image' === data.type && data.sizes ) { #>
    <div class="centered">
        <img src="https://wordpress.stackexchange.com/questions/177981/{{ data.size.url }}" draggable="false" alt="" />
    </div>
<# } else { #>
    <div class="centered"> 
        <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
           <img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
        <# } else { #>
            <img src="{{ data.icon }}" class="icon" draggable="false" />
        <# } #>
    </div>
    <div class="filename">
        <div>{{ data.filename }}</div>
    </div>
<# } #>

where data.sizes is empty for the favicons.

Method 1) Using the `wp_mime_type_icon` filter

The mime type for favicons is image/x-icon.

I managed to display the .ico files in the Media Grid view with:

add_filter( 'wp_mime_type_icon', function( $icon, $mime, $post_id )
{
    if( $src = false || 'image/x-icon' === $mime && $post_id > 0 )
        $src = wp_get_attachment_image_src( $post_id );

    return is_array( $src ) ? array_shift( $src ) : $icon;
}, 10, 3 );

where it’s important here to keep the third parameter of wp_get_attachment_image_src as $icon = false (by default) to avoid an infinite loop!

The favicons are then displayed like this:

Modifed version #1

Method 2) Using the `wp_prepare_attachment_for_js` filter

When we load the media grid view, we make a call to the wp_ajax_query_attachments handler. It performs the following attachments query:

$query = new WP_Query( $query );
$posts = array_map( 'wp_prepare_attachment_for_js', $query->posts );

In this wp_prepare_attachment_for_js function, various information is added to the WP_Post posts and they’re filtered with:

return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );

where the output is the $response array.

We can use this filter to add the missing sizes for the favicons:

add_filter( 'wp_prepare_attachment_for_js', function( $response, $attachment, $meta )
{
    if( 'image/x-icon' === $response['mime'] 
         && isset( $response['url'] )
         && ! isset( $response['sizes']['full'] )
    )
    {
            $response['sizes'] = array( 'full' => array( 'url' => $response['url'] ) );
    }   
   return $response;
}, 10, 3 );

and they will then show up like this:

Modification #2

Notice that we only set the url part and not the width, height and orientation. We could further extend the solution to add this data, with the help of the wp_get_attachment_image_src() function, for example. But I leave that up to you 😉

Some `$response` examples:

Here’s an example of the $response array for the favicon.ico file:

Array 
(
    [id] => 803
    How to display .ico files in the media library => favicon
    [filename] => favicon.ico
    [url] => http://example.tld/wp-content/uploads/2015/02/favicon.ico
    https://wordpress.stackexchange.com/questions/177981/how-to-display-ico-files-in-the-media-library => http://example.tld/?attachment_id=803
    [alt] => 
     => 11
    How to display .ico files in the media library => 
     => 
    [name] => favicon
    [status] => inherit
    [uploadedTo] => 0
    [date] => 1423791136000
    [modified] => 1423791136000
    [menuOrder] => 0
    [mime] => image/x-icon
    [type] => image
    [subtype] => x-icon
    [icon] => http://example.tld/wp-includes/images/media/default.png
    [dateFormatted] => February 13, 2015
    [nonces] => Array
        (
            [update] => 4fac983f49
            [delete] => efd563466d
            [edit] => df266bf556
        )

    [editLink] => http://example.tld/wp-admin/post.php?post=803&action=edit
    [meta] => 
    [authorName] => someuser
    [filesizeInBytes] => 1406
    [filesizeHumanReadable] => 1 kB
    [compat] => Array
        (
            [item] => 
            [meta] => 
        )

)

Here’s an example for the WordPress-Logo.jpg image:

ps: We are specifically interested in the $response['size'] part of these examples.

1

The default

Method 1) Using the wp_mime_type_icon filter

Method 2) Using the wp_prepare_attachment_for_js filter

Some $response examples:

Leave a Comment Cancel reply

Method 1) Using the `wp_mime_type_icon` filter

Method 2) Using the `wp_prepare_attachment_for_js` filter

Some `$response` examples: