Docs

[Scott H]

I mentioned the touch icons in the comments section before buying the theme and you all mentioned you would be adding them. It would be awesome if it made it in to the next update. I would think they are pretty easy to implement? Also, now that I am working with the theme I noticed there is also no fav icon. My clients almost always request that so it would be really nice to see that implemented as well.

Thanks!

[Kory]

Scott,

It is certainly on our development timeline, however this next release will almost exclusively focus on the Visual Composer integration into X as it’s quite extensive.

If you need assistance manually setting up touch icons and favicons, we’re more than happy to help in the meantime. Let us know what you need and we’ll work with you to get everything in order.

Thanks!

[Scott H]

If you could please supply me with the code to manually add these for now until it’s part of the theme that would be great. I would like to be able to load the following icons, plus a fav icon of at least 32×32. Thanks!

Icon for Apple iPhone (57px x 57px).

Icon for Apple iPhone Retina Version (114px x 114px).

Icon for Apple iPad (72px x 72px).

Icon for Apple iPad Retina Version (144px x 144px).

[Kory]

Scott,

There are a couple of ways you could accomplish this, but I believe the following will strike the perfect balance between flexibility and ease of implementation. It might look like a little bit of effort but it’s actually very easy to implement. I merely want to be thorough as to hopefully avoid any issues you might have setting everything up.

X outputs the structure of your pages utilizing various “views.” All views for X are stored in /framework/views/. After that, depending on the Stack you’re using you’ll go into that directory to find its Stack-specific views, or you can find global output views in the /global directory.

In there you’ll find the output for a lot of different sections for the site. The one of interest to us here is _header.php. Copy that file from the /global/ directory and save it somewhere as we’re going to copy it over to a child theme.

Make sure to download our provided child themes for your use here, and if you’re unsure about what they are or how to use them, we have a video in our Video Tutorials section that goes over this in depth. Before you actually upload anything though, you’re going to add some directories, and the _header.php file you copied over just a second ago. Include the following directories into your child theme and place the file like so:

/framework/views/global/_header.php

Once you have done that, you can now edit this file safely without any fear of it being overwritten by future updates. Somewhere in the head element you’ll want to add this:

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="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="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="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="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="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="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

After that, simply place your touch icons in the root directory and you’ll be good to go!

Let us know if you need anything else. 🙂

[Scott H]

Thanks, I’ll give this a try tomorrow. I’m familiar with child themes and how to use them so that shouldn’t be a problem. I know you all are focused on the visual builder, but it would be great to have the ability to easily add these with in WordPress. I can easily see that I may be buying a LOT of copies of this theme over the next year (or more) and I always create custom touch icons.

I would buy 10 copies to start of your theme immediately if you added this – no kidding.

Also, can you tell me what dimensions I should use for this icon?

<!– For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: –>
<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon-precomposed.png”>

Also is there a way to add a fav icon .ico as well?

Thanks!

[Kory]

Hey Scott,

Totally here you on the feature request. It’s coming!

Here’s an in-depth article on favicons that you can read through to better understand what dimensions to use and where: http://mathiasbynens.be/notes/touch-icons

As long as you save favicon.ico in your site’s root folder, it should show up automatically.

Thanks!

[Author]

Posts