Cómo crear un favicon y añadirlo a tu sitio web

Elige la vía para tu web: en WordPress puedes subir una imagen cuadrada mediante el ajuste de icono del sitio; otros editores suelen tener su propio campo de icono del sitio. Si editas el HTML, crea los archivos de icono y sigue las instrucciones HTML. Puedes omitir el ZIP y el manifiesto si tu editor crea los iconos.

¿Qué es un favicon y dónde aparece?

Un favicon es el pequeño icono que permite reconocer tu sitio en una pestaña o un marcador del navegador. Una versión más grande puede representarlo en la pantalla de inicio del móvil. Por eso un mismo diseño puede necesitar varios tamaños.

Imagina a alguien con doce pestañas abiertas. El nombre completo de tu empresa quizá ya no se vea, pero un símbolo distintivo sigue ayudando a encontrar tu sitio. Diseña pensando en ese espacio reducido.

El favicon, el logo de cabecera y la imagen de enlaces compartidos son distintos. Cambiar uno no sustituye los demás. Un logo ancho puede resultar ilegible al reducirlo a un cuadrado.

Elige primero cómo vas a instalar el favicon. Así prepararás solo los archivos necesarios, sin tratar cada elemento del paquete como un requisito.

Si el creador dispone de un ajuste de icono, empieza ahí. Las instrucciones HTML requieren acceso al head común. Pegar etiquetas en un bloque visible de contenido no equivale a instalarlas.

Elige un diseño que funcione a 16 píxeles

Usa la parte más reconocible de la marca: una inicial fuerte, un símbolo sencillo o la silueta de una mascota. El nombre y eslogan completos ocupan demasiado. Elimina detalles visibles solo en grande.

Imagina una panadería con un pan, espigas y el nombre «Panadería de la Ribera». El favicon podría conservar la silueta y un corte distintivo del pan. Todo junto se volvería un grupo de marcas diminutas.

Mira el tamaño real. Un dibujo de 512 píxeles ampliado no demuestra que una separación estrecha sobreviva a 16. ¿Reconoces la forma en uno o dos segundos sin acercarla?

• Una idea principal. Evita varios elementos que compitan dentro del cuadrado.
• Bordes claros. Las líneas finas y huecos pequeños pueden desaparecer al reducir.
• Contraste suficiente. Un símbolo claro transparente puede perderse en una interfaz clara.
• Texto con medida. Una letra gruesa puede funcionar; el nombre completo, pocas veces.
• Revisa la silueta. Simplifica si depende de detalles diminutos para reconocerse.

Puedes preparar una versión específica para tamaños pequeños. No tiene que ser una miniatura completa del logo. Dibuja aparte las formas precisas a 16 píxeles: el generador cambia el tamaño, pero no decide qué detalles de marca eliminar.

Prepara la imagen original sin perder detalles

Siempre que puedas, exporta desde el diseño original. Un PNG cuadrado de al menos 512 × 512 píxeles es un buen punto de partida, porque el mayor icono del paquete mide 512 píxeles. No significa que una pestaña lo muestre a ese tamaño.

Si el logo es vectorial, exporta un PNG cuadrado desde tu programa de diseño. Pixilo admite JPG, PNG y WebP, no SVG. Conserva el vector para futuros cambios.

Ampliar un icono borroso de 32 a 512 píxeles no recupera detalles. Busca un original mejor o simplifica el dibujo. El generador avisa si algún lado mide menos de 512, porque las salidas grandes necesitarán ampliación.

Resuelve la composición cuadrada antes del peso. Ajustar un rectángulo mantiene proporciones, pero puede dejar mucho vacío. El recorte central elimina partes. Ninguno arregla automáticamente un logo de texto ancho.

Si el motivo está descentrado, prepara el encuadre con el recortador de imágenes. El generador recorta desde el centro; no desplaza el área hacia una cara o símbolo lateral.

Prueba PNG para transparencias y bordes gráficos nítidos. En JPG, busca borrosidad y manchas alrededor del símbolo. Otro formato no repara el detalle perdido. La guía JPG frente a PNG ayuda a elegir.

Tamaños y formatos: ¿qué archivos necesitas?

No necesitas subir una imagen distinta para cada dispositivo. Empieza por los requisitos de tu sitio. Una web HTML puede enlazar unos pocos iconos; un sistema de gestión de contenidos puede crear varias versiones desde una sola imagen.

