Simplest way to get a full set of favicons and touch icons So you've generated a big batch of favicons, touch icons, tiles and whatever to cover the full range of files a broswer might look for, and the generator you used has helpfully given you a whole lot of code to just drop into your HTML &lt;head&gt;, something like this:

&lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /&gt;
&lt;link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"&gt;
&lt;link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"&gt;
&lt;link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"&gt;
&lt;link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"&gt;
&lt;link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"&gt;
&lt;link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"&gt;
&lt;link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"&gt;
&lt;link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"&gt;
&lt;link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"&gt;
&lt;link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"&gt;
&lt;link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"&gt;
&lt;link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"&gt;
&lt;link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"&gt;
&lt;meta name="msapplication-square70x70logo" content="/smalltile.png" /&gt;
&lt;meta name="msapplication-square150x150logo" content="/mediumtile.png" /&gt;
&lt;meta name="msapplication-wide310x150logo" content="/widetile.png" /&gt;
&lt;meta name="msapplication-square310x310logo" content="/largetile.png" /&gt;


Great. Trouble is, that's not so simple in Drupal, where:


The root site directory is off limits due to updates.
Even after, say, find/replacing content="/ to content="/sites/all/themes/yourtheme/icons/, the standard way to add items to &lt;head&gt; is one line at a time, through a hook in your template.php or similar.


This is a routine task I do for every site. Is there are simpler way than turning every one of those into something like this from a related apple-touch-specific question in a template hook:

 $appleIcon = array(
    '#tag' =&gt; 'link', 
    '#attributes' =&gt; array(
       'href' =&gt; '/sites/default/files/apple-touch-icon-144x144.png', 
       'rel' =&gt; 'apple-touch-icon', 'type' =&gt; 'image/png'
     ),
  );
  drupal_add_html_head($appleIcon, 'apple-touch-icon');


Best  I can think of is overriding my html.tpl.php file, but I'd prefer not to override it if possible, in case Core or my base theme update it due to some new feature or best practice.

Everything  I can find online seems to be only interested in one favicon and one Apple icon, which isn't a problem.

There are custom modules for this, like Responsive Favicons, but they have issues reporting that some icons don't get picked up, and it seems an overcomplicated approach to simply adding some icons.
If you use the metatag module you can use the -favicon and -mobile submodules.

If you visit admin/config/search/metatags (Configuration > Search and Metadata > Metatags), you can alter a metatag set. And you'll get this section:



Here you can enter the paths to the files relative to your Drupal root. eg. sites/default/files/metatags/favicon.ico. Depending on where you've uploaded these files. (You need FTP for this.)

The -mobile submodule will add MS Application icons and in another section.