AWS API Gateway + Lambda: favicon issue

Question

I have an microservice running on AWS Lambda (ASP.NET Core 3.1) and published using API Gateway with custom domain.

Running locally, everything works fine, site works, images are loaded, favicon too.

Deployed to Lambda+API, site works, images are loaded (PNG, JPG), scripts are loaded, however favicon.ico is not loaded. Returns invalid image. There is no special configuration for PNG, JPG, CSS, JS or any other static content, it works out of the box.

Is there any gotcha for favicons?

user_4376381 · Answer

The following solution worked for me.

Rather than using API Gateway to serve favicon.ico, upload it to S3 and make it a public object. Obtain the HTTPS url to this object from the S3 console. Then in your Lambda function, redirect to it.

In my case, this was an AWS Chalice (Python) application, so the routing logic was implemented as follows:

@app.route('/favicon.ico')
def favicon(): 
  return Response(body='', headers={'Location': 'https://s3.amazonaws.com/YOUR_BUCKET_NAME/favicon.ico'}, status_code=301)

Although not strictly necessary, you can also include markup in HTML to indicate the location of the favicon, such as the following:

user_14131530 · Answer

The following solution allowed me to serve favicon via API gateway + Lambda with creating or using other resources. The API used is a REST API and the application I am running on my lambda is a Plotly Dash application.

For the deployment of my API I set the following in template.yaml (fyi: below is not the complete template)

Resources:
  DashApi:
    Type: AWS::Serverless::Api
    Properties:
      BinaryMediaTypes:
        - "image/*"
  
  MyLambdaFunction:
    Type: AWS::Serverless::Function
    Properties:
        Events:
          DashEndpoint:
            Type: Api
            Properties:
              Path: /{proxy+}
              Method: ANY
              RestApiId:
                Ref: DashApi

The important thing here is to set BinaryMediaTypes because this will tell your API which data to pass as binary data and which to pass as utf-8 encoded data. In this example I set all image types as binary, but you also set all content types as binary with "*/*", or list specific image types only.

Perhaps for many web servers this is already enough, however for Plotly Dash applications you have to set another setting. For those applications I use the aws-wsgi package for handling the response. The call in this library will decode everything as utf-8 by default, unless it's told otherwise specifically. For this you have to set the base64_content_types input parameter (list of strings).

Note: the asterix wildcard doesn't work here since awsgi does a literal comparison of Content-Type with all entries in the list

def lambda_handler(event, context):
    base64_content_types = ['image/vnd.microsoft.icon', 'image/x-icon']
    return awsgi.response(app.server, event, context, base64_content_types )

With these two settings set, I got favicon to load.

I hope this information still helps somebody. I list it here anyways because there is very little to be found on the web on solving this issues without using an S3 bucket.

AWS API Gateway + Lambda: favicon issue

2 Answers