4

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 <head>, something like this:

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

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 <head> 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' => 'link', 
    '#attributes' => array(
       'href' => '/sites/default/files/apple-touch-icon-144x144.png', 
       'rel' => 'apple-touch-icon', 'type' => '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.

Improve this question
4
  • You didn't specify your Drupal version, but since you user .tpl.php files I assume it is Drupal 7? You can use the metatag module which comes with the -favicon submodule and there was another module (-mobile I guess). These will allow you to enter paths only, so you'd have to FTP them to somewhere in the Drupal folder. But it is an easy way without overriding any logic.
    – Neograph734
    Commented May 18, 2016 at 17:59
  • 1
    Also note that updating html.tpl.php in the core system module is a bad idea, but you can copy this file to your theme folder and make changes there. This way it will not interfere with core updates.
    – Neograph734
    Commented May 18, 2016 at 18:01
  • @Neograph734 Whoops, yes, added 7 tag. What I meant regarding html.tpl.php was, if Drupal Core or my subtheme updates its html.tpl.php for example to support some new feature added to the HTML spec or seo practice, if I've overridden it, I'll miss out. I do use metatags module, hadn't noticed the favicon submodule, will try it
    – user56reinstatemonica8
    Commented May 18, 2016 at 18:04
  • @Neograph734 I've activated the submodule but can't find any favicons / touch icons related documentation or settings! Beyond that the feature was apparently added in 2014. If you can an answer outlining how to use it would be great :-)
    – user56reinstatemonica8
    Commented May 18, 2016 at 18:10

2 Answers 2

Reset to default
7

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:

favicons

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.

Improve this answer
3
  • Just to be clear - you're getting to the screen depicted by clicking "Override" next to "Global"?
    – user56reinstatemonica8
    Commented May 18, 2016 at 18:27
  • Yes, and if you want different favicons for the different subsections (eg node) you'd have to override those as well.
    – Neograph734
    Commented May 18, 2016 at 18:28
  • You should enable Metatag: favicons sub module!
    – Omar Alahmed
    Commented Sep 11, 2017 at 14:29
0

You can use something like this in your .theme file:

function mytheme_page_attachments_alter(array &$page) {
      $apple_sizes = [57, 60, 72, 76, 114, 120, 144, 152, 180, 192];
    
      foreach ($apple_sizes as $size) {
        $favicon = [
          '#type' => 'html_tag',
          '#tag' => 'link',
          '#attributes' => [
            'rel' => 'apple-touch-icon',
            'sizes' => $size . 'x' . $size,
            'href' => '/themes/gov_pt/apple-icon-' . $size . 'x' . $size . '.png'
          ],
        ];
        $page['#attached']['html_head'][] = [$favicon, 'apple-touch-icon' . $size];
      }
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.