ICO puede contener varias imágenes. Pixilo crea un ICO real con versiones de 16, 32 y 48 píxeles. Cambiar el nombre de un PNG a .ico no crea esa estructura. Cada PNG contiene una sola imagen y se puede revisar por separado.

El icono Apple de 180 píxeles tiene otra función. La documentación web de Apple explica el enlace apple-touch-icon para inicio. Un favicon diminuto no es una buena fuente para ese uso mayor.

El ZIP incluye nueve archivos. Los PNG de 32 y 48 sirven para campos que piden esos tamaños; no hay que enlazarlos todos además del ICO y PNG de 96. Las instrucciones son para ti, no un archivo necesario para visitantes.

Elige la transparencia y el margen con criterio

Un icono transparente usa el fondo de la interfaz. Prueba símbolos oscuros sobre oscuro y claros sobre claro. Si desaparecen, usa un contorno contrastado o un fondo uniforme.

En Pixilo, la transparencia se aplica al ICO y a los PNG de 32, 48 y 96 píxeles. El icono Apple y las versiones de 192 y 512 píxeles siempre usan el fondo uniforme elegido. Ese color sigue afectando a los iconos grandes aunque los del navegador sean transparentes.

La opción no elimina un fondo existente. Los píxeles blancos alrededor del logo siguen blancos. Parte de una imagen realmente transparente si buscas ese resultado.

El porcentaje de margen se aplica a cada lado. Un 10% deja al dibujo el 80% del ancho; un 20% deja el 60%. A 16 píxeles, la segunda opción reserva solo unos 10 píxeles para el símbolo. Algo de espacio ayuda, pero demasiado dificulta reconocerlo.

Revisa los márgenes de la fuente. Si el logo ocupa la mitad central del PNG, poner margen adicional cero no elimina el vacío inicial. Recorta primero lo innecesario y después ajusta el generador.

Compara el valor inicial con uno menor y otro mayor. Mira primero 16 píxeles. El porcentaje afecta a todo el lienzo, no solo a la forma coloreada.

Añadir un favicon en WordPress

Usa la función integrada de icono del sitio. La documentación de WordPress recomienda un PNG cuadrado de al menos 512 × 512 píxeles. Desde WordPress 6.5, abre Ajustes → Generales, elige la imagen y guarda. En versiones anteriores puede estar en Apariencia → Personalizar → Identidad del sitio.

Un tema de bloques compatible puede ofrecer Apariencia → Editor → Identity. Los nombres dependen del idioma de la interfaz. Consulta la documentación Site Editor Identity.

El archivo icon-512.png de Pixilo sirve. Comprueba su fondo uniforme antes de subirlo. También puedes usar un PNG original cuadrado adecuado para conservar transparencia.

1. Selecciona el PNG en el campo de icono del sitio.
2. Guarda y abre la página de inicio pública y otra página.
3. Comprueba la pestaña. Si otro componente conserva el icono anterior, sigue la resolución de problemas.

WordPress crea las referencias. El archivo ZIP no es un tema ni un complemento; las etiquetas HTML no se pegan en el contenido de una entrada o página.

Logo e icono del sitio son ajustes distintos. Cambiar el logo ancho de cabecera no necesariamente cambia la pestaña. Guarda la opción correspondiente.

Crear un favicon desde tu logo con Pixilo

1. Elige una imagen. Abre el generador de favicon y selecciona un JPG, PNG o WebP de hasta 25 MB. La imagen tampoco puede superar 8000 píxeles por lado ni 32 millones de píxeles en total.
2. Elegir el ajuste. Ajustar conserva imagen y proporciones; el cuadrado recorta el centro. Comprueba que nada importante quede fuera.
3. Ajusta el margen y el fondo. Compara las vistas del navegador a tamaño real y la vista Apple. Decide si los iconos del navegador deben tener un fondo transparente.
4. Descargar lo necesario. ZIP proporciona el paquete; una descarga individual sirve para un campo concreto.
5. Instalar y probar. Usa los ajustes de la web o las instrucciones HTML. Comprueba el sitio publicado, no solo la vista previa.

Ajusta las opciones hasta que las vistas previas se vean bien y descarga. No necesitas un botón aparte para guardar: la descarga utiliza las últimas elecciones. Un archivo que ya has guardado en el dispositivo no cambia al modificar la vista. Vuelve a descargarlo si retocas el diseño.

