Ícone do site na aba do browser

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são as imagens exibidas na aba de seu browser (navegador). Alguns browsers, de versão mais antiga, só exibem os favicons quando um site é adicionado aos favoritos. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Convertico

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam. Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Para ter um favicon com seu logotipo é simples: O site Favicon.ico Generator permite que você crie um ícone simples usando um painel tipo MSPaint. Com a ajuda dele ( e de uma boa dose de criatividade) você pode criar seu próprio favicon.

Outra forma (bem mais prática) é o site Convertico.com. Mas para utilizar esta ferramente é preciso ter seu logotipo no formato *.png. A ferramenta é mais simples pois você só precisa enviar o seu arquivo *.png que o site transforma em *.ico.

Depois de criar o arquivo *.ico, você ainda precisa informar o código fonte do seu site que ele deve exibir este ícone nas abas. Para isso, faça o upload do arquivo criado para a pasta raiz do seu servidor (aqui eu chamei o arquivo de "favicon.ico" mas você pode dar outro nome se quiser) e no código HTML de sua página, insira as seguintes tags dentro do <head></head>:


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Agora é só curtir como sua marca aparece melhor em seu site e nos browsers.

Até o próximo post.

Tags desta matéria

Comentários  (12)

  • Rafael
    Rafael 07/12/2013 09:19

    Ok! Funcionou galera ótima dica!

  • Romulo Salomone
    Romulo Salomone 09/06/2014 16:25

    Ajudou muito, obrigado.
    Você foi claro e contundente.
    Vou acompanhar os seus posts.


  • Henrique Corrêa
    Henrique Corrêa 09/06/2014 20:23

    Valeu Romulo,
    Sempre que posso posto novidades.
    Até mais.

  • Eduardo
    Eduardo 18/12/2014 11:50

    E como eu faço pra deixar na pasta Raiz e no HTML?

  • Henrique Corrêa
    Henrique Corrêa 18/12/2014 14:11

    Eduardo,
    As explicações seguem na postagem
    Att..

  • Fernando
    Fernando 18/04/2017 14:07

    Boa tarde, eu gostaria de salvar o icone que eh usado em um website, mas precisamente do da Globo. para deixar um atalho personalizado. obrigado.

  • Henrique Corrêa
    Henrique Corrêa 18/04/2017 16:50

    Olá Fernando, você encontra esses ícones com uma simples busca por imagens no google. Acredito que irá encontrar resultados melhores que os Favicons de cada site.

  • Lara Cristine
    Lara Cristine 09/06/2017 07:37

    Gostaria de saber o que vc fez no type dentro da tag link, pra q serve isso q vc escreveu?

  • Lara Cristine
    Lara Cristine 09/06/2017 07:42

    Gostaria de saber o que vc fez no type dentro da tag link, pra q serve isso q vc escreveu?

  • Felipe Dias
    Felipe Dias 08/11/2018 17:24

    Então, uma duvida, só funciona caso o site ja esteja no ar ?

  • JOSE CANDIDO
    JOSE CANDIDO 16/11/2018 10:01

    Bom dia Henrique!
    me ajude aqui, o codigo do meu site é todo em php, como que faço para inserir esse favicon?
    desde ja agradeço pela ajuda

  • Leandro Lôbo
    Leandro Lôbo 27/04/2019 15:35

    Não funcionou aqui

Deixe sua opnião