how would I add an apple quick link icon to my site?

  • 1
  • Question
  • Updated 6 years ago
  • Answered
I'm being told by an SEO tool that I need/should have an Apple quick link icon on my site. I was wondering if anyone knew how to do this.

Thanks for your time
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
  • confident I'm going to get a good reply

Posted 6 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Will,

I found steps here. Hope that helps!
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Hi Laura

This is the page that I was using to try and get one made, but can't seem to make it happen. Any further tips at all?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Will,

What exactly are you struggling with? Creating the image or uploading it to the File Manager? Or are you having trouble placing it on your site and linking it up? If you can tell me where you are getting stuck, we'll do our best to help!
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
I've made the image, saved it in image shack, I'm given about 5 different options of URL here. I've tried all of them but can't seem to manage to get any of them to make the image appear.

What/where is the "header section"? I've looked through the code on my page and can't seem to find tag. Is this something else I need to create, or should it already be there like the article suggests?

Thanks
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Will

Using your e-mail address that you use for our Support Forum, I can only find a Yola Free account in our system. Accessing the head section is actually not provided with Yola, but there is a workaround which is available to Yola Silver users.

However, as a Yola Free user you could try to add the code into an HTML widget and place this on every page of your website.

I cannot help you much with Image Shack, but the easiest solution I can suggest is that you upload your image to your Yola File Manager (Site > File Manager), which means that you will store it with your Yola website, and not externally. Once done, republish your website. The URL of your image will be

http://yourdomain.com/resources/yourimage.gif
Replace any detail by your own information. "resources" is the address of your File Manager which you must leave this way.

Then you will need to add this code to an HTML widget which you should place at the very top of a page:
<!-- <link href='http://yourdomain.com/resources/yourimage.gif' rel='apple-touch-icon'/> -->

Leave out the <!-- and -->.

Let us know how that goes.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Thanks very much. Does it have to be on every page to take effect? I've got a lot of pages.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Also ... my image has been saved as a jpg, will this make a differnce? Would I need to convert it to a gif?
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Image uploaded. HTML box at top of page. Text reads

Not seeing anything. ;(
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Also tried it with a gif, still no joy
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Will,

I fear we're making this more complicated than need be. If I understand correctly, you want to make an image link. You already have the image created and uploaded to your File Manager. Assuming this is correct, these steps will take you the rest of the way. Please let us know how this works out for you.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Hi Laura

It's not an image link I'm looking to add, but an Apple Quick Link Icon. Becuase I don't have access to the header HTML, Stephan suggested another method, but I couldnt get it to work. Would I need to add this code to every page of the site for it to take effect?

The link to the page you sent me before is what I'm trying to do, but as I can't access the header, I'm stuggling.

Is this not something you can do unless you are a full member?

Thanks for your time
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Will,

I understand that you are looking to add an Apple Quick Link Icon, but I guess what I'm not understanding is how it functions differently than an image link. If you want to place a button on your page and link it to an external site, the steps I provided you would do the trick. If I'm still misunderstanding, I apologize. You do not have access to the head section of your website with Yola, regardless of your account status, but from what I understood of what you were trying to do, I didn't think it was necessary. Perhaps someone else has some input to share.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Will,

Can you tell us what an Apple Quick Link Icon does? Maybe a reference explaining this function. I also was on the same wavelength as Laura on this one, but seems there is another definition that we're unaware of.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Apple icons are a great branding opportunity for people who use iPhones, iPads, and iPod Touches. Apple allows users to add a quick link to the desktop of their device for easy access. Similar to a shortcut, the quick link lets users come back to your site with one click, right from the home screen of the device. Without any customization, the device will take a screenshot of your site and use this as the icon. Defining the icon that will be displayed is a great branding opportunity.

I think this is a little bit of a misunderstanding. From my seat, it looks like Laura is asking me to insert an image on my home page linked to my home page ... which I don't see the point of. I think I'm missing something here.

The link that Laura suggested originally was the correct thing. It says you need to add the code under HEAD, which I now know, according to Stefan, I do not have access to. What I'm struggling with is that if I can't access the head in the code, how would I go about inserting this code in the correct place? If at all? I'm getting the feeling that Yola basic users will not be able to do this.

Stefan's suggestion was to add the code to every page of the site. I've a lot of pages and wondered if it should show up after adding it just once, rather than adding it to all of them and then finding out that it still doesnt work. Could be a bit of a waste of time.

Another site recommends this code.

and another this

there are a few difference here between codes.

If you upload the image to the file manager in yola, what would be the images URL?

At the moment I'm using

http://a-class-driving.com/resources/...

Any ideas? Am I trying the impossible? It's not massively important, I just thought it would be a nice touch.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Will,

I can't see the code(s) can you wrap them in the opening and closing tags:

Your image url looks OK, it's a standard image URL for a Yola built site
Thank you.

Adding code to the head of your site carries it through for all of your site. It's like a sitewide facility. Adding it to the body of a page will make it available on that page. To carry it through as Stefan has said is to add it to each page you wish it to display.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
That's weird

Here are the codes wrapped in

<code><link rel="apple-touch-icon" href="http://yourdomain.com/resources/yourimage.gif/rsz_the_new_a-class_logo.jpg" />


<link href='http://a-class-driving.com/resources/rsz_the_new_a-class_logo.jpg' rel='apple-touch-icon'/>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
There's a bit missing to this i think as there is no definition of the "apple-touch-icon" link. This link title should have an instruction associated with it as to where to make the link to?
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
What do you think is missing?
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
I've just seen another site offer this code

Looks like everyone has pretty much the same code. I think it's the location of the image that needs to be re-jiggled a little here.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. When you click that icon on the other site, where does it take you? (If anywhere )

Can you also tell me the address of the other site where this occurs and I can trace the link if there is one?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I think I'm beginning to understand this :(

If a user links to your blog then it will display the icon called the "apple-touch-icon" that you have created, on their link. (The penny is dropping. Sorry I jumped in without reading around the topic)
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
It's not an icon on another site, it's html code, so takes you nowhere.

http://blog.karlribas.com/2012/05/how...

This site is telling me that it must be an png image, so will try this.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
Still doesnt work with png file
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Will,

I got it to work with Yola silver by adding the code to the site-tracking header section and it worked on an iPhone perfectly.

I then used another site added the same icon but added the code to an HTML widget and it didn't work. The phone system generated an icon from the page screen shot that it assembled.

Therefore I think it's safe to say that you need Yola Silver to get this working and add the code into the header section of the site-tracking facility which is really a portal to the header. Both sites were mobile optimised by the Yola facility also.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks so much for cracking this case Gop, I was clearly missing a very important piece of the puzzle! So sorry for oversimplifying your request Will.
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
That's OK, I felt as though it was going that way. Guess I'll just have to upgrade. Thanks Gop for investigating my techno issue. ;)