How to add a favicon to a Flask route on Google colab without uploading a favicon file?

Question

I would like to add a favicon to a route (/) on my Flask app on Google Colab, so that it will stop sending a second GET request which returns a 404.

How do I go about doing this?

I have seen various posts but they all include HTML files while I would like to do it on Google Colab itself without uploading the image every time?

import os
from flask import send_from_directory, Flask

app = Flask(__name__)
run_with_ngrok(app)  

@app.route('/')
def index():
    return '<h1>Hello!</h1>'

if __name__ == "__main__":
    app.run()

You want to do this *without* uploading/storing an actual favicon.ico? — Gino Mempin, May 10 '21 at 08:16
Hi @GinoMempin, yeap, will that be possible? Because google colab will not store the image there permanently. Is it possible to use a link for favicon.ico instead? — guddaae2u, May 10 '21 at 09:57

Gino Mempin · Accepted Answer · 2021-05-25T13:36:02.700

If you're on Google Colab and you don't want to upload or store any static HTML files or favicon.ico files, you can just return an entire HTML page from a string, then have a <head> block with a link to some favicon file.

from flask import Flask, render_template_string
from flask_ngrok import run_with_ngrok

app = Flask(__name__)
run_with_ngrok(app)  

# Here I'm using a favicon.ico of a pizza from some random generator site
FAVICON_URL='https://favicon-generator.org/favicon-generator/htdocs/favicons/2015-01-17/50e4281252565f8fc85151c075d4e937.ico'

@app.route("/")
def hello():
    content='Hello!'
    return render_template_string(f'''<!doctype html>
<html>
    <head>
        <link rel="icon" href="{FAVICON_URL}">
    </head>
    <body>
        <h1>{content}</h1>
    </body>
</html>
''')

if __name__ == '__main__':
    app.run()

That gets rid of the 404 on /favicon (and actually displays an icon):

If you don't care about displaying an actual icon, you can try just leaving it "empty" with href="data:," as suggested in this answer from this post How to prevent favicon.ico requests?:

@app.route("/")
def hello():
    content='Hello!'
    return render_template_string(f'''<!doctype html>
<html>
    <head>
        <link rel="icon" href="data:,">
    </head>
    <body>
        <h1>{content}</h1>
    </body>
</html>
''')

Both solutions seem to work on

Google Colab
Flask 1.1.2 and flask-ngrok 0.0.25
Firefox 88 and Chrome 90 on macOS

A possible issue here is having to maintain an entire HTML page as an inline string which can be insecure and cumbersome ("Generating HTML from within Python is not fun"). I don't know how complex a web app you are planning to make. It makes sense on Google Colab, but using a setup with a static HTML file (+ Jinja templating) could be more maintainable.

Hi Gino! Thanks so much for your detailed answer, this was exactly what I was looking for! I'm really new to html and api's so I wasn't sure about how to incorporate the answers which I have found on many previously asked ones into my program. So your answer really cleared up my questions! Thank you very much!! — guddaae2u, May 10 '21 at 14:23

How to add a favicon to a Flask route on Google colab without uploading a favicon file?

1 Answers1