Como alterar o favicon da CLI angular

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">

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">

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.

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.

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">

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.

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ê.

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">

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"
        ],**

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.

Pressione Ctrl+ F5na janela do navegador

PARA RECOLOCAR FAVICON PARA QUALQUER PROJETO WEB:

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

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.

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.

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

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

<link rel="icon" type="image/x-icon" href="#">

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

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

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.

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)

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).

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

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.

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

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

"assets": [

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

  ],

isso funcionou para mim.

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

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">

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.

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

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" />

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