Como alterar o favicon da CLI angular

140

Como posso alterar o favicon padrão definido pela CLI angular?

Eu tentei muitas coisas, mas sempre mostra o logotipo Angular como o favicon, mesmo que eu tenha excluído esse ícone (favicon.ico na pasta src). Ainda mostra, e eu não sei de onde é carregado.

Substituí esse ícone por outro ícone, mas ele ainda mostra o logotipo Angular:

<link rel="icon" type="image/x-icon" href="favicon.ico">
chrisly
fonte
3
Possível duplicata Como faço para forçar uma atualização favicon
Matsemann
Aplicativo em execução com porta diferente resolve o problema. exemplo:ng s --port 4201
Sajad
Estou tendo o mesmo problema. No meu caso localmente tudo é bom, mas quando eu implantar para o servidor eu recebo 500 Internal Server Error ...
Ziggler
Eu li todas as respostas que me ajudaram um pouco, mas sinceramente, que não devem ser tão complicadas para uma necessidade tão básica: apenas um caminho para copiar a imagem, possivelmente um arquivo de configuração e, em seguida, um reinício. a resposta "atualizar" não está ajudando.
Pdem
Um favicon é um arquivo estático configurado especialmente no angular.json, deixe o padrão e veja aqui como ele funciona: stackoverflow.com/questions/40424907/…
pdem

Respostas:

159

Crie uma imagem png com o mesmo nome ( favicon.png) e altere o nome nesses arquivos:

index.html:

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

angular-cli.json:

"assets": [
    "assets",
    "favicon.png" 
],

E você nunca verá o ícone padrão angular novamente.

O tamanho deve ser 32x32, se mais do que isso, não será exibido.

NOTA: Isso não funcionará com o Angular 9

Para o angular 9, você deve colocar o favicon dentro dos ativos e abrir caminho como

<link rel="icon" type="image/x-icon" href="assets/favicon.png">

Sukhveer Singh
fonte
2
Obrigado Sukhveer. Isso funciona perfeitamente, basta reiniciar o aplicativo depois de adicionar o ícone no angular-cli.jsonarquivo.
Ajay Sivan
1
Esta resposta deve ser aceita! Nada funcionou, mas esse truque funcionou! Obrigado Sukhveer Singh!
Junia Montana
Eu também tive que mudar o caminho png<link rel="icon" type="image/png" href="./favicon.png" />
Dude Pascalou
1
Obrigado pelo truque angular 9
shanti 09/07
56

Como você substituiu o favicon.icoarquivo fisicamente, deve haver um problema de armazenamento em cache em algum lugar. Há um cache no seu navegador. Force-o a ser liberado pressionando Ctrl+ F5.

Se o ícone padrão ainda estiver sendo exibido, tente outro navegador com um cache limpo (ou seja, você ainda não visitou a página com esse navegador).

Limpar atalhos de cache: ( origem )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ Rou Ctrl+ F5ou ou Shift+ F5.

Mac
Safari: + R; Firefox / Chrome: + Shift+ R.

Yuri
fonte
1
obrigado, o homem trabalhou instantaneamente - CTRL F5 pela vitória - trabalhou com o Angular 6 com favicon no mesmo diretório que index.html e esta linha em index.html ... <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
danday74 13/08
os atalhos são incríveis!
Gerardo Bautista
36

Navegar para o arquivo finalmente corrigiu isso para mim. No meu caso: http: // localhost: 4200 / favicon.ico

Eu tentei atualizar, parar e iniciar ng servenovamente, e "Cache vazio e recarregamento rígido", nenhum funcionou.

Chau Nguyen
fonte
1
Essa é a única resposta que funcionou para mim. Obrigado por isso!
Ivan
2
Depois de navegar para o favicon, recarreguei a página inicial e apertei ctrl + f5 (chrome) - isso funcionou. Felicidades.
Blueprintchris #
1
essa é a única coisa que funcionou para mim. inacreditável!
Yaniv Eliav
28

Para garantir que o navegador baixe uma nova versão do favicon e não use uma versão em cache, você pode adicionar um parâmetro fictício ao URL do favicon:

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">
Tobi
fonte
Trabalhou para mim Graças
Venky559
Obrigado ...?
Any
essa é a única coisa que funcionou para mim. Nem o ctrl + f5, nem todas as outras respostas de palpite, é isso que está funcionando!
saferJo
14

podemos mudar o ícone angular do favicon da CLI. temos que colocar o arquivo de ícone na pasta "assets" e indicar esse caminho no index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> É trabalho para mim.

jaimin patel
fonte
Sim, nada mais funcionou para mim aqui, mas colocá-lo na pasta de ativos funcionou perfeitamente. Felicidades.
scohe001 13/04
10

