Tutorial FavIcon

Por Vinicius Paes - 18 jul 2008

FavIcons ou “favorite icons” são pequenas figuras utilizados pelos sites para definirem um logo a ser apresentado ao lado de seu link no navegador.Nos novos browsers que geram abas internas para melhor orgaizar as páginas visualizadas, é fundamental a utilização dos favicons, pois aumentam a usabilidade do usuário ao interagir com o navegador […]

O que é um FavIcon?

FavIcons ou “favorite icons” são pequenas figuras utilizados pelos sites para definirem um logo a ser apresentado ao lado de seu link no navegador. A implantação do mesmo surgiu após o internet explorer 6, pois antes era utilizado apenas para gerar figura quando adicionado aos favoritos do navegador.

favicon - favorite icon

Temos exemplo na figura acima, do favicon do google, e do seomoz.

Para que Serve o FavIcon?

Nos novos browsers que geram abas internas para melhor orgaizar as páginas visualizadas, é fundamental a utilização dos favicons, pois aumentam a usabilidade do usuário ao interagir com o navegador. Sendo assim, qualquer melhoria no site é totalmente relevante na otimização de sites, então é com certeza uma boa prática de SEO. Na ausência do mesmo no site, é utilizado um ícone padrão do navegador.

Como inserir um favicon em seu site?

É necessário inserir o código dentro das tags <head> … </head>, para que o navegador identifique o favicon de seu site. É indispensável que seu ícone tenha o nome de “favicon.ico”, e que tenha dimensões 16 x 16 pixels.
Exemplo do código a ser inserido:

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

Caso tenha problemas em gerar seus favicons, há ferramentas que o auxiliam nesta tarefa, como o Gerador FavIcon da MundoSEO . Com esta ferramenta on-line, para gerar favIcons, basta fazer upload da figura desejada, que será transformada em um favicon pronto a ser utilizado.

Sobre o Autor:
Autor
Mestre em Ciência e Tecnologia da Computação pela Universidade Federal de Itajubá, e fascinado pelo desenvolvimento em diversas tecnologias web. É possível encontrá-lo pelo Twitter, Facebook e Google+.

5 Comentários

  1. Fernandinha disse:

    Boa dica!
    Simples, mas um diferencial que vale a pena.

  2. ana disse:

    Realmente fernanda, um diferencial q vale a pena!!
    Muito bom o post!

  3. camila disse:

    É realmente, muito bom mesmo!

  4. Eu uso uma extensão do Firefox chamada Faviconize, que permite deixar a aba apenas com a largura do favicon. Ou seja, se o site não tem favicon, eu não consigo saber o que está aberto naquela aba.

  5. Valden Flavio disse:

    Fala Walmar! Pretendo fazer em um próximo post, algumas extensões úteis para o firefox, tanto para o desenvolvimento web, quanto para aspectos gerais! Estou testando o faviconize no momento! abraços!

Deixe o seu comentário!