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.
New contributor
Phr4ckPhr34k is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.