Favicon ToolsVerificarCrear
Solución de problemas

Arregla un favicon que no aparece o no se actualiza

La misma pestaña en blanco o desactualizada, pero con una causa distinta según tu stack. Encuentra la tuya abajo o escanea tu sitio para ver qué está sirviendo.

yoursite.com
yoursite.com
Fixed
Archivo o ruta incorrectosel link no apunta a nada
Configuración de buildnunca se copió a la salida
Caché del navegadoricono viejo atascado

Next.js

En el App Router, Next.js construye los enlaces al icono a partir de los archivos del directorio app. Si te equivocas con el nombre del archivo, no emite nada. En el Pages Router no existe ninguna convención. Averigua cuál de los dos casos tienes y la solución es evidente.

Leer la solución

El archivo cambió y la pestaña no. En Next.js eso es una de tres cachés: el almacén de favicons del navegador, un build .next obsoleto o una CDN sirviendo los bytes antiguos. Descártalas en ese orden.

Leer la solución

React

React se renderiza en un nodo del DOM y nunca toca el head, así que el favicon vive en un archivo HTML estático. Una pestaña en blanco significa que la etiqueta link de ese archivo es incorrecta, o que el icono se importó desde src y ya no está en una ruta fija.

Leer la solución

Cambiaste el archivo y la pestaña se quedó con el icono antiguo. En una aplicación React eso es el navegador guardando el favicon en caché, o la salida del build y la CDN que aún sirven la copia anterior de public/.

Leer la solución

Vite

Vite copia public/ a la raíz de la salida y reescribe index.html en el momento del build. Un favicon que funciona en desarrollo y da 404 en producción casi siempre lleva el segmento public/ en su ruta, o se importó desde src y recibió un hash.

Leer la solución

Vue

Un componente monoarchivo de Vue no puede renderizar una etiqueta link en el head, así que el favicon se declara en index.html: en la raíz del proyecto con Vite, dentro de public/ con Vue CLI. Una pestaña en blanco significa que la etiqueta de ese archivo es incorrecta.

Leer la solución

Angular

Angular copia los archivos estáticos solo si la configuración del build se lo indica. Un icono que no coincide con la entrada assets de angular.json nunca llega a dist. El build tiene éxito y el archivo no está.

Leer la solución

Astro

Astro copia public/ a la salida sin tocarlo pero nunca inyecta etiquetas de icono por ti. Una pestaña en blanco significa que el enlace no está en el layout que usan tus páginas, o que una página renderizó su propio elemento html y se saltó el layout.

Leer la solución

WordPress

WordPress no sirve un favicon desde un archivo que dejes en el tema. Imprime las etiquetas del icono a partir de un único ajuste, el Icono del sitio, y una pestaña en blanco casi siempre significa que ese ajuste nunca se aplicó, o que un tema lo está pisando.

Leer la solución

Definiste un Icono del sitio nuevo y el antiguo no se mueve. En WordPress eso casi siempre es una capa de caché (un plugin de caché de página o una CDN sirviendo HTML obsoleto), con la propia caché de favicons del navegador como segundo sospechoso.

Leer la solución

Shopify

En Shopify el favicon es un ajuste del tema, no un archivo en un servidor. El tema renderiza un único enlace de icono a partir de una imagen que eliges en el editor, así que una pestaña en blanco significa que no está definido, que editaste el tema equivocado o que se rechazó el formato.

Leer la solución

Elegiste un favicon nuevo y la tienda en vivo sigue mostrando el antiguo. En Shopify eso casi siempre es un tema en borrador que nunca se publicó, o la CDN de imágenes y el navegador guardando el icono anterior en caché.

Leer la solución