HTML Favicon Code
A is a small image file that contains one or more icons that can be used to represent a website, blog, or even a single web page.
Favicons typically appear in places such as the browser’s tab, address bar, browser history, bookmarks bar, etc. Favicons are a great way to distinguish your site from others — especially when users have many tabs open or they’re searching through their browser history or bookmarks bar. Favicons assist in the visibility of your brand, as users will learn to associate the favicon’s colors, fonts, etc with your brand as they use your website.
If you don’t have a favicon for your website, users will usually just see a generic web page icon.
Adding a Favicon to your Website
First you need to upload a favicon to your server. You can call it anything and place it anywhere, but, if you call it favicon.ico and place it in the website’s root directory, most browsers will automatically display it. Having said that, you can also add some HTML code to your website to ensure that browsers know which favicon to use.
Note that if you use this code, you can name the favicon anything you like.
Also, although this example uses the .ico extension, you could use other image formats, such as .png . .gif , .jpeg , and even animated GIFs. However, the .ico format has had wide acceptance from browsers for quite some time and is a common format when using favicons.
Favicons can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.
Apple iOS Home Screen Icons
Apple devices with the iOS operating system version 1.1.3 or later (such as the iPod Touch, iPhone, and iPad) support the ability for you to provide a custom icon to be displayed on users’ Home screen when they use the Web Clip feature (called Add to Home Screen within Mobile Safari).
Some Android devices also support this feature.
To provide an icon for this purpose, upload the icon to the server, then add the following code with the HTML of the website, inside the element (replace the image location with the location of the image to be used).
iOS will add rounded corners and a reflective shine to your iOS home screen icon.
If you prefer it without the reflective shine, use the following code:
HTML Favicon
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 element to your «index.html» file, after the element, like this:
Example
This is a Heading
This is a paragraph.
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
HTML Link Tag
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Favicon
A favicon is an icon that appears in the browser’s address bar, the bookmarks menu, and on the page when a bookmark is saved. It is a way of identifying and distinguishing a website from others. This tutorial will cover creating and adding a favicon to an HTML website.
What Is a Favicon?
A favicon (short for «favorite icon») is a small icon that appears in the browser’s address bar, next to the web page’s title, and in the bookmark or history list of the user’s web browser. It is a way for a website to brand itself and make it more recognizable to users. Adding a favicon to your website is a simple process that can be done using HTML. In this tutorial, we will show you how to create and include a favicon in your HTML code so your website can have its unique branding and be more easily recognized by users.
Steps to Create a Favicon
- Use an online favicon generator: Many online tools can create a favicon for you. Upload your image, and the tool will resize and convert it to the correct format.
- Use an image editor: If you have a graphic design program, such as Adobe Photoshop or GIMP, you can create a favicon by creating a square image and saving it as a .ico file. The recommended size for a favicon is 16×16 pixels, but it can also be 32×32 pixels.
- Use a favicon template: You can also find templates for favicons online that you can use as a starting point.
Add a Favicon in Webpage
- Use the element: You can add the favicon to your HTML page by using the element in the of your HTML page. The rel attribute should be set to » icon » and the href attribute should point to the location of the favicon file.
link rel="icon" href="/favicon.ico"> link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> meta http-equiv="Icon" content="/favicon.ico"> Note: If you want to use a favicon that is in a different format, such as .png or .gif, you can add the following code to the head section of your HTML document instead:
link rel="icon" href="/favicon.png" type="image/png"> Test Your Favicon
Once you’ve added the favicon to your HTML document, you’ll want to test it to ensure it’s working correctly. To do this, refresh your website and look for the favicon in the address bar, bookmark menu, and when you save a bookmark. If the favicon is not showing up, ensure that the path to the favicon file is correct and that the file has been uploaded to the correct location on your server.