Eu também estava lutando com isso, pensando que estava fazendo algo errado com o Angular, mas meu problema acabou sendo o Chrome fazendo o cache do ícone. O padrão "Esvaziar o cache e recarregar o disco rígido" ou reiniciar o navegador não estava funcionando para mim, mas este post me indicou a direção certa.

Isso funcionou especificamente para mim:

Se estiver no Windows e usando o chrome (exit chrome from taskbar), acesse C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default e exclua os arquivos Favicons-journal, o Favicons reinicie o chrome (na barra de tarefas kill all instances).

Existem muitas outras boas sugestões nesse post, se isso não funcionar para você.

Jdevince
fonte
1
Isso também removerá ícones de todas as páginas marcadas existentes, até a próxima visita à página. Isso fez o truque para mim.
David B
9

No Angular 6, coloque o favicon.pngtamanho 32x32na pasta do ativo e altere o caminho index.html. Então,

<link rel="icon" type="image/x-icon" href="./assets/favicon.png">
user1795667
fonte
Na verdade: tive que colocar o meu na pasta assets e alterar o caminho no index.html e no arquivo angular.json.
G. Delvigne
5

Crie uma imagem de ícone com a extensão .ico e copie e substitua-a pelo arquivo favicon padrão na pasta src.

index.html:

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

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**
Aathil Ahamed
fonte
salva-vidas! thx
koo9 1/07
4

Mova o favicon.ico para seus ativos e, em seguida, para a pasta img, e depois disso altere apenas a tag de link do ícone no cabeçalho. Isso me ajuda quando o favicon não foi exibido.

KGROZA
fonte
No Chrome e Firefox, não era um problema de cache. Mudei meu arquivo ICO e o Chrome e o Firefox foram atualizados imediatamente.
Steve11235
Atualizei meu arquivo favicon.ico e ele não foi carregado. Eu fiz isso (mudei para ativos e links atualizados) e funcionou bem.
David David
4

Pressione Ctrl+ F5na janela do navegador

Andrey.Kostyuchenko
fonte
Oi Andrey, boa resposta, mas você pode explicar que isso atualiza o cache, caso contrário, é apenas uma resposta "mágica".
Tom
1
Essa resposta é exatamente igual à de yuri (respondida em 26 de novembro de 16 às 19:12) menos a explicação muito útil.
robinCTS
4

PARA RECOLOCAR FAVICON PARA QUALQUER PROJETO WEB:

Clique com o botão direito do mouse no favicon e clique em 'recarregar'. Funciona sempre.

Brian B
fonte
1
depois de 20 minutos batendo a cabeça na parede, essa é a única solução que funcionou. obrigado!!
wooldridgetm
2

Para futuros leitores, se isso acontecer com você, seu navegador deseja usar o antigo favicon em cache.

Siga esses passos:

  1. Segure a tecla CTRL e clique no botão "Atualizar" no seu navegador.
  2. Segure a tecla Shift e clique no botão "Atualizar" no seu navegador.

Fixo.

KeplerIO
fonte
2

Siga as etapas abaixo para alterar o ícone do aplicativo:

  1. Adicione o seu arquivo .ico no projeto.
  2. Vá para angular.json e em "projetos" -> "arquiteto" -> "compilação" -> "opções" -> "ativos" e faça uma entrada para o seu arquivo de ícone. Consulte a entrada existente do favicon.ico para saber como fazê-lo.
  3. Vá para index.html e atualize o caminho do arquivo de ícone. Por exemplo,

  4. Reinicie o servidor.

  5. Navegador de atualização dura e você está pronto para ir.
Rut Shah
fonte
1

Eu estava brincando com isso por um tempo. Parece que o favicon é aparentemente tratado por um módulo de nó chamado @scematics (pelo menos no Angular5).

Você pode alterar seu favicon nesta pasta:

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

Nessa pasta deve haver um favicon.ico, que é o que está carregado. Estou bastante certo de que isso não se aplica a todos, mas funcionou para mim.

Espero que isso tenha ajudado. Feliz codificação! : D


fonte
1

Para aqueles que precisam de um favicon adicionado dinamicamente, aqui está o que eu fiz com um inicializador de aplicativo:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

Apenas remova o arquivo fav.ico em src / e adicione-o. O favicon será adicionado antes do início do aplicativo

Danny Fenstermaker
fonte
1
<link rel="icon" type="image/x-icon" href="#">

Adicione a fonte do seu ícone e reinicie o aplicativo, ele será alterado.

Adeel
fonte
1

Eu tentei muitas dessas soluções, mas não obtive êxito. O que funcionou para a minha aplicação angular 5 foi o abaixo:

index.html: comente sua tag de link

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> --> 

.angular-cli.json: deixe o tipo de item como ".ico"

 "assets": [
      "assets",
      "favicon.ico"
    ],

