About
- The Shortcut (or Favicon)
- Pinned Tab icons
- …
Articles Related
Default
The default favicon searched by the browser is:
- at the root of the website
- with an ico format
- and the name favicon.ico
/favicon.ico
It's equivalent to the below code:
<link rel="icon" href="/favicon.ico" />
The ico file format may be:
- image/avif,
- image/webp,
- image/apng,
- or any other image supported by the browser as indicated by the accept http header.
Declaration
HTML Link
A icon is declared through the link element in a HTML page and every browser may have a different way to define it.
Favicon
<link rel="shortcut icon" href="http://gerardnico.com/wiki/lib/tpl/bootie/images/favicon.ico" />
Chrome & Opera
Chrome and Opera uses icon.png, which is scaled to the necessary size by the device. To prevent automatic scaling, you can also provide additional sizes by specifying the sizes attribute.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- and this one also -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
Safari
Safari also use the link tag with the rel attribute: apple-touch-icon to indicate the home screen icon.
<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon-180x180.png">
- Icon for Pinned Tabs in Safari with the following Svg structure
- Only one pfad
- Viewbox must set to 16 x 16 → viewBox=“0 0 16 16”
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
Internet Explorer / Edge
You can leave out the relevant meta tags if you don't want to support a specific size.
<meta name="msapplication-TileColor" content="#7d3194">
<meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
<!-- Or -->
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Location
It can also be declared on the web server.
It's location default to the root with the name favicon.ico
Example: https://maven.apache.org/favicon.ico