La imagen original y los archivos generados permanecen en tu dispositivo; no se envían al servidor de Pixilo. La página abierta conserva la imagen y los ajustes, así que descarga el resultado antes de cerrarla o recargarla.

«Elegir otra imagen» muestra de nuevo el selector y conserva opciones. Revisa ajuste, margen y fondo para el nuevo dibujo.

Ejemplo: convertir un logo ancho en un icono útil

Supongamos que una panadería tiene un logo de 1200 × 600 con un pan y un nombre largo. Es un ejemplo del proceso de trabajo, no una comparación medida de las imágenes de este artículo.

1. Separar el símbolo. Exporta el pan del original como PNG cuadrado de 512 × 512, no como captura pequeña.
2. Quitar márgenes innecesarios. Conserva los bordes del pan y deja al símbolo suficiente espacio visible.
3. Comparar vistas pequeñas. Empieza con Ajustar y margen inicial. Si el corte desaparece a 16 píxeles, simplifica el original en vez de ampliar una copia borrosa.
4. Probar el fondo. Si el contorno oscuro se pierde, prueba un fondo uniforme contrastado para navegador. Revisa también Apple.
5. Descargar según el sitio. HTML con navegador y Apple usa ICO, PNG de 96 e icono Apple. WordPress usa el PNG de 512.

El símbolo debe reconocerse antes de instalarlo. Si solo funciona en grande, modifica el dibujo. Una extensión correcta no soluciona una composición sobrecargada.

Añadir un favicon a una web HTML

Extrae el ZIP y coloca los iconos elegidos en la carpeta que publica tu sitio. Con las rutas siguientes, el ICO debe estar disponible en una dirección como https://example.com/favicon.ico. Guarda los archivos originales en una carpeta que el proceso de compilación copie a la publicación. Si los añades solo a la carpeta generada, pueden desaparecer en la próxima compilación.

Añade las dos primeras etiquetas al <head> de la página para los iconos del navegador. Incluye la tercera si quieres un icono Apple para la pantalla de inicio. Si las páginas comparten una plantilla head, añádelas allí para mantener las mismas referencias en todo el sitio.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href indica la ubicación del archivo y sizes sus dimensiones. El navegador puede elegir según el formato, el tamaño y otras declaraciones; no presupongas que siempre usa la primera etiqueta. Consulta la referencia MDN de rel="icon".

Si usas la carpeta /icons/, cambia las tres rutas: /icons/favicon.ico, /icons/favicon-96x96.png y /icons/apple-touch-icon.png. La ubicación y referencia deben coincidir.

Un / inicial empieza en la raíz del dominio. Si publicas bajo /portfolio/, adapta las rutas a ese despliegue. Abre cada URL directamente después de publicar.

Busca declaraciones favicon y manifiesto existentes. Sustituye las obsoletas. Dejar el icono antiguo del tema junto al nuevo dificulta saber cuál elige el navegador.

Opcional: añadir o actualizar el manifiesto

Omite esto si solo necesitas iconos de navegador. El manifiesto es independiente y no hace falta para la pestaña.

Un manifiesto de aplicación web es un archivo JSON que describe la aplicación y sus iconos. El site.webmanifest de Pixilo contiene solo entradas de iconos. Si ya tienes un manifiesto, integra las nuevas sin sustituir el nombre, la dirección inicial ni el modo de visualización. La guía de web.dev explica esos campos.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Para el nuevo manifiesto de iconos, añade esta referencia al head común. Si ya se enlaza otro manifiesto, actualízalo en lugar de añadir uno competidor.

<link rel="manifest" href="/site.webmanifest">

Dentro de /icons/, el enlace será href="/icons/site.webmanifest". Cambia también las rutas JSON a /icons/icon-192.png y /icons/icon-512.png: la barra inicial apunta a la raíz del dominio, no a la carpeta del manifiesto.

Los iconos generados usan purpose: "any". No son iconos maskable, que necesitan un diseño capaz de conservar los detalles importantes cuando el dispositivo los recorta en círculo u otra forma. Un fondo uniforme no basta. No cambies su propósito a maskable sin preparar y probar un diseño adecuado. Consulta la referencia MDN sobre el propósito de los iconos.

El archivo sigue teniendo solo iconos, no una configuración completa. No convierte la web en aplicación instalable por sí solo.

El favicon en la búsqueda de Google