ÚLTIMA ..

  • Na estrutura de pastas do seu projeto, coloque o favicon.ico dentro do src ex: (C: \ Dev \ EPS \ src). Você NÃO precisa tê-lo em sua pasta de ativos, pois não está fazendo referência a ele.

  • Verifique se o seu ícone não está quebrado (seu ícone deve ser legível se exibido através do Windows Explorer, também conhecido como ícone de janela não quebrada)

  • deve ter a dimensão 32 x 32
Maurizio L
fonte
0

Certifique-se de que ao usar a imagem do ícone não seja uma extensão manipulada, como se você baixasse uma pngimagem e depois alterasse manualmente sua extensão de pngpara icon. Nesse caso, sua imagem será corrompida. E navegador não entende.

Eu cometi esse erro, mas depois de usar a imagem original do ícone, ele começou a funcionar.

payal tyagi
fonte
0

1. Verifique a tag do link no arquivo index.html para que ela fique assim.

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

2. Verifique o nome do arquivo favicon.ico no diretório / src.

3.Rerun Angular com ng servir e atualizar o aplicativo.

4.Se não aparecer (ou algo parecido com o buffer do arquivo favicon.ico antigo). tente atualizar o caminho do favicon novamente para carregar o arquivo favicon.ico (por exemplo, atualize seudomínio.com/favicon.ico)

dscanon
fonte
0

Eu tive o mesmo problema.

Se você estiver usando um Mac, precisará esvaziar o cache ( Option+ + E) e recarregar a página, além de reiniciar o aplicativo (e, é claro, alterar o caminho em index.html).

alang
fonte
0
  1. Remova o seu favicon.ico existente
  2. Adicione um novo ícone à pasta src com o nome "favico.ico"
  3. Limpe o cache no seu navegador.

O ícone não reflete apenas por causa do cache do seu navegador. Às vezes, tente reiniciar o aplicativo

Sri Vivek
fonte
0

Os seguintes passos funcionaram para mim.

  1. Remova o arquivo "favicon.ico" padrão com um novo com nome diferente, ou seja, "_favicon.ico" no meu caso.

    Nota :: Não mantenha o nome padrão, pois ele é armazenado em cache no navegador e difícil de sobrescrever com o novo ícone.

  2. Atualize index.html com a nova tag de link, ou seja

     <link rel="icon" type="image/x-icon" href="_favicon.ico" /> 
    
  3. Atualize .angular-cli.json com o novo nome do ícone, ou seja, "_favicon.ico".

  4. Desenvolver e lançar seu aplicativo e fazer uma atualização duro Ctrl+ F5.

Dheerendra Pandey
fonte
0

tão simples e fácil quanto:

  1. adicione seu ícone ou png no mesmo diretório que favicon
  2. editar .angular-cli.json, em assets remove favicon.ico coloque o seu no lugar
  3. edite index.html, pesquise no favicon e coloque o seu no lugar
  4. executar ng servir novamente

isso é feito

amdan
fonte
0
<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

isso funcionou para mim.

Ester Vardan
fonte
<link rel = "icon" type = "image / x-icon" href = "assets / liana.jpg"> mais
Ester Vardan
0

No meu caso, o problema era que eu tinha dimensões diferentes em comparação com a normal. Eu tinha 48x48 pxenquanto esperava 32x32 pxe minha extensão era png, então tive que mudar paraico

Mamba negra
fonte
0

O que realmente funciona para mim foi colocar meu favicon na pasta de ativos e aparecer automaticamente no navegador.

  1. alterar local para pasta de ativos dentro da pasta src.
  2. altere index.html assim <link rel="icon" type="image/x-icon" href="assets/favicon.png">
Okyam
fonte
0

Ok, aqui em 2020 em 9.1.12. Não entendo por que exatamente esse processo é tão difícil. Eu segui quase todos os posts acima e nenhum deles funcionou para mim.

O que DID funcionou foi: Remover totalmente a referência de favicon em index.html. É totalmente contra-intuitivo, mas funciona. Você não precisa colocá-lo na assetspasta. Eu tentei tudo isso, mas infelizmente nenhuma dessas sugestões funcionou.

index.html

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

angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

e quando eu corro ng build --prod, o favicon está lá. Também é exibido no meu servidor ativo.

user2619824
fonte
-1

A exclusão do cache favicon dos cromos e a reinicialização do navegador no mac funcionaram para mim.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons
Padawan
fonte
-1

Eu tive o mesmo problema e o resolvi forçando a atualização pelo método descrito aqui :

Para atualizar o favicon do seu site, você pode forçar os navegadores a baixar uma nova versão usando a tag link e uma string de consulta no seu nome de arquivo. Isso é especialmente útil em ambientes de produção para garantir que os usuários obtenham a atualização.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />
maia
fonte
-1

Corrigi o problema criando meu próprio arquivo .ico, criei uma pasta de ativos e coloquei o arquivo ali. Em seguida, alterou o link href em Index.html

Jerin Kurian
fonte