Cómo crear un favicon
Crear un favicon es un trabajo de dos minutos con la herramienta adecuada. Comience a partir de una imagen de origen cuadrada (al menos 512 × 512 píxeles), ejecútela a través de favicon generator y obtenga un paquete completo: .ico de varios tamaños, SVG, apple-touch-icon y manifiesto PNG. Esta guía recorre cada paso desde la preparación del código fuente hasta la verificación del navegador. Para obtener una referencia detallada, consulte también full tutorial.
Un favicon es el pequeño icono que muestra un navegador en la barra de pestañas, la barra de direcciones y la lista de favoritos. En dispositivos móviles, se convierte en el ícono de la pantalla de inicio cuando un usuario guarda su sitio. En Windows aparece en los pines de la barra de tareas y en los accesos directos del escritorio. Obtener el favicon correcto es un pequeño esfuerzo con un impacto de marca enorme: cada vista de página comienza con su ícono en la pestaña del usuario.
La configuración moderna de favicon no es un solo archivo, es un conjunto coordinado. Un .ico de varios tamaños maneja el respaldo universal del navegador. Un SVG ofrece una representación nítida y escalable en navegadores modernos, incluida la compatibilidad con el modo oscuro. Un PNG (apple-touch-icon) de 180 × 180 es lo que utiliza iOS para las instalaciones de la pantalla de inicio. Un PNG de 192 × 192 y un PNG de 512 × 512 alimentan el mensaje de instalación Android PWA. Una imagen fuente bien preparada genera todo esto a la vez.
La preparación de la imagen fuente es el paso que más se pasa por alto. Su logotipo debe ser cuadrado: un corte asimétrico siempre produce un resultado alargado. Diseñe una versión simplificada de su marca que se lea claramente en tamaños pequeños: reduzca las líneas finas, elimine el texto pequeño y aumente el contraste. Lo que parece elegante en 512×512 puede convertirse en una mancha ilegible en 16×16 si omite este paso de simplificación.
SVG es el formato fuente ideal porque es independiente de la resolución. Un gráfico vectorial se rasteriza a cualquier densidad de píxeles sin pérdida de calidad. Si solo tiene un ráster PNG o JPG, asegúrese de que tenga al menos 512 × 512 antes de generarlo; la reducción de escala desde algo más pequeño introduce un desenfoque que se agrava en cada paso de cambio de tamaño y da como resultado un ícono de pestaña borroso.
El formato .ico es un contenedor, no una sola imagen. Contiene varios marcos rasterizados, normalmente de 16 × 16, 32 × 32, 48 × 48 y 64 × 64, en un solo archivo. El navegador analiza el directorio ICO y muestra solo el fotograma que más se acerca a la densidad de visualización que necesita. Este enfoque de archivo único significa que no necesita etiquetas de enlace independientes para cada resolución: una etiqueta cubre todos los tamaños de pestañas.
Cargue su imagen de origen en el favicon generator. La herramienta procesa todo localmente en su navegador: su imagen nunca sale de su dispositivo. En cuestión de segundos, produce un paquete de descarga que contiene favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest, además de etiquetas de enlace HTML listas para pegar.
Colocar los archivos es sencillo. Coloque todos los archivos generados en el directorio raíz público de su sitio, la misma carpeta que sirve a su index.html. Para los proyectos de aplicaciones Vite y Create React, esta es la carpeta /public. Para proyectos Next.js App Router, coloque favicon.ico dentro de /app y los archivos PNG en /public. Para sitios estáticos, coloque todo junto con sus archivos HTML.
Las etiquetas de enlace HTML indican a los navegadores qué archivo utilizar para cada contexto. El mínimo es una línea: `<link rel='icon' href='/favicon.ico'>`. El conjunto completo recomendado agrega tres líneas más: una para la variante SVG, otra para apple-touch-icon y otra para el manifiesto web. Pegue el fragmento generado dentro de su elemento `<head>`. El orden de las etiquetas no importa siempre que precedan a "</head>".
El almacenamiento en caché del navegador es la principal causa de confusión cuando un favicon no parece actualizarse. Los navegadores almacenan en caché /favicon.ico por origen y es posible que no respeten los encabezados de control de caché estándar como lo hacen con otros activos. Si su antiguo ícono persiste, abra una nueva ventana de incógnito o agregue una cadena de consulta de eliminación de caché como `?v=2` al href en su etiqueta de enlace para obligar a los navegadores a buscar el archivo actualizado.
Los errores comunes incluyen cargar una imagen que no sea cuadrada (produce íconos alargados), usar una fuente de menos de 256 × 256 píxeles (se difumina en tamaños de pantalla más grandes) y omitir apple-touch-icon (las instalaciones de la pantalla de inicio de iOS muestran una captura de pantalla de la página). Los tres se resuelven comenzando desde una fuente cuadrada de 512×512 PNG o SVG y dejando que el generador maneje cada tamaño de salida.
Vale la pena incorporar la compatibilidad con el modo oscuro desde el principio. Muchos navegadores muestran la barra de pestañas en un cromo oscuro cuando el sistema del usuario está en modo oscuro. Si su ícono es una marca oscura sobre un fondo transparente, puede desaparecer en una pestaña oscura. Envíe un favicon SVG con un bloque de estilo `@media (prefers-color-scheme: dark)` incorporado que cambia el color de relleno; no se requieren etiquetas HTML adicionales, solo un archivo SVG actualizado.
Verifique su favicon usando live favicon tester después de la implementación. El probador simula los contextos de pestañas del navegador, marcadores y mensajes de instalación y muestra cómo se representa su ícono a 16, 32, 48, 128 y 512 píxeles uno al lado del otro. También verifique manualmente una pestaña fijada en Chrome y Safari, y use 'Agregar a la pantalla de inicio' en iOS para confirmar apple-touch-icon.
Para ver tutoriales específicos de la plataforma, consulte favicon for WordPress, favicon for Shopify, favicon for React y favicon for Next.js. El conjunto de archivos generado es idéntico en todas las plataformas; lo que varía es dónde se cargan los archivos y cómo la plataforma inyecta o anula las etiquetas de enlace HTML.
Revise su favicon cada vez que cambie su marca. Los favicons almacenados en caché persisten en los marcadores y en las pantallas de inicio de los dispositivos móviles mucho después de que se activa el rediseño del sitio. Actualizar la cadena de versión en la etiqueta de enlace href obliga a los navegadores a buscar el nuevo archivo en la próxima visita, reemplazando gradualmente el ícono anterior en todas las ubicaciones almacenadas en caché. Consulte la guía best favicon format para obtener un desglose formato por formato de las compensaciones entre el tamaño del archivo y la compatibilidad.
Cómo funciona
- 1
Prepare una imagen de origen cuadrada
Exporte su logotipo o ícono como PNG de 512 × 512 con un fondo transparente, o como SVG con un viewBox cuadrado (por ejemplo, `viewBox='0 0 512 512'`). Simplifique los detalles finos que serán invisibles en 16×16.
- 2
Genera tu paquete de favicon
Sube la fuente al [favicon generator](tool:favicon-generator). La herramienta produce favicon.ico (multitamaño 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest, todo en una sola pasada.
- 3
Copie todos los archivos a la raíz de su sitio
Coloque cada archivo del zip de descarga en la raíz pública de su proyecto: el directorio que sirve index.html. Para Next.js App Router, favicon.ico va en /app; los PNG van en /public.
- 4
Pegue las etiquetas de enlace HTML en <head>
Copie el fragmento HTML generado y agréguelo dentro de su elemento `<head>`. El conjunto completo cubre el respaldo .ico, la variante SVG, apple-touch-icon y el enlace de manifiesto: seis líneas en total.
- 5
Verificar en navegadores y dispositivos
Abra su sitio en Chrome, Safari, Firefox y Edge. Inspeccione la pestaña, la barra de marcadores y la barra de direcciones. En iOS, toque la hoja Compartir y "Agregar a la pantalla de inicio" para probar el apple-touch-icon. Utilice el [favicon tester](utility:favicon-tester) para una simulación rápida.
- 6
Eliminación de caché al actualizar un favicon existente
Si reemplaza un favicon en vivo, incremente la cadena de versión en la etiqueta de enlace href (`?v=2`, `?v=3`, etc.). Esto obliga a todos los navegadores a buscar el archivo actualizado en la siguiente carga de la página en lugar de servir la versión almacenada en caché.
Pruébalo ahora
Crea tu favicon ahora
Generador de FaviconPreguntas frecuentes
¿Cuál es la forma más sencilla de crear un favicon?+
Cargue un PNG o SVG cuadrado de 512 × 512 al generador FetchFavicon. Produce todos los archivos necesarios (.ico, SVG, apple-touch-icon, manifiesto PNGs) más HTML listo para pegar en menos de un segundo, sin registro ni carga en el servidor.
¿Qué tamaño debe tener mi imagen de origen?+
Al menos 512×512 píxeles, idealmente como SVG. Al hacerlo más pequeño, se corre el riesgo de que se vea borroso en el tamaño de 256 × 256 utilizado por Windows y en el tamaño de 512 × 512 requerido para las indicaciones de instalación de PWA. Ampliar una imagen pequeña agrava la pérdida de calidad en cada paso de cambio de tamaño.
¿Necesito un apple-touch-icon?+
Sí, si algún visitante utiliza un iPhone o iPad. Sin él, las instalaciones de la pantalla de inicio de iOS muestran una miniatura de captura de pantalla de baja calidad de su página en lugar de su marca. Un PNG de 180 × 180 vinculado con `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` es todo lo que necesita.
¿Por qué mi favicon no aparece en la pestaña del navegador?+
La mayoría de las veces se trata de un problema de almacenamiento en caché. Abra una ventana privada/de incógnito y navegue hasta su sitio. Si aún no aparece, verifique que favicon.ico se proporcione en la raíz de su dominio y que la ruta href de la etiqueta de enlace se resuelva correctamente; verifique que no haya errores tipográficos ni barras diagonales que falten.
¿Necesito tanto .ico como SVG?+
Sí, para una cobertura total. El .ico maneja navegadores heredados, accesos directos Windows y herramientas de terceros que recuperan /favicon.ico directamente. El SVG maneja una representación nítida en Chrome, Firefox, Edge y Safari 15+ y admite el cambio de color en modo oscuro. El tamaño del archivo combinado suele ser inferior a 30 KB.
¿Cuánto tiempo tarda en propagarse un cambio de favicon?+
Desde segundos hasta varios días, dependiendo de la agresividad con la que el navegador almacenó en caché el original. La solución más rápida es agregar una nueva cadena de consulta (`?v=2`) a su favicon href. Esto hace que los navegadores la traten como una nueva URL y obtengan una copia nueva inmediatamente.
¿Puedo usar un JPEG como fuente de favicon?+
Puede cargar un JPEG al generador, pero los JPEG no admiten transparencia. Si su ícono necesita un fondo transparente, que se ve mejor en las pestañas del navegador, comience desde PNG-32 o SVG. El generador convertirá correctamente a .ico y PNG.