Skip to content

Instantly share code, notes, and snippets.

@YujiSODE
Last active March 24, 2021 10:43
Show Gist options
  • Save YujiSODE/2a909296bd293b26c920e6dcf4991513 to your computer and use it in GitHub Desktop.
Save YujiSODE/2a909296bd293b26c920e6dcf4991513 to your computer and use it in GitHub Desktop.
memo about favicon

memo: Favicon

Examples

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

from MDN Web Docs

A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu. Note, however, that most modern browsers replaced the favicon from the address bar by an image indicating whether or not the website is using HTTPS. Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format. They are used to improve user experience and enforce brand consistency. When a familiar icon is seen in the browser's address bar, for example, it helps users know they are in the right place.

Defines a resource for representing the page in the user interface, usually an icon (auditory or visual). In the browser, it is usually referred to as the favicon.

If there are multiple s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most >appropriate, and so on.

Note: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment