Favicons

A favicon is an image added to the head of your HTML file. This is generally pretty small, and it is displayed in the browser tab that your site is being viewed in, and would display with the bookmark if someone saves that link to your page. They make it easy to identify which sites you have open in your browser when you have a lot of tabs open, and they help convey your branding.

Favicon File Types

Your favicon can use just about any image format, including png, jpg/jpeg, svg, and ico. The ico file type is specific to favicons, and you can use the Favicon Generator to convert your image file into a favicon. Instructions to do that can be found lower on this page.

Things to Remember When Choosing an Image to Use as Your Favicon

In order to be helpful, your favicon should check the following boxes:

Has very little detail
Is recognizable when displayed at 16px by 16px (standard favicon size)
Will be visible whether your user has their browser in light or dark mode (light color backgrounds for tabs or dark color backgrounds for tabs)
Has a square aspect ratio. Favicon images use a space in the tab that is square, so if your image isn’t square it will look distorted in the browser.

Creating Your Favicon from an Existing Image

Once you have chosen an appropriate file to use, you can convert it to a favicon that uses the .ico format on the Favicon Generator website. Follow the instructions below to generate your favicon.

Open the Favicon Generator website in your browser and make sure that you have the file you want to use as your favicon ready. View a screenshot of the Favicon Generator Website.
Adjust the settings in the window so that you will only generate the 16px by 16px favicon and that you will retain the image dimensions (this image should already be square). View a screenshot of the Favicon Generator with these settings.
Use the file explorer to select your favicon image from the folders on your computer so that you can convert it on the site.
Click on the “Create Favicon” button next to the file explorer where you just chose your image. View a screenshot of the Favicon Generator website with a file selected and ready to be converted.
On the page that appears, click the link displayed to download your generated favicon. Be sure to save this to the images folder for your site locally. View a screenshot of the favicon generator website with the link to download highlighted.
With your favicon created and downloaded, you can link it from the head of your HTML and view it in the browser. The page with the download includes links that you can add to your HTML, but you will need to edit these to use the actual location of your favicon file.If you copy and paste them but do not edit them, they won’t work. View a screenshot of the favicon generator website with the links you can add to your HTML head to display the favicon highlighted.

Favicon Link Location and Format

Once your favicon has been generated and properly saved in the images folder of your project, you can add it to your HTML files so that it will display in the browser for you and your users.

Where to Add Your Favicon

The favicon is considered information about your page, not content, so we add it to the head of your HTML document(s). If you have a site with multiple pages, you will add it to the head of each file, otherwise it will not display in the browser. I generally add this above any links to CSS files or JavaScript files, near my meta description and author tags.

<head>
  <!-- Charset and Title: should be first in head of document -->
  <meta charset="utf-8">
  <title>Wok Asian Cuisine</title>

  <!-- Meta Author and Description Tags -->
  <meta name="author" content="Prof. Barnett">
  <meta name="description" content="Wok Asian Cuisine is your local home for 
    delicious food, gourmet catering, and excellent service">
  
  <!-- The links to my favicon, located in the images folder for my project -->
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">

  <!-- Link to a web font from Adobe -->
  <link rel="stylesheet" href="https://use.typekit.net/kmr8yjo.css">

  <!-- Link to my CSS file -->
  <link rel="stylesheet" href="styles.css">
</head>

Favicon Links

The format for the favicon link is above, but let’s talk a bit about the attributes these use and the correct format. There are two links that will show up in the generator if you have created and generated your favicon properly. All of these attributes are required.

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

The “rel” Attribute

The rel attribute is used to tell your browser how this resource is related to your page so that it knows how to use it.

The first link includes a rel attribute that is set to “shortcut icon.” This is used as a sort of shortcut image, like the one you might click on to open an app on your phone. It would be added to the task bar. This link is optional, but you can add it to your pages.

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

The second link is required, and it displays your favicon in the browser tab and next to the bookmark link when a user saves a link to your website.

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

The “type” Attribute

The type attribute is used to tell your browser what type of resource this is for your page so that it knows how to use it.

Both links include a type attribute that is set to “image/x-icon.” This is used for favicons and other icon images used in browser tabs and as shortcut images or icons for apps.

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

The “href” Attribute

The href attribute tells the browser where it can find this resource. My favicon is inside of my images folder, so this href tells the browser to open the images folder inside of my project and find/load the image named “favicon.ico.”

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