CODEWITHSUNDEEP
htmlios.htaccessfavicon
Laurence
Laurence

Reputation: 60048

Apple touch icon in html head or htaccess file

I'm in the process of building a new web application.

I've got my favicon and apple icons all ready to go. I was wondering if I need to include them in the 'head' of my HTML file - or is routing them from the .htaccess file acceptable?

HTML code:

<head>
  <link rel="shortcut icon" href="assets/ico/favicon.ico">
  <!-- Standard iPhone --> 
  <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
  <!-- Retina iPhone --> 
  <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
  <!-- Standard iPad --> 
  <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
  <!-- Retina iPad --> 
  <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
</head>

or just put them in htaccess?

    # Rewrite for Favicons
RewriteRule ^favicon\.ico$ assets/ico/favicon.ico [L]
RewriteRule ^apple-touch-icon\.png$ assets/ico/apple-touch-icon.png [L]
RewriteRule ^apple-touch-icon-57x57\.png$ assets/ico/apple-touch-114-icon.png [L]
RewriteRule ^apple-touch-icon-114x114\.png$ assets/ico/apple-touch-icon-114.png [L]
RewriteRule ^apple-touch-icon-72x72\.png$ assets/ico/apple-touch-icon-144.png [L]
RewriteRule ^apple-touch-icon-144x144\.png$ assets/ico/apple-touch-icon-144.png [L]

Question: Is there any negative to just putting them in my .htaccess file and removing them from my HTML?

Upvotes: 3

Views: 9739

Answers (2)

Gerben
Gerben

Reputation: 16825

Since you are using the same file everywhere you could just use:

RewriteRule ^apple-touch-icon\.png$ assets/ico/apple-touch-icon.png [L]
RewriteRule ^apple-touch-icon-[0-9].* assets/ico/apple-touch-114-icon.png [L]

Also, why not also send the 114x114 icon to all iPhones? What I do a lot is just create one icon of 114x114 and name it apple-touch-icon.png, and place it in the root of the domain. That way retina get the 114px and older will just resize it to half. The only downside is you get a few 404's in the apache error log, but who cares.

Upvotes: 4

Stefan
Stefan

Reputation: 114178

You don't have to specify them if you follow Apple's naming convention.

From Apple's documentation:

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

Upvotes: 7

Related Questions