Adicionando um ícone (favicon) a uma aplicação Flask. (Python)

Adicionando um ícone (favicon) a uma aplicação Flask. (Python)

Overview

Neste post charmoso e super informativo, vamos mergulhar no universo dos favicons! Isso mesmo, aqueles pequeninos ícones que fazem uma grande diferença na identidade do seu site ou aplicativo. Já notou como é frustrante quando eles simplesmente não aparecem, deixando aquele vazio acompanhado de um erro 404? Pois bem, eu compartilharei um guia prático para você nunca mais passar por esse perrengue. Preparado para deixar seu site ainda mais profissional e, claro, livre dos terríveis erros 404 relacionados ao favicon? Então siga comigo!

Atualmente, todos (ou quase todos) os sites possuem um ícone, que é conhecido como favicon). Como eles meio que viraram um padrão, todos os navegadores já solicitam este ícone automaticamente. Não ter um favicon não é exatamente um problema… salvo pelos requests pelo /favicon.ico que retornam 404.

Assim, não sei vocês, mas eu não consigo ficar satisfeito enquanto minha aplicação está retornando 404 para o favicon o tempo todo… Sendo assim, neste post mostro como implementar um no site ou sua aplicação.

A primeira coisa que você vai precisar é de um arquivo .ICO (obviamente). Para este tutorial, vamos considerar que você salvou um com o nome favicon.ico. Este arquivo deve fiar no diretório “static/favicon.ico”.

Se a sua aplicação for um site, no template base ou no index.html (se for um hotsite ou SPA), basta incluir a linha abaixo na seção head da página:

Atenção: Se sua aplicação utilizar algum framework tipo Angular ou VueJS, confira o meu post sobre como alterar os delimitadores padrão do Jinja2.

Se a sua aplicação não possuir um frontend (ou se for acessada por navegadores muito antigos), você vai precisar de outra abordagem.

Esta nova abordagem pode ser feita de duas maneiras:

A primeira é adicionando um redirecionamento a sua aplicação:

from flask import Flask, url_for

app = Flask(__name__)
app.add_url_rule('/favicon.ico',
                 redirect_to=url_for('static', filename='favicon.ico'))

No código acima, quando utilizamos o método add_url_rule, definimos que, sempre que o endereço /favicon.ico for acessado, você vai devolver a url completa para o arquivo favicon.ico, que está salvo no diretório static.

A segunda forma é adicionando uma rota específica para isso. Esta é a forma que eu prefiro.

import os
from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),
                               'favicon.ico', mimetype='image/vnd.microsoft.icon')

No código acima, definimos uma rota que devolverá o arquivo favicon.ico sempre que alguém acessar a url /favicon.ico

Desta forma, sua aplicação vai conseguir retornar o ícone e não vai mais mostrar a mensagem de erro para o /favicon.ico.

Espero ter ajudado!

Referência:

  1. http://flask.pocoo.org/docs/1.0/patterns/favicon/