Favicons for everyone!

I think every Web dev know this.

Web development, in particular front-end stuff, can be really though.

There aren’t many standards you can follow when dealing with the evil entities called browsers and so you must often rely on quirks to make your products look good on each one of the over mentioned evil entities.

One example? Favicons.

As often happens in our field, every browsers handle them differently based on their presence and nature (i.e. .ico or .png and dimensions).

The situation gets even worse if we consider the terrible land of mobile…

Trying to get some knowledge about this topic I asked Google and so I found many articles, guides and blog posts that were really helpful.

However the revelation came from a reference I found in the header.php of a WordPress boilerplate theme called Bones.

The reference (together with this one that focuses on touch icons) explains me a lot about the topic under discussion and that’s the reason why I want to share it with all of you. 🙂

I’m not gonna repeat what is written inside the over mentioned references but as a TL;DR I want to present here a snippet that should enable a generic WordPress theme to correctly handle favicons on the majority of the browsers both desktop and mobile:


    <!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-152x152-precomposed.png">
    <!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-144x144-precomposed.png">
    <!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-120x120-precomposed.png">
    <!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-114x114-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-76x76-precomposed.png">
    <!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-72x72-precomposed.png">
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon-precomposed-57x57-precomposed.png">
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
    <!--[if IE]>
    <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
    <![endif]-->
    <?php // or, set /favicon.ico for IE10 win ?>
    <meta name="application-name" content="<?php wp_title('|', true, 'left'); ?>">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-square70x70logo" content="tiny.png"/>
    <meta name="msapplication-square150x150logo" content="square.png"/>
    <meta name="msapplication-wide310x150logo" content="wide.png"/>
    <meta name="msapplication-square310x310logo" content="large.png"/>

Anyone who find something wrong with the snippet is obviously invited to let us (or directly me (:) know so that we can correct it.

Cheers! 😀

Leave a Reply

wpDiscuz