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

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:

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

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/
The following two tabs change content below.
Arquiteto de Software e Desenvolvedor Backend (quase Fullstack), geralmente trabalho com C#, PowerShell, Python, Golang, bash e Unity (esse é mais por hobby). Estou sempre buscando algo novo para aprender, adicionando novas ferramentas ao meu cinto de utilidades.
Posted in Dev, Python and tagged , , , .