Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Icone favicon.png não carrega

Icone não aparece na janela do navegador (estou ultilizando chrome). O html está mesma pasta que a imagem.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Biografia</title>
            <link rel="icon" href="favicon.png">

        </head>
        <body>
            <h1>Sobre mim</h1>

        <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.
        Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

        <h2>Como trabalho</h2>

            <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
            <p>-- José Souza, Fiat</p>

        <p>meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.</p>

        <p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>

        <h2>Experiência</h2>

            <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
            <p>-- Manoel Santos, Petrobrás</p>

        <p>Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.
        Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

        <h2>Comunidade</h2>

        <p>repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
        </body>
    </html>
2 respostas
solução!

Oi Marcos, tudo bem?

Favicon pode ser uma pedra no sapato as vezes, recomendo a leitura desse post do CSS Tricks: Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? .

Basicamente você precisa colocar em um tamanho específico nesse PNG ou colocar o favicon com extensão .ico. Isso pra tentar dar suporte para vários browsers.

Encontrei essa referência do MDN sobre o tema.

Você pode ver aqui no código fonte do Blog da Caelum que usamos o .ico e ele carrega normalmente no Chrome e em outros navegadores também.

Pra transformar uma png em ico você pode procurar uma ferramenta de conversão online, tenta googlar "png to ico online" ou algo assim.

Espero ter ajudado e bons estudos,

Abcs!

Completando o que o colega acima disse, eu procurei um site para converter de .png para .ico, testei no código e deu certo. Usei esse site http://convertico.com/, no código ficou assim

<link rel="icon" href="favicon.ico">

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software