Html Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You cannot use HEIC as a Favicon, Convert your icon using something like: favicon-converter which will give you all of the following formats in 1 shot:

    android-chrome-192×192.png,
    android-chrome-512×512.png,
    apple-touch-icon.png,
    favicon-16×16.png,
    favicon-32×32.png,
    favicon.ico,
    site.webmanifest

    and the code to copy to implement.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search