Scribd
Upload
12 views5 pages

HTML Favicon

The document explains how to add a favicon to a website using HTML. It details the steps to save the favicon image and include a <link> element in the HTML file. Additionally, it provides information on supported file formats for favicons across various browsers.

Uploaded by

Sentinel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views5 pages

HTML Favicon

The document explains how to add a favicon to a website using HTML. It details the steps to save the favicon image and include a <link> element in the HTML file. Additionally, it provides information on supported file formats for favicons across various browsers.

Uploaded by

Sentinel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

13/07/2025, 18:33 HTML Favicon

 Tutorials  Exercises  Services   Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

HTML Favicon
❮ Previous Next ❯

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>

https://www.w3schools.com/html/html_favicon.asp 1/5
13/07/2025, 18:33 HTML Favicon

<title>My Page Title</title>


 Tutorials
<link 
rel="icon"Exercises  
Services  href="/images/favicon.ico">
type="image/x-icon" Sign In

</head>
HTML
 <body>CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

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

Favicon File Format Support


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

Browser ICO PNG GIF JPEG SVG

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?

https://www.w3schools.com/html/html_favicon.asp 2/5
13/07/2025, 18:33 HTML Favicon

 The <img>
Tutorials 
element
Exercises  Services   Sign In

HTML
 The <body>
CSS element SQL
JAVASCRIPT PYTHON JAVA PHP HOW TO W3.CSS C

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.

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

https://www.w3schools.com/html/html_favicon.asp 3/5
13/07/2025, 18:33 HTML Favicon

 Tutorials  Exercises  Services   Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

COLOR PICKER



 PLUS SPACES

GET CERTIFIED FOR TEACHERS

FOR BUSINESS CONTACT US

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial

https://www.w3schools.com/html/html_favicon.asp 4/5
13/07/2025, 18:33 HTML Favicon
How To Tutorial

 Tutorials  SQL Tutorial


Exercises 
Python Tutorial
Services   Sign In
W3.CSS Tutorial
HTML
 CSS JAVASCRIPTTutorialSQL
Bootstrap PYTHON JAVA PHP HOW TO W3.CSS C
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples Get Certified


HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    

FORUM ABOUT ACADEMY


W3Schools is optimized for learning and training. Examples might be simplified to improve
reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of
use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by


W3.CSS.

https://www.w3schools.com/html/html_favicon.asp 5/5

You might also like