DEV Community

Dominique Morem
Dominique Morem

Posted on

Colocando Favicon na sua Aplicação Ruby/Rails

Fala pessoal! Hoje vamos aprender a colocar um Favicon em nossa aplicação web. Para quem não sabe, um favicon (junção de favorite + icon) é um pequeno ícone gráfico associado a um site ou página da web, normalmente ele fica na aba do navegador, ao lado do título da página. Pois bem, é isso que vamos colocar!

Então, se você se interessou, vem comigo!

1. Pegue o logotipo e traga para dentro do projeto

Pegue a imagem do logotipo que deseja inserir na aba da sua aplicação nomeie-a como 'favicon.png' - o Rails aceita tanto no formato .png, quanto no .ico, talvez aceite .svg também mas eu nunca testei para saber - e arraste-a para dentro da pasta 'Images'.

Essa pasta fica no seguinte caminho dentro da sua aplicação:

app > assets > images
Enter fullscreen mode Exit fullscreen mode

Para ficar melhor de ver:

'Image description'

2. Faça os devidos ajustes no arquivo application.html.erb

Uma vez que a imagem do logotipo esteja no projeto você vai até o arquivo application.html.erb.

Ele fica normalmente em:

app > views > layouts 
Enter fullscreen mode Exit fullscreen mode

Bem aqui ó:

'Image description'

Nesse arquivo bem depois das metatags você vai:

2.1 - Remover esse trecho HTML aqui

'Image description'

2.2 - Inserir a seguinte tag depois das metatags

<%= favicon_link_tag 'favicon.png' %>
Enter fullscreen mode Exit fullscreen mode

2.3 - O antes e depois

ANTES

'Image description'

DEPOIS

'Image description'

3 - Limpando o cache e reiniciando o servidor

Antes de darmos seguimento de apresentação do favicon, precisamos garantir que o cache do seu navegador está limpo pois isso pode dar problema na hora de mostrar o icone na aba.

Dê um:

Ctrl + Shift + Delete

Limpe o seu cache e depois prosseguimos.

Pois bem, agora para fechar com chave de ouro devemos restartar o nosso servidor no Rails.

Ctrl + C - Para parar o servidor

E

bin/dev
Enter fullscreen mode Exit fullscreen mode

No terminal para restartá-lo.

Abra o localhost e lá vai estar ele!

O seu favicon lindo e pleno!

'Image description'

Espero ter ajudado.

Abraço à todos,

Dominique.

Top comments (0)