HTML favicon not displayed

I am trying to add a favicon to my web page. However, the icon does not seem to be displayed properly by my browser. My code looks as follows:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Never pay too much for software licenses</title>

  <!-- Favicons -->
  <link href="assets/img/favicon.heic" rel="icon">
  <link href="assets/img/apple-touch-icon.heic" rel="apple-touch-icon">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">
</head>

This screenshot shows the page in my browser with the default globe icon.

Solution

Favicons do not support the High Efficiency Image File Format (HEIC). Convert your icon to a supported file format, such as JPEG or PNG. Don't forget to change the extension in the href attribute accordingly.