Cómo crear un favicon a partir de tu logo

1. Define dónde aparecerá el icono

Un favicon ayuda a reconocer una web en lugares como las pestañas del navegador y los marcadores. Antes de exportarlo, pregunta quién lo instalará y qué navegadores, plataforma web y otros destinos debe cubrir el proyecto.

La pestaña del navegador, un acceso directo en la pantalla de inicio del iPhone o del iPad y una aplicación web instalada pueden usar el mismo símbolo de marca, pero tienen requisitos de imagen y configuración distintos. Una aplicación móvil nativa también necesita sus propias especificaciones. Define esas entregas por separado para que “favicon incluido” tenga un significado concreto.

• Web: identifica el icono del navegador y los archivos alternativos necesarios.
• Pantalla de inicio o aplicación web instalada: confirma con el desarrollador los requisitos del icono táctil o del manifiesto.
• Aprobación de marca: acuerda qué símbolo, monograma o variante compacta puede representar al negocio.

Más información: MDN: función de un favicon · MDN: declaración de iconos para aplicaciones web

2. Elige un símbolo que funcione a tamaño pequeño

Empieza por un símbolo o monograma que forme parte de la identidad aprobada. Si solo existe un logotipo horizontal, propón una variante compacta y pide su aprobación antes de incorporarla a la marca. Evita deformar el logotipo para llenar un cuadrado o eliminar detalles importantes sin consultarlo.

Usa 16 × 16 y 32 × 32 píxeles como tamaños de revisión prácticos. Comprueba que la silueta se reconoce, los espacios interiores siguen abiertos y los huecos y trazos se distinguen. Son controles de producción, no una norma universal de tamaño mínimo para toda la identidad.

El cálculo siguiente muestra por qué un logo horizontal puede ser difícil de reconocer aunque esté bien exportado. Comparamos un logotipo con proporción 4:1 y un símbolo cuadrado, ajustados al mismo lienzo con márgenes proporcionales. Es un ejemplo geométrico, no una prueba con clientes ni una norma de márgenes.

Más información: MDN: tamaño habitual de un favicon · MDN: conservar las proporciones de un SVG

3. Prepara un original cuadrado y limpio

Conserva el archivo maestro editable y prepara una copia de entrega con la variante compacta aprobada. Utiliza una mesa de trabajo o un marco cuadrado y escala el símbolo de forma proporcional. Decide el margen interior: demasiado espacio reduce la presencia del símbolo; demasiado poco lo acerca en exceso a los bordes. Ajusta el centrado visual si la forma lo necesita.

En un SVG, comprueba que el viewBox exportado describe el área cuadrada prevista. El viewBox define el rectángulo de coordenadas que se adapta al área de visualización; no elimina el espacio vacío que ya haya dentro del diseño. Abre el archivo exportado y revisa sus límites reales.

Si el icono lleva letras, convierte el texto correcto y aprobado en contornos en la copia de entrega o durante la exportación. Conserva el texto editable en el maestro. Nuestra guía sobre tipografías en SVG explica qué revisar antes de convertir las letras en trazados.

Prueba el símbolo sobre fondos claros y oscuros. La transparencia no garantiza contraste: un símbolo oscuro puede desaparecer sobre una pestaña oscura. Un fondo de color o una variante aprobada para ese contexto pueden ayudar, pero revisa el resultado instalado en lugar de confiar solo en una vista previa grande.

Continúa con: Evita cambios de tipografía en logos SVG

Más información: MDN: viewBox en SVG

4. Elige los archivos que necesita la web

Prepara un conjunto de archivos concreto a partir de los requisitos del desarrollador. HTML permite declarar varios iconos, incluidos SVG escalables e imágenes ráster. El navegador elige según esas declaraciones y los formatos que admite; el orden de los archivos o su extensión no garantizan la misma elección en todos los casos.

SVG es útil para dibujos vectoriales, PNG ofrece dimensiones fijas en píxeles e ICO puede contener varias imágenes ráster en un solo archivo. Si entregas un ICO, comprueba los tamaños que incluye. El nombre del archivo no los demuestra, y cambiar la extensión de un PNG a .ico no lo convierte.

El siguiente conjunto es un ejemplo práctico para una entrega web. No es obligatorio para todos los sitios.

Más información: WHATWG: selección del icono de una web · MDN: el contenedor ICO · WebKit: iconos SVG en Safari 26

5. Exporta y revisa los archivos reales

Puedes preparar el original y las exportaciones ráster en tu editor de diseño. En Figma, selecciona el marco cuadrado, añade una exportación PNG e introduce una anchura fija, como 16w, 32w o 96w, en el campo Scale. El marco cuadrado debería generar la misma altura; verifica las dimensiones descargadas. Exporta el SVG por separado a 1×.

