Retina and Various Sized Favicons for Apple Products

[coralsea]

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.

[stupha]

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.

[dssayer]

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?

[Andrea Rennick]

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.

[coralseait]

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.

---

Coral Sea IT

[Author]

Posts