Retina and Various Sized Favicons for Apple Products

Community Forums Forums General Discussion Retina and Various Sized Favicons for Apple Products

This topic is: not resolved

Tagged: ,

This topic contains 4 replies, has 5 voices, and was last updated by  coralseait 2 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #94464

    coralsea
    Member
    Post count: 3

    Hello,

    I am wondering if anyone has any experience adding retina ready favicons as well as larger favicons to be displayed as icons on Apple devices. I installed the Heroic Favicon Generator, which I guess just generates them in the different sizes. I moved the small favicon to my theme’s images folder and it is showing up. Can I do the same with the larger images? Do I need to link to them in my code somehow? Or name them something specific? Also, how can I make sure they are retina ready?

    Thanks.

    #96538

    stupha
    Member
    Post count: 1

    Here’s a good resource covering the different types of markup for different devices and icon sizes:

    http://iconhandbook.co.uk/reference/examples/favicons/

    To add them to your child theme, you could use something like this:

    
    remove_action( 'wp_head', 'genesis_load_favicon' );
    add_action( 'wp_head', 'my_custom_favicons' );
    function my_custom_favicons() 
    {
    	echo '<link rel="icon" type="images/png" href="'.get_stylesheet_directory_uri().'/images/favicon-16.png" sizes="16x16">';
    	echo '<link rel="icon" type="images/png" href="'.get_stylesheet_directory_uri().'/images/favicon-128.png" sizes="128x128">';
    }
    

    This removes the genesis default favicon URL function and replaces it with your own. Just add however many extra favicon tags you need in that function.

    #112618

    dssayer
    Participant
    Post count: 10

    Hi CoralSea,
    In terms of generating a “complete” package of favicons you might want to try . It even creates the code for you. The site check tool is also very useful in finding favicon problems.

    But at this time I can’t get the favicons displaying using ‘best practices’ with my genesis child theme. My home url ,http://www.moreso.co, without WordPress works perfectly; different favicons show on different devices. But my blog site in a sub folder, http://www.moreso.co/blog, doesn’t work on iOS and the site check tool says I am missing numerous pnd formats, etc.

    @stupha, would you have any ideas? Could it be file location or simply a child theme issue?

    #112662

    Andrea Rennick
    Keymaster
    Post count: 1212

    You’re using relative links, not absolute ones. Nothing to do with the install in a subfolder or using a child theme.

    The favicon also shows fine for me.

    They can take as long as a month to clear the DNS cache for some people. Click the link in the HTML source.


    **forum signature**
    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    Twitterholic

    #112785

    coralseait
    Participant
    Post count: 105

    I honestly prefer just to use http://realfavicongenerator.net/ . We have no affiliation with the site at, but it does create all / most of the necessary files and code and tbh being lazy about the favicons is fine by me.


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.