Si necesitas ICO, utiliza una herramienta que genere ese formato y revisa las imágenes que contiene. Guarda los ajustes manuales de las versiones pequeñas en el original de entrega para que una exportación posterior no los sustituya por error.

Abre los archivos que recibirá el cliente. Compara su forma y sus espacios con la referencia aprobada y revisa las versiones pequeñas al tamaño de uso. Si un PNG se ve más borroso de lo esperado, investiga el original y las dimensiones de exportación antes de generar más tamaños.

Continúa con: Exporta un logo desde Figma para un cliente · Averigua por qué se ve borroso un logo PNG

Más información: Figma: dimensiones y formatos de exportación

6. Revisa por separado los requisitos de Google

Google exige un icono cuadrado de al menos 8 × 8 px y recomienda superar los 48 × 48. Su lista admite PNG e ICO, pero omite SVG. Un PNG de 96 px es una opción práctica. Decláralo en una página principal rastreable, permite rastrear el archivo y mantén estable su URL. El procesamiento puede tardar semanas; su aparición no está garantizada. Google admite un favicon por nombre de host, no uno distinto para cada subdirectorio.

Más información: Centro de la Búsqueda de Google: requisitos del favicon, versión inglesa

7. Deja claras las instrucciones de entrega

Incluye el diseño aprobado, un inventario breve y el uso previsto de cada archivo. El desarrollador debe colocar las imágenes donde la web pueda servirlas y configurar los enlaces a los iconos o los ajustes de la plataforma. Descargar el ZIP no instala el favicon.

Pide una revisión de la web publicada en los navegadores acordados, con apariencia clara y oscura. Si aparece otro icono, comprueba primero qué URL declara la página y qué archivo devuelve. Deja constancia de la versión aprobada y de las rutas instaladas.

El icono táctil de Apple utiliza su propia declaración. Las aplicaciones web instaladas pueden usar un manifiesto con tamaños y usos de icono; un icono adaptable o maskable necesita un diseño comprobado dentro de su zona segura. Un PNG cuadrado grande no demuestra por sí solo que se cumplan esos requisitos.

Diseño aprobado: símbolo compacto de marca, versión 03.
Archivos para navegador: favicon.svg, favicon.ico y favicon-96.png.
Imágenes incluidas en el ICO: 16, 32 y 48 px.
Revisión: icono instalado en pestañas con fondo claro y oscuro.
Archivos adicionales para pantalla de inicio o aplicaciones: confirmar según las especificaciones acordadas.

Continúa con: Explica el uso de los archivos en la guía del logo

Más información: Apple: configuración del icono táctil, documentación archivada · MDN: preparación de iconos adaptables

8. Prepara el paquete del icono con logopack.app

Si usas logopack.app para preparar la entrega del logo, elige un SVG compacto y aprobado para el paquete opcional de favicons y revisa su margen y su fondo. La herramienta exporta el diseño elegido; la aprobación de cualquier adaptación de la marca corresponde al cliente.

El paquete incluye los archivos de la lista. La imagen de 1024 px sirve como punto de partida de alta resolución para otros usos. Los requisitos adicionales de PWA, iconos adaptables de Android o aplicaciones nativas necesitan sus propios archivos y comprobaciones.

Con una cuenta gratuita puedes previsualizar tu propio SVG y ajustar las opciones. También puedes exportar el diseño de la demo integrada; exportar tu propio diseño requiere Pro. Consulta los planes actuales y revisa la descarga final antes de entregarla.

• favicon.svg: diseño escalable del icono
• favicon.ico: imágenes de 16, 32 y 48 px incluidas en el archivo
• favicon-96.png: PNG de 96 × 96 px
• apple-touch-icon.png: PNG de 180 × 180 px con fondo opaco
• icon-1024.png: imagen de 1024 × 1024 px para preparar otros usos
• setup.html: instrucciones de instalación en la web

Más información: Prepara un paquete con logopack.app · Consulta los planes actuales

Lista final para entregar el favicon

Guarda el original comprobado del favicon junto al archivo maestro del logo. Así, la próxima actualización de la web tendrá una referencia clara y no habrá que volver a buscar el icono correcto.

• ✓El símbolo compacto está aprobado para este uso.
• ✓El diseño conserva sus proporciones dentro de un lienzo cuadrado.
• ✓Las versiones de 16 y 32 px se han revisado al tamaño de uso.
• ✓Los márgenes, los espacios interiores y los trazos finos funcionan en la exportación pequeña.
• ✓Los archivos reales coinciden con las dimensiones y el contenido del ICO indicados.
• ✓Las pruebas sobre fondos claros y oscuros usan la variante aprobada.
• ✓Hay un archivo compatible con Google si la Búsqueda está incluida en el proyecto.
• ✓El desarrollador tiene los usos de cada archivo, las instrucciones de instalación y una referencia aprobada.
• ✓Los trabajos adicionales de icono táctil, PWA o aplicación nativa están definidos por separado.