Is it possible to link all the icons to an external file?

Question

I have different icons for the ipad, iphone and other devices.

Is it possible to make reference to all of them with an external file? or do I need to paste all of these links in the head section for each page?

<link rel="apple-touch-icon" href="img/apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-iphone-retina-display.png">
<link rel="shortcut icon" href="img/favicon.ico">

Do you use a server side programming language? – John Conde Apr 15 '14 at 23:41 — John Conde, Apr 15 '14 at 23:41
Not sure what that means. I'm pasting it in the html. – Erik Apr 15 '14 at 23:47 — Erik, Apr 15 '14 at 23:47

score 0 · Answer 1 · edited May 23 '17 at 10:26

You don't have to declare the Apple touch icons in every pages. There is no "external file" technique, but Apple defines both declarations and file naming conventions. You can use the conventions to avoid extra HTML code.

To do this:

Remove the three link markups which declare the Apple touch icons.
Place your icons in the root directory (ie. /) of your web site.
Rename your icons according to Apple specs: apple-touch-icon-72x72.png, apple-touch-icon-114x114.png, etc.

iOS devices will still be able to find them. A note of warning with this practice: this is okay for iOS devices. But some other platforms, such as Android, also use these icons. And these platforms may fail at using the conventions define by Apple (declarations support is more widespread).

Another note about the icons size: 72x72 and 114x114 are for iOS 6 and prior. Make sure you define Apple touch icons with the right sizes.

Is it possible to link all the icons to an external file?

1 Answers1