HTML

HTML Favicon

A favicon (short for "favorite icon") is a small, iconic image displayed next to the page title in browser tabs. It enhances a website’s branding and helps users quickly recognize it in bookmarks, browser history, and search results. Favicons also appear on mobile device home screens and as icons for Progressive Web Apps (PWAs), making them essential for user experience.

A simple design with high contrast ensures your favicon remains clear and recognizable at smaller sizes.

Syntax

The favicon is linked to your HTML document using the <link> tag in the <head> section.

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

rel="icon" defines the resource type as a favicon.
type="image/x-icon" defines the MIME type (important for server configuration).
href="favicon.ico" provides the file path to your favicon.

Where Favicons Are Used

Browser Tabs – Displays next to the page title.
Bookmarks – Appears alongside bookmarked links.
Browser History – Helps users visually identify previously visited sites.
Mobile Devices – Used as home screen icons for saved websites.
Search Results – Some search engines show favicons beside site titles, improving brand visibility.

Common HTML Favicon Sizes

Providing multiple sizes ensures compatibility across devices and platforms. Below is a detailed breakdown:

Size (px)	Usage	Details
16x16	Browser tabs, bookmarks, and address bars	Required by most browsers as the default favicon size.
24x24	High-resolution browser tabs	Recommended for better clarity on high-DPI screens.
32x32	Desktop high-resolution displays	A larger size for improved display quality on modern desktops.
48x48	Windows desktop icons or shortcuts	Used for Windows shortcuts and small desktop icons.
64x64	macOS Finder preview	Provides clear visibility for macOS Finder when viewing files.
96x96	Windows taskbar icons	Ensures good quality for pinned website icons or app shortcuts on the Windows taskbar.
128x128	Large desktop icons and browser previews	A versatile size for larger icons displayed in directories or detailed previews in browsers.
180x180	iOS touch icons for iPhones and iPads	Optimized for Apple devices, ensuring icons appear sharp when saved to the home screen.
192x192	Android home screen icons	Standard for Android shortcuts, providing a clear and professional appearance when a website is added to the home screen.
256x256	Large desktop icons on Windows and macOS	Ideal for Retina displays or when icons are zoomed in.
384x384	Advanced PWA icons	Used for Progressive Web Apps (PWAs) requiring high-resolution icons for detailed splash screens.
512x512	PWA splash screens and Google Play store	Required by Google Play for web apps. Ensures high resolution for splash screens and app listings.
1024x1024	Large format preview images for advanced applications	Suitable for high-resolution displays and large icon previews in app stores or browser-based operating systems.

While .ico is the most common format, consider including .png or .svg for high-resolution and scalable requirements.

How to Create and Add a Favicon

Follow these clear and consistent steps to create and implement a favicon for your website.

Step 1: Design Your Favicon

Create a square image with recommended sizes (e.g., 16x16, 32x32, or 512x512).
Use design tools like Photoshop, Illustrator, or free alternatives like GIMP or Canva.
Ensure the design is simple, with high contrast for clarity at small sizes.

Step 2: Convert the Image to a Favicon

Convert your image to common favicon formats such as .ico, .png, .svg, or .gif.
Use online tools like Favicon.io or RealFaviconGenerator.net to generate multiple sizes and formats for cross-platform compatibility.

Step 3: Add the Favicon to Your Website

Save the favicon file in your website's root directory (e.g., favicon.ico) or a dedicated folder (e.g., /images/).
Link the favicon to your HTML document by adding the following <link> tag in the <head> section:

<head>
  <link rel="icon" type="image/png" href="/images/favicon.png">
</head>

Step 4: Test Your Favicon

Clear your browser cache to ensure the updated favicon appears.
Open your website in multiple browsers and devices to confirm the favicon displays correctly.
Use tools like RealFaviconGenerator to validate your favicon setup.

Browser Support for Favicon Formats

Most modern browsers support all major favicon formats, including ICO, PNG, SVG, GIF, and JPEG. This applies to Chrome, Firefox, Edge, Safari, and Opera. All these browsers are compatible with each of the listed formats. Here’s a breakdown:

Browser	ICO	PNG	SVG	GIF	JPEG
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Edge	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes

Troubleshooting Favicon Issues

