19
respostas

Icone não apareceu :(

Olá Neste exercício eu descompactei a pasta projeto. Criei um arquivo de nome bio.html dentro da pasta projeto que foi descompactado. E neste arquivo eu fiz o exercício. Só que quando fui carregar a pagina para ver como ficou, vi que o icone não foi atualizado. O que eu fiz de errado?

Segue o meu codigo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="icon" href ="favicon.png" >
        <title>Biografia - João da Silva</title>
    </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.</p>
        <p>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>Satisfazer 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>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.</p>
        <p>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>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>

    </body>
</html>
19 respostas

Oi Fabio, tudo bem? Que navegador está usando pra ver se o ícone mudou? Já tentou em outro navegador? Uma dica: quando for escrever os códigos, tenta não deixar espaços entre os atributos e os valores deles na tag.

O seu como está:

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

como recomenda-se:

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

Verifica também se o favicon.png está na mesma pasta do arquivo html.

Ja arrumei o codigo, o favicon.png está na mesma pasta do arquivo html, e mesmo assim não aparece o icone. Ja tentei no Mozilla, Internet Explorer.

Oi Fabio, tem como você criar um zip do seu projeto e disponibilizar um link aqui pra mim baixar? Pode ser link de dropbox, google drive ou mesmo github (se souber usar) :).

Assim eu testo aqui e vejo o que pode ser. Tá bem?

Tenta usar a imagem no formato .ico que dá certo. Só converter nesse site http://convertico.com/

Fábio, você conseguiu resolver o problema do ícone?

Também estou com o mesmo problema, já tentei converter a imagem pra ico com 16x16 e 24x24, mas não tá dando certo D:

Mauro, me disponibiliza um zip do seu projeto por favor?

Fábio, você pode passar o zip do seu projeto para eu poder checar? Obrigado!

Na verdade meu icone só aparece no preview do brackets :( nos navegadores tambem não aparece

Paulo, me disponibiliza um zip do seu projeto por favor?

Wanderson, aqui esta meu projeto https://drive.google.com/open?id=1ueaQpEGN4CnSyHpTb_MMJgJW8dtuct5I

Paulo,

O problema era que as tags não estavam dentro do < head > e sim do < header >. Eu substitui aqui e funcionou. Fiz o teste no Chrome.

Muda o código e testa novamente. Dá shift F5 para atualizar a página.

<!DOCTYPE html>
<html>
    <header>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.ico"/>
        <title>Blog - João</title>
        <link rel="stylesheet" href="site.css">
    </header>
    <body>

Tem que ficar dessa forma.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.ico"/>
        <title>Blog - João</title>
        <link rel="stylesheet" href="site.css">
    </head>
    <body>

Agora deu certo aqui, muito obrigado :)

Disponha! Bons estudos :D

Opa Paulo, pelo que vi e pesquisei, o ícone no seu projeto não aparece por que seu html está inválido, o navegador tenta corrigir e como consequência, o favicon acaba sendo ignorado. Pode ser que isso esteja acontecendo com todo mundo neste tópico.

No caso do seu projeto, o ícone apareceu apenas no Firefox, mas o IE e o Chrome ignoram.

Para arrumar, corriga os problemas de semântica do seu HTML. Primeiro, as tags meta devem estar dentro de uma tag head e não header. Depois, as tags em não podem envolver um parágrafo, ela é para trechos pequenos de texto dentro de um parágrafo. Depois disso o ícone deve aparecer normalmente pelo menos no Chrome, no Edge (IE) eu não consegui detectar o problema

O site da w3c tem um validador útil, vocês podem usá-lo: https://validator.w3.org/#validate_by_input

Oi Galera!

Mesmo percebendo que para alguns foi solucionado, tive o mesmo problema, e não era o caso da tag

estar errada. Precisei manter meu Firefox numa versão antiga(46.0) para uns testes que estava fazendo. No entanto, depois que atualizei (atualmente na 57.0.4), funciona normalmente. No Chrome também está funcionando (63.0.3239..), mas não no safari (11.0.2)

Opa Jane, legal isso.

No Safari e o Edge, a gente precisa de outras coisas pra fazer funcionar. O Edge requer uma imagem 16x16 e no safari o ícone precisa ser chamado apple-touch-icon-DIMENSAO, que pode ser 60x60 e outras.

Esse artigo do Tableless parece ser um bom guia: https://tableless.com.br/tudo-sobre-favicon-logaster/

Tentei todas as dicas acima, mas o ícone não aparece em nenhum navegador (Chrome ou Firefox). O código está igual ao descrito pelo instrutor. Também tentei converter a imagem .png para .ico, mas também não funcionou. Os arquivos estão salvos no mesmo diretório.

Fabio, dá um feedback aqui pra gente?

Neide, tudo bem? Nada funcionou? Me manda seu projeto em um zip pra que eu investigue de perto por favor?

email: wanderson.sabino@alura.com.br