HOME DOCUMENTATION DOWNLOADS BLOG

Custom Favicon in HTML5

html5
#1

Origam HTML5 server is usually deployed behind a proxy server, either IIS or NGINX (in case of docker instance). At the moment the proxy server should be used to serve a custom favicon.

IIS

UrlRewrite needs to be installed.

Sample of the web.config, where instead of standard favicon.ico is served favicon.png from the customAssets.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath="dotnet" arguments=".\Origam.ServerCore.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
    </system.webServer>
  </location>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="favicon" enabled="true">
                    <match url="favicon.ico" />
                    <action type="Rewrite" url="./customAssets/favicon.png" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

NGINX

TBD.

#2

Hi,

I would like to ask how to correctly configure nginx in docker installation to correctly display favicon.

I have created git configuration repository and put there a file reverse-proxy.conf with these content.

server {
        listen 80;
        listen [::]:80;

        access_log /var/log/nginx/facr_treneri_reverse-access.log;
        error_log /var/log/nginx/facr_treneri_reverse-error.log;

		proxy_read_timeout 360;
		proxy_connect_timeout 360;
		proxy_send_timeout 360;
		client_max_body_size 20M;
   
		location = /favicon.ico {
			alias /home/origam/HTML5/configuredata/facr_treneri_conf/favicon.ico;
		}
		
        location / {
		proxy_set_header   Host             $host;
		proxy_set_header   X-Real-IP        $remote_addr;
		proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8080;
  }
}

If I have a look into docker, I can find that the configuration is correctly cloned and favicon.ico file is available in the expected location.
obrazek

The problem is that server doesn’t use it. Application is running on HTTPS protocol, could you please navigate me what to check and how the nginx configuration should look like?

If I put these address to the browser: https://facr-treneri-dev.synergine.cz/favicon.ico => it is showing an empty image:
obrazek

Thank you,
David

#3

The Nginx Proxy configuration is correct. Origam server in docker container is listening on port 8080, but the Nginx with this configuration is listening on port 80.
To correct this, create a docker container with the parameter “-p outsideport:80” and then the Nginx with favicon will be used.

#4

Hi Jiří,

Great, I have changed command to run docker from:

docker run -d --env-file test.env --name test-app --security-opt apparmor=unconfined -p 7999:8080 origam/server:master-latest

To:

docker run -d --env-file test.env --name test-app --security-opt apparmor=unconfined -p 7999:80 origam/server:master-latest

And it works perfectly, thank you.

David