Search code examples
htmlios.htaccessfavicon

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?


Solution

  • 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