Un símbolo reconocible ayuda a identificar el sitio. Apoya marca y usabilidad, sin garantizar mejores posiciones ni más clics.

Las directrices de Google exigen una imagen cuadrada de al menos 8 × 8 píxeles y recomiendan un tamaño mayor de 48 × 48. El PNG de 96 píxeles del paquete es una opción práctica. Enlázalo desde la página de inicio, mantén estable la URL y permite que Googlebot acceda al inicio y Googlebot-Image al icono.

Google usa un favicon por nombre de host, como example.com; una sección en example.com/blog/ no recibe otro icono en los resultados. Cumplir las directrices no garantiza que aparezca. El rastreo y procesamiento pueden tardar días o semanas. Una solicitud de indexación en Search Console no fuerza una actualización inmediata.

Si el navegador muestra el nuevo pero Google no, comprueba primero archivos públicos y etiquetas de inicio. Cambiar continuamente el diseño dificulta identificar la versión procesada.

¿Por qué falta el favicon o aparece el anterior?

Distingue instalación de una copia antigua en caché. Actualizar la página no arregla una URL incorrecta. Si la URL muestra la imagen adecuada, revisa etiquetas y caché.

Abre la URL exacta del icono en una pestaña nueva. Debe mostrar la imagen, no la página de inicio, una pantalla de acceso o un error. Para comprobarlo mejor, abre el panel de red de las herramientas de desarrollo y recarga. Un estado 200 no basta si la respuesta contiene HTML en lugar de una imagen.

Comprueba el head publicado en inicio y una página interna. La compilación puede omitir cambios, o un componente añadir etiquetas antiguas. Sigue nombres y rutas instalados.

El navegador puede guardar favicons aparte de la página. Cierra y abre la pestaña; prueba un perfil nuevo u otro navegador. Recargar no siempre sustituye el icono al instante, ni estos controles garantizan cambios simultáneos en buscadores y navegadores.

Con CDN o service worker, comprueba respuestas antiguas y actualiza la caché correspondiente. Corrige una cosa, verifica y continúa solo si persiste el problema.

Comprobaciones finales

• Diseño reconocible a 16 y 32 píxeles sin ampliar.
• Bordes y colores visibles sobre fondo claro y oscuro.
• Descargas con ajuste, margen y fondo definitivos.
• Cada URL abre el archivo público correcto.
• Head compartido con referencias correctas sin duplicados obsoletos.
• Referencias Apple y manifiesto hacia archivos publicados.
• Otros ajustes del manifiesto existente conservados.
• Inicio e icono accesibles a Google para optar a mostrarlo.

Conserva original y paquete final juntos. Anota si configura el icono la plantilla HTML, WordPress o el creador de páginas. Facilitará el siguiente cambio de marca.

Preguntas frecuentes

¿Cuál es el mejor tamaño de favicon?

Usa una imagen cuadrada nítida y suficientemente grande para los archivos que necesitas. Un original de 512 × 512 cubre el mayor archivo del paquete, pero no es obligatorio para una pequeña pestaña. La tabla de tamaños explica las dimensiones y sus usos.

¿Necesito ICO y PNG?

No en todos los sitios. El ejemplo HTML de Pixilo incluye un ICO con varias imágenes pequeñas y un PNG mayor. Un CMS puede crear sus propias versiones a partir de una imagen. Sigue los requisitos del ajuste utilizado, en lugar de subir todos los archivos disponibles.

¿Puede ser transparente el fondo?

Sí, los iconos del navegador pueden conservar la transparencia. Comprueba que el símbolo se distingue sobre diferentes fondos. Los iconos de inicio usan el color uniforme elegido, y la opción no elimina un fondo que ya esté en la imagen original.

¿Por qué mi logo se ve borroso?

La imagen original puede estar borrosa o tener más detalles de los que admite una pequeña favicon. Ampliarla no resuelve esos problemas. Usa un original nítido, simplifica los detalles y examina las vistas a tamaño real antes de ajustar el margen.

¿Subo el ZIP directamente a WordPress?

No. Extrae el paquete y usa un PNG cuadrado adecuado, como icon-512.png, en el ajuste de icono del sitio. El ZIP contiene archivos e instrucciones, no un tema ni un complemento de WordPress.

¿Mejora el favicon el SEO?

Favorece una identidad consistente y reconocible. No presupongas mejores posiciones. Cumple las directrices y espera; ser apto no garantiza la aparición.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)