Generador de favicon
No publiques con el icono por defecto de la pestaña. Sube una imagen y exporta el set que esperan navegadores, iOS, Android y PWA.
Subir una imagen
Soporta PNG, JPG y SVG. Funciona mejor con una fuente de 512x512 o mayor.
Vista previa
Snippet HTML
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Buenas prácticas de favicon
Por qué importan varios tamaños
Navegadores, favoritos, pestañas fijadas, prompts de instalación y accesos móviles piden tamaños distintos. Un set completo evita que la plataforma escale un archivo pequeño.
PNG vs ICO
Navegadores modernos manejan bien PNG. ICO sigue sirviendo para compatibilidad legacy, mientras PNG suele dar transparencia más limpia.
Diseña para tamaños diminutos
Un favicon suele verse en 16x16. Formas simples, contraste fuerte y poco detalle sobreviven mejor que un logo completo comprimido.
Guía de iconos por plataforma
Navegador desktop
Usado en pestañas, favoritos e historial.
iOS / iPhone
Usado cuando el sitio se agrega a la pantalla de inicio. Arte opaco suele funcionar mejor.
Android Chrome
Usado junto a web manifest para instalación, splash screens y task switchers.
Instalación rápida
Descarga y extrae
Usa el botón de descarga para exportar un zip con PNG, manifest y snippet para el head.
Sube a la raíz pública
Coloca los archivos extraídos donde sean públicamente alcanzables, por ejemplo en el directorio public del sitio.
Agrega el markup del head
Copia el snippet generado en el head del documento y limpia caché del navegador para verificar los nuevos iconos.
Preguntas frecuentes
¿Qué incluye el archivo zip?
Incluye PNG comunes para favicon, Apple touch icons, tamaños de Android y un archivo site.webmanifest.
¿Qué es site.webmanifest?
Es un manifest JSON que indica al navegador cómo debe comportarse el sitio cuando se instala en pantalla de inicio o se abre como app.
¿Cómo uso estos iconos?
Sube los archivos generados a la raíz pública e incluye el markup del head en las páginas que deben exponer el favicon.
¿Por qué sigo viendo mi favicon anterior?
Los navegadores cachean favicons con fuerza. Prueba hard refresh, limpiar datos del sitio, cambiar la URL del icono o usar un perfil nuevo.
¿El favicon debe ser idéntico al icono de app?
Debe sentirse relacionado, pero no tiene que ser idéntico. Muchas marcas usan una marca simplificada para favicon y una versión más rica para iconos instalables.