-2

I would like to know how to add my upcoming website logo as an icon to every tab. Where exactly does it fit in in the <head> space. Can I have a simple example of a simple html page with this?

Andikan Udoh
  • 1
  • 2

2 Answers2

0

Insert the following code in the <head> section of your pages:

<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">

site.webmanifest:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
pavuk
  • 88
  • 8
0

You are talking about Favicon. You can use a Favicon by adding something like this in your <head> tags.

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

You can place it wherever you want in the <head> tags.

Here's an exaple:

 <!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<p>Page content</p>

</body>
</html>
Enrico Bernardi
  • 1
  • 2