본문으로 건너뛰기

Favicon

Favicon

A favicon is a small image that represents the icon of a website, appearing on the tab of a web browser.

favicon.png

Why Use a Favicon

  • User Convenience: When a user has multiple tabs open, the favicon allows them to easily recognize your website.

  • Branding: A unique icon can emphasize the brand or identity of your website.


How to Add a Favicon

You can add a favicon to your HTML document within the <head> section using the <link> tag.

While the .ico file extension is commonly used, other image formats like .png or .jpg can also be utilized.


Favicon Code Example

The favicon is defined using the <link> tag, which is for defining external resources, as follows:

Favicon Code Example
<head>
<link rel="icon" href="path/to/favicon.ico" type="image/x-icon" />
</head>
  • The rel attribute defines the relationship between the current document and the external resource. icon indicates that the external resource is the icon of the current document.

  • The href attribute represents the URL path to the external resource (icon image).

  • The type attribute indicates the media type (MIME type) of the external resource. image/x-icon is used for the MIME type of icon images.


Using Multiple Sizes of Favicon

Sometimes you need to provide favicons of multiple sizes to accommodate different devices or contexts.

In such cases, you can use several <link> tags to specify each icon.


Code Example

Setting Various Favicon Sizes
<head>
<link rel="icon" sizes="16x16" href="path/to/favicon-16x16.png" />
<link rel="icon" sizes="32x32" href="path/to/favicon-32x32.png" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="path/to/apple-touch-icon-180x180.png"
/>
</head>

With this setup, the browser will select and display the most appropriate size of the icon for the screen size.