Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Favicon in HTML

    Uploaded by

    Jeronimo
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Favicon in HTML

    Uploaded by

    Jeronimo
    4 views10 pages
    lesson

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    4 views10 pages

    Favicon in HTML

    Uploaded by

    Jeronimo
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 10

    Favicon in HTML

    Dot Net Tutorials

    Back to: HTML Tutorials

    Favicon in HTML with Examples

    In this article, I am going to discuss Favicon in HTML with Examples. Please read our
    previous article where we discussed Links in HTML with Examples. At the end of this article,
    you will learn everything about HTML Favicon with Examples.

    Favicon in HTML
    A favicon is a tiny file that represents a website or a blog. It’s also referred to as a tab icon or a
    website icon. In the browser tab, the favicon displays next to the page title.

    The image of a favicon is saved as a .ico file. There are several file types, but all browsers support
    the.ico format. In the browser tab, a favicon image is displayed to the left of the page title. Look
    at the example below.

    How to Create Favicon?


    To add a favicon in the Html file we need to store the favicon file inside the root directory. We
    can create a favicon file on favicon.cc or we can download a favicon from flat icons.

    How to insert Favicon in HTML File?

    To insert a favicon file in Html <link> element is used to insert external source files and
    stylesheets inside the HTML document.<Link> is an empty tag it is always placed inside the
    head tag of the Html document.

    Syntax to use Favicon in HTML

    The below syntax is used to link the favicon in the Html document.

    <link rel=”icon” href=”favicon.ico”>

    In Html, the rel attribute is used to define the relationship between the Html document and the
    linked document.
    Example to use Favicon in HTML

    Look at the example below to understand how to add a favicon to the website. We can add a
    favicon in different file formats. For this tutorial, we will use a png file that we have downloaded
    from flat icons.
    Favicon Example:

    <link rel="icon" href="robot.png">


    <title>Favicon Tutorial</title>

    <p>We have added favicon to a website</p>

    <!DOCTYPE html> <html> <head> <link rel="icon" href="robot.png"> <title>Favicon


    Tutorial</title> </head> <body> <p>We have added favicon to a website</p> </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="icon" href="robot.png">
    <title>Favicon Tutorial</title>
    </head>
    <body>
    <p>We have added favicon to a website</p>
    </body>
    </html>

    When you run the above HTML code, you will get the following output in the browser.
    In the next article, I am going to discuss Colors in HTML with Examples. Here, in this article, I
    try to explain Favicon in HTML with Examples and I hope you enjoy this HTML Favicon with
    Examples article.

    About the Author: Pranaya Rout

    Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has
    very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET
    Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud
    Computing, Microservices, Design Patterns and still learning new technologies.

    You might also like