Favicon

by Gisle Hannemyr

Getting a favicon

Table of contents

Introduction

The so-called “favicon” was first introduced by Microsoft Internet Explorer in 1999. In its original form it should be a 16×16 pixel Windows icons file named favicon.ico placed in the site's root domain. You may also place it elsewhere and link to with:

<link rel="icon" href="/path/to/favicon.ico">:

Adding a basic favicon

By default, Drupal links to the theme's favicon.ico in the <head> section of the web page. You can change this ny removing the tickmark in front of "Use the favicon supplied by the theme" in the theme's settings. However, I prefer to stick with the default. This results in the following line in the <head> section of the web page, provided the site uses a custom theme named "th":

<link rel="shortcut icon" href="/themes/custom/th/favicon.ico" type="image/vnd.microsoft.icon" />

Then just move the file favicon.ico to the right location.

To make it appear, do a cache rebuild:

$ drush cr

Adding a favicon package

If your website targets mobile devices (e.g. iPhone, iPad, Android, Windows), you need to supply additional favicons. To generate a favicon package for mobile devices, visit https://realfavicongenerator.net to generate a favicon package.

When you complete the process, you will be able to download a zip file containing a whole bunch of icons and an XML file. Extract them all to the site's webroot.

Edit your theme's html.html.twig. Add the HTML-code produced by the generator to the <head>. It should resemble something like this:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Keep the favicon.ico in the theme folder.

Source pixelite.co.nz: Adding favicons to Drupal.

Final word

The classic favicon.ico is a 16×16 ICO file, often served in either 16-colour or 24bit alpha-transparency format. More recently, favicons have been served as 32×32, which is appropriately scaled down in all major and popular-legacy browsers. In IE10 Metro, the 32×32 icon is used in the address bar.

Last update: 2021-12-11 [gh].