[180xParticipant]

Hello, After saving the .ico and pasting in the URL in Customizer > Site Icons nothing is happening. Im not sure what I am doing wrong.

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[bethw789Participant]

The URL had me stumped at first, but then I realized how simple it is with X. Upload the image to your media library, then copy the URL, paste in the site icons section of the customizer. AWESOME!

[RupokMember]

Glad that you figured it out already. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[saski23Participant]

Hi, I am getting really confused by this, why is it not possible to simply upload a favicon image to be used (like in other themes), rather than going through a convoluted process as described above?

I am very new to x themes, bought it today as my brother recommended it to me, and after just a few hours, am struggling to understand why it is considered so great as so many ‘simple’ functions (like adding a favicon, getting my tagline included in the title, including a background image in the header area, adjusting font sizes for headers etc) are complicated to add – where previous themes I’ve used have had these as standard).

Am I missing something really basic? Is there a tutorial for newbies like me?
Please help – thanks!

[Rue NelModerator]

Hello There,

Thanks for updating this thread! Of course, it is possible to upload the favicon image of your choice. Simply go to your customizer, Appearance > Customize > Site Icons. You can also upload the icon for touch devices (iOS and Android) and a tile icon for Microsoft devices too! The favicon path may not give you any button to upload any image, you should know that you can use the “Select image” button to load the images from your media gallery and you can copy the path of the image you have uploaded.
http://prntscr.com/a7ldfy
http://prntscr.com/a7ldsq

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[timangerParticipant]

I just wanted to upload and set the “favicon” for my site. I appreciate Chris’ full description above for using an FTP program to upload the file, but I wanted to first try the media library route — and it worked!

1. Upload the favicon to the media library
2. Click “edit” on the favicon to get to the page where you see the full file-location
3. Highlight and copy the entire file location for the favicon
4. Go to the Customize – Site Icons section and past the file-location for the favicon

Voila! It worked!

Tim

[RadModerator]

Glad it worked, and thanks for sharing. It should work as long as the full URL is added 🙂

[tomrogersParticipant]

The customizer does 3 different favicons/icons, but there are many other options. The favicon generator I used (http://www.favicon-generator.org) came up with this list which I’ve pasted below. It says to “Include the following code in the head of your HTML document.”

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

After completing the above work, I can only see the 16 x 16 favicon on my Mac, but nothing shows on my iPad. How can we cover all the other formats?
Tom

[ZeshanMember]

Hi Tom,

It’s in rare cases that a user needs all these sizes. Normally, one or two sizes work fine on all devices. As the aspect ratio of these sizes is same, you can use the largest icon size image in the Customizer, and it will work on every device.

However, I’m not sure why your custom code is not working. Please open a separate thread and provide us with following login credentials in a private reply so we can take a closer look to your setup:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Note that we cannot guarantee a proper solution here because this involves custom development.

Thanks!

[tomrogersParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

The favicon is showing up on my end. Try to clear your mobile phone’s browser cache.

If you prefer the http://www.favicon-generator.org/ given codes. You can add the code below on your child theme’s functions.php file.

function my_custom_head_output() { ?>

   <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
 <?php } 
add_action( 'wp_head', 'my_custom_head_output', 5 ); ?>

Hope it helps, Cheers!

[tomrogersParticipant]

Thanks. If I were to do this, where would the image files be uploaded to?
Would I upload them to the media files, or to a folder in my root directory, or just directly in my root directory?
Depending on the answer, how would I adjust the code to find the images?

[Paul RModerator]

Hi,

You can upload it in your child theme in wp-content/themes/x-child/favicons

You need to create the favicons directory.

After that change your code to this.

function my_custom_head_output() { ?>

   <link rel="apple-touch-icon" sizes="72x72" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="http://tomrogerswebdesign.com/wp-content/themes/x-childandroid-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/favicon-16x16.png">
<link rel="manifest" href="http://tomrogerswebdesign.com/wp-content/themes/x-child/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="http://tomrogerswebdesign.com/wp-content/themes/x-child/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
 <?php } 
add_action( 'wp_head', 'my_custom_head_output', 5 ); ?>

Hope that helps.

[garcoscParticipant]

This reply has been marked as private.

[Author]

Posts