Incorrect File Path

Ensure the href attribute in your <link> tag correctly points to the favicon file. Use absolute paths for external files or confirm that relative paths align with your project structure.

Example:

<link rel="icon" href="/path-to-your/favicon.ico">

Unsupported Format

Modern browsers support formats like .png, .svg, .gif, and .jpg, but .ico is the most universally compatible. To ensure broad support, provide multiple formats for your favicon.

Example:

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Browser Cache

Browsers often cache favicons, which can prevent updates from appearing. Clear your browser cache or use private/incognito mode to reload the page. You can also append a query string to the href to bypass caching.

Example:

<link rel="icon" href="favicon.ico?v=1">

Default Favicon Location

Browsers typically look for a favicon.ico file in the root directory. Ensure the file exists and is accessible at the default location, such as:

https://yourdomain.com/favicon.ico

Server MIME Type

Your server must deliver the favicon with the correct MIME type. The required MIME types include:

image/x-icon for .ico
image/png for .png
image/svg+xml for .svg

This is specific to Apache HTTP Server's mod_mime module, which is responsible for mapping file extensions to MIME types. Configure your server if necessary. For example, in Apache:

AddType image/x-icon .ico

Placement of the `<link>` Tag

The <link> tag referencing the favicon must be placed inside the <head> section of your HTML document.

Example:

<head>
  <link rel="icon" href="favicon.ico">
</head>

Filename Case Sensitivity

On case-sensitive servers (e.g., Linux-based systems), ensure the filename matches the case used in the href attribute of the <link> tag.

Testing on Multiple Devices

Test your favicon on various devices and browsers to verify compatibility. Use tools like RealFaviconGenerator to generate and test favicons for different platforms.

Favicons for Mobile and Apps

To optimize for mobile devices and apps, include platform-specific icons in your HTML.

Example:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Debugging Tools

Use browser developer tools to inspect the <link> tag and confirm the favicon is loaded correctly. Check for errors in the browser console that might indicate issues with the file path or format.

FAQs on HTML Favicon

Can I use SVG as a favicon?

Yes, modern browsers support SVG favicons. Use the <link> tag and specify the SVG file:

<head>
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
</head>

Is it possible to use different favicons for different devices?

Yes, you can specify multiple favicons for various devices and contexts by including additional <link> tags in your HTML file:

<head>
  <link rel="icon" href="favicon.ico" sizes="16x16">
  <link rel="icon" href="favicon-32.png" sizes="32x32">
  <link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
</head>

How do I ensure my favicon works on all browsers and devices?

Generate favicons in multiple sizes and formats (.ico, .png, .svg). Reference them explicitly in the <head> using <link> tags. Include an Apple touch icon and a web app manifest for mobile and PWA compatibility. The web app manifest is a JSON file that provides metadata about your web app, including icons, theme colors, and display options, ensuring a better user experience on mobile devices. Test on different platforms. For more details on how to create and use a web app manifest, check out this guide.

Is there a default location for a favicon in a website’s directory?

Yes, browsers look for favicon.ico in the root directory by default. To ensure control, explicitly reference the favicon in your HTML <head> tag. While a default 16x16 favicon may suffice for basic use cases, particularly on older browsers, it is advisable to use larger images like 32x32 or 48x48. These sizes provide better clarity and ensure optimal display across modern devices, browsers, and resolutions.

Previous Next

HTML Favicon

Where Favicons Are Used

Common HTML Favicon Sizes

How to Create and Add a Favicon

Step 1: Design Your Favicon

Step 2: Convert the Image to a Favicon

Step 3: Add the Favicon to Your Website

Step 4: Test Your Favicon

Browser Support for Favicon Formats

Troubleshooting Favicon Issues

Incorrect File Path

Unsupported Format

Browser Cache

Default Favicon Location

Server MIME Type

Placement of the <link> Tag

Filename Case Sensitivity

Testing on Multiple Devices

Favicons for Mobile and Apps

Debugging Tools

FAQs on HTML Favicon

Can I use SVG as a favicon?

Is it possible to use different favicons for different devices?

How do I ensure my favicon works on all browsers and devices?

Is there a default location for a favicon in a website’s directory?

Placement of the `<link>` Tag