mORMot Open Source

vlad

Member

Registered: 2017-03-20

Posts: 16

Web browser requesting favicon.ico

Hello,

I'm running TSQLRestServerDB on TSQLHttpServer. The client is web browser, and it is looking for favicon.ico:

favicon.ico:1 GET http://localhost:1044/favicon.ico 404 (Not Found)

Please let me know how I could return the file to browser.

vlad

Member

Registered: 2017-03-20

Posts: 16

Re: Web browser requesting favicon.ico

Sorry, it turned out that's not a question related to mORMot. Just in case, favicon can be redirected with:

<link rel="shortcut icon" href="/root/service/favicon.ico">

Eugene Ilyin

Member

From: milky_way/orion_arm/sun/earth

Registered: 2016-03-27

Posts: 132

Website

Re: Web browser requesting favicon.ico

@vlad,
If you have a single project (not dynamically generated bunch of projects)
Please use RFG - Real Favicon Generator to generate all necessary favicons.
This service is free and generates all state-of-the-art set of required icons aligned with the most recent guidelines.

Then you can pack all favicons into a single file, pre-compute GZipped and Brotli versions for each asset in maximum available compression and make all client's browsers happy.

To embed necessary HTML tags into generated HTML template you can use mORMot mustache template engine with embedding of isolated favicons.partial file:

{{#favicons}}
  <link rel="image_src" type="image/png" href="/apple-touch-icon-1024x1024.png"/>
  <link rel="apple-touch-icon" href="/apple-touch-icon-1024x1024.png">
  <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">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="{{{themeColor}}}">
  <meta name="msapplication-TileColor" content="{{{themeColor}}}">
  <meta name="theme-color" content="{{themeColor}}">
{{/favicons}}

As from the best caching practices I recommend to embed hash-versioning into the file names and strip hashed when the asset is requested:

  <link rel="image_src" type="image/png" href="/apple-touch-icon-1024x1024.7a6ed56a.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon-1024x1024.7a6ed56a.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.19f7af26.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.29731e46.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.686f4164.png">
  <link rel="mask-icon" href="/safari-pinned-tab.77664866.svg" color="{{{themeColor}}}">
  <meta name="msapplication-TileColor" content="{{{themeColor}}}">
  <meta name="theme-color" content="{{themeColor}}">

If you do so, you can make such assets immutable:

Cache-Control: public, no-transform, max-age=31536000, immutable

Or when CDN/NGINX reverse-proxy used:

Cache-Control: public, no-transform, max-age=31536000, immutable, stale-while-revalidate=2592000, stale-if-error=2592000

To pre-compress, compute ETag hashes, embed as a single resource right into executable, and then distribute all icons assets you can use mORMotBP which is a direct class from TSQLHttpServer.

Eugene Ilyin

Member

From: milky_way/orion_arm/sun/earth

Registered: 2016-03-27

Posts: 132

Website

Re: Web browser requesting favicon.ico

@vlad,
Usage of rel="shortcut icon" is not a good decision, see here, here, and here why.

macfly

Member

From: Brasil

Registered: 2016-08-20

Posts: 374

Re: Web browser requesting favicon.ico

Good infos on this topic.
Subscribed.