Different Site icons

[KimAnn]

Hello-
It used to be we could specify a favicon separate from an apple ios icon, an android icon and even a microsoft touch icon. Now the only thing I see is the site identity area of wordpress where we can input one single icon. Am I missing something? Are we no longer able to upload multiple site icons in X?

thanks look forward to a reply

[basanta]

Hi There,

Thanks for writing in!

There is no need of separate icons to be uploaded. If you upload one bigger icon that is 512px size it will generate all other size automatically.

Hope this clear now.

Thanks

[KimAnn]

So what you are saying is it is no longer possible? I see that i can use one image, but myself and all my clients have different favicons and touch icons. My favicon is not meant to be a touch icon and vice versa. It’s not a sizing issue it’s a design issue.

As a perfect example, you want to use a png for favicon with transparent background so you don’t need a white square behind the image. You want the opposite for the touch icons as the pngs look bad here.

Please advise

[jade]

Hi there,

The previous option that was available in the Theme Option was remove because the site icons option is now native to Wordpress but it only uses one site icon.

You could add your specific site icon by adding some additional codes to functions.php file of the child theme.

The code should be:

add_action('wp_head', 'add_code_header');

function add_code_header(){
?>
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="60x60" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="LINK_TO_THE_ICON_IMAGE" />
    <link rel="icon" type="image/png" href="LINK_TO_THE_ICON_IMAGE" sizes="196x196" />
    <link rel="icon" type="image/png" href="LINK_TO_THE_ICON_IMAGE" sizes="96x96" />
    <link rel="icon" type="image/png" href="LINK_TO_THE_ICON_IMAGE" sizes="32x32" />
    <link rel="icon" type="image/png" href="LINK_TO_THE_ICON_IMAGE" sizes="16x16" />
    <link rel="icon" type="image/png" href="LINK_TO_THE_ICON_IMAGE" sizes="128x128" />
<?php
}

Please change LINK_TO_THE_ICON_IMAGE to the full URL of the image files.

You may also remove the lines of code that you do not need the specific sizes of the image icon to be added on your site.

Hope this helps.

[KimAnn]

THat’s very helpful thank you!

[nabeel]

Glad we could help.

Cheers!