Scribd
Upload
17 views

Favicon HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

Favicon HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Favicon

❮ PreviousNext ❯

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML


You can use any image you like as your favicon. You can also create your own
favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high


contrast.

A favicon image is displayed to the left of the page title in the browser tab, like
this:

To add a favicon to your website, either save your favicon image to the root
directory of your webserver, or create a folder in the root directory called
images, and save your favicon image in this folder. A common name for a
favicon image is "favicon.ico".

Next, add a <link> element to your "index.html" file, after the <title> element,
like this:

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

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Now, save the "index.html" file and reload it in your browser. Your browser tab
should now display your favicon image to the left of the page title.

ADVERTISEMENT

Favicon File Format Support


The following table shows the file format support for a favicon image:

Browser ICO PNG GIF JPEG SV

Edge Yes Yes Yes Yes Yes

Chrome Yes Yes Yes Yes Yes

Firefox Yes Yes Yes Yes Yes

Opera Yes Yes Yes Yes Yes

Safari Yes Yes Yes Yes Yes


Chapter Summary
 Use the HTML <link> element to insert a favicon

Exercise?
In which HTML element is the Favicon defined?

The <img> element

The <body> element

The <link> element

The <style> element

Submit Answer »

HTML Link Tag


Tag Description

<link> Defines the relationship between a document and an external resource

For a complete list of all available HTML tags, visit our HTML Tag Reference.

You might also like