Íconos, portadas y mascotas animadas para páginas de Notion

¿Un ícono de página de Notion puede ser un GIF animado?

Puedes subir uno. El centro de ayuda de Notion dice que puedes agregar "tu propia imagen o la URL de una imagen desde la pestaña Upload", que "lo ideal es que los íconos subidos midan 280 x 280 píxeles", y su lista de tipos de archivo compatibles incluye GIF. Guías de terceros sobre Notion describen GIF animados que funcionan como portadas. Las páginas de ayuda de Notion no detallan cómo se comporta la animación en cada lugar donde aparece un ícono, así que revísalo en el header de la página, la barra lateral, las menciones de enlaces y la app móvil antes de implementarlo en un espacio de equipo.

Diseña pensando en el lugar más pequeño donde se muestra. En la barra lateral el ícono es diminuto, así que un parpadeo sutil o un movimiento de boca desaparece. Elige un loop en el que se mueva toda la silueta:

• Un saludo con la mano, un pequeño rebote o una inclinación de cabeza se entienden en tamaño de ícono.
• Haz que el loop sea continuo; un salto entre el último y el primer fotograma se nota mucho cuando se repite sin fin.
• Recorta ajustado para que el personaje llene el cuadrado.

Al subir, Notion ofrece una casilla, Add to workspace Emoji library. Si la marcas, la imagen se convierte en un emoji personalizado que puedes reutilizar como ícono de página, reacción o texto en línea en todo el espacio de trabajo.

¿Qué tamaño debe tener una portada animada de Notion?

La respuesta de Notion es que "las imágenes de portada son dinámicas según el ancho de tu ventana, así que no hay un tamaño específico que funcione mejor", y recomienda "imágenes de al menos 1500 píxeles de ancho". Las guías de terceros suelen sugerir 1500×600. Como la franja visible cambia con la ventana, coloca el personaje en el centro y deja fondo liso a ambos lados; todo lo que quede cerca de los bordes se recorta en pantallas angostas.

Un GIF pequeño de un personaje no necesita estirarse a 1500 px. En su lugar, colócalo sobre un lienzo ancho del mismo color de fondo, lo que mantiene bajo el peso del archivo porque el relleno nunca cambia entre fotogramas. Ambos comandos se ejecutaron con ffmpeg 7.1.1 y generaron un ícono de 280×280 y una portada de 1500×600 a partir de un GIF cuadrado de 480 px:

# Icon: 280x280 from a square GIF
ffmpeg -i mascot.gif -filter_complex "scale=280:280:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 icon.gif

# Cover: center the 480 px GIF on a 1500x600 canvas of the same background color
ffmpeg -i mascot.gif -filter_complex "pad=1500:600:(ow-iw)/2:(oh-ih)/2:color=0xF4EFE6,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:diff_mode=rectangle" -loop 0 cover.gif

Reemplaza 0xF4EFE6 por el color de fondo exacto de tu GIF. stats_mode=diff y diff_mode=rectangle indican a los pasos de paleta que se concentren en los píxeles que se mueven, lo que mejora tanto la calidad como el peso.

Revisa el peso antes de subirlo. El centro de ayuda de Notion dice que en el plan Free "todos los archivos que subas deben pesar menos de 5 MB", y en los planes de pago las imágenes (PNG, JPG) deben pesar menos de 5 MB. Si el GIF es demasiado grande, baja los cuadros por segundo, acorta el loop o reduce el tamaño del personaje.

¿Cómo evito que un ícono GIF parezca una caja en modo oscuro?

El tema de Notion es un ajuste de cada persona que ve la página, y una página tiene un solo ícono, así que no puedes publicar una versión clara y otra oscura del mismo ícono. La cuestión es cómo se ve el fondo del GIF en ambos:

En un GIF la transparencia es total o nula en cada píxel, así que los bordes suaves con antialiasing pensados para un fondo claro dejan un halo pálido en páginas oscuras. Si quieres transparencia, convierte desde un original con un canal alfa real y acepta bordes duros; la guía de GIF transparente tiene los ajustes de ffmpeg. A menudo el cuadro de color es la opción más limpia: un cuadrado de color con el personaje dentro se ve intencional en ambos temas.

Las portadas son más fáciles. Una portada es una franja ancha, así que un color de fondo intermedio entre claro y oscuro (un color de marca suave) se ve bien en cualquiera de los dos temas.

¿Puedo insertar una animación interactiva de Rive en Notion?

Solo mediante un enlace alojado. Notion no puede ejecutar tu propio script, pero su bloque /embed muestra contenido de más de 1900 dominios a través del servicio Iframely. La documentación de Rive dice que su opción Embed link está pensada para "plataformas que generan vistas previas de enlaces automáticamente, como Notion y Telegram". Las limitaciones:

• Generar URL de embed requiere un plan Voyager o Enterprise de Rive y un archivo en el editor de Rive.
• Una URL de embed es una instantánea; después de hacer cambios tienes que generar un enlace nuevo.
• Rive señala que los embeds "usan iframes y no dan acceso a las API del runtime de Rive", así que el personaje puede reproducir su máquina de estados y reaccionar a clics dentro del marco, pero nada en Notion puede cambiar su estado de ánimo.

También puedes pegar la URL de tu propia página que aloje la animación. Que se muestre o no depende de si el servicio de embed de Notion admite ese sitio; Notion advierte que algunos sitios web no se pueden insertar y muestran "Failed to Load".

¿Cómo ejecuto una mascota de marca real de Rive en un sitio de Super.so?

Super convierte páginas de Notion en un sitio web y te permite agregar código. Su documentación indica que el código para todo el sitio va en la página Code del editor del sitio, con secciones Head, Body y CSS, y que el código para una sola página se agrega "haciendo clic en el ícono de código de una página específica en 'Pages' de tu sitio". El código de Body "se agregará en la parte superior de la página", así que un canvas con posición fija es la ubicación más sencilla: no depende de la estructura de páginas de Notion.

<canvas id="mascot" width="160" height="160" role="img" aria-label="Animated mascot"
  style="position: fixed; right: 16px; bottom: 16px; width: 160px; height: 160px; z-index: 50"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://cdn.example.com/character.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  document.getElementById("mascot").addEventListener("click", () => {
    r.viewModelInstance.trigger("yes").trigger();
  });
</script>

• Aloja el .riv en HTTPS con CORS habilitado, igual que para cualquier embed en un sitio web.
• Super muestra los colores de Notion como variables CSS, por ejemplo --color-bg-default (#FFFFFF en modo claro y #2F3437 en modo oscuro, según su tabla). Como el canvas de Rive es transparente, el personaje queda sobre el fondo que use el sitio.
• Agrégalo por página si la mascota pertenece a una sola página, como la portada de un centro de ayuda, en lugar de ponerla en todas.

La configuración completa del canvas está en cómo agregar animación a un sitio web.

¿Qué exportaciones de Charmotion sirven para Notion y Super?

Charmotion crea 17 animaciones a partir de una sola imagen de un personaje o logo. Para Notion, la exportación GIF (480 px, fondo sólido) es la opción directa: redúcela a 280×280 para un ícono y agrégale relleno para una portada con los comandos de arriba, usando el mismo color de fondo del GIF. Charmotion no exporta GIF transparentes; si necesitas uno, convierte tú mismo el WebM transparente y cuenta con bordes duros.

Para un sitio de Super.so, usa el .riv: diez moods en loop seleccionados con un número mood y seis triggers puntuales, con código web para adaptar. El .riv y el video transparente están en todos los planes de pago (desde $20/mes), junto con MP4, GIF y el video de inicio 9:16 con fondo sólido.

Cómo agregar un ícono y una portada animados con tu mascota de marca a una página de Notion

1. Elige el loop. Elige un loop continuo en el que se mueva todo el personaje, como un saludo o un rebote.
2. Crea el ícono. Escala el GIF a 280×280 con ffmpeg y vuelve a generar la paleta.
3. Crea la portada. Coloca el GIF sobre un canvas de 1500×600 del mismo color de fondo para que el personaje quede centrado.
4. Revisa el peso. Mantén cada archivo por debajo de 5 MB; si no, baja los cuadros por segundo o acorta el loop.
5. Súbelo. Usa la pestaña Upload para el ícono y Change cover para la portada; si quieres, agrega el ícono a la biblioteca de emojis del espacio de trabajo.
6. Prueba ambos temas. Revisa la página en modo claro y oscuro, en escritorio y en móvil, y en la barra lateral.

Preguntas frecuentes

¿Por qué Notion no acepta la carga de mi GIF?

La causa más común es el peso. El centro de ayuda de Notion indica que las cargas en el plan Free deben pesar menos de 5 MB, y para las imágenes en planes de pago también indica menos de 5 MB. Reduce los cuadros por segundo, acorta el loop, recorta el espacio vacío o reduce el GIF antes de volver a subirlo.

¿Puedo poner un ícono de página de Notion distinto para el modo oscuro?

Las páginas de ayuda de Notion no describen un ícono aparte para el modo oscuro. Cada persona elige su propio tema y la página muestra el mismo ícono a todos, así que diseña una imagen que funcione en ambos, por ejemplo un personaje sobre un fondo de color con esquinas redondeadas.

¿Puedo usar el GIF de mi mascota como emoji personalizado en Notion?

Sí. Al subir un ícono de página, marca Add to workspace Emoji library. Así Notion te deja usarlo como ícono de página, como reacción o dentro del texto de una página en todo el espacio de trabajo. Pruébalo en tamaño de reacción, donde se pierden los detalles pequeños.

Respuestas rápidas de esta guía

• ¿Se puede animar el ícono de una página de Notion?
• ¿Puedo insertar una animación de Rive en Notion?

Fuentes

• Customize and style your content (icons and covers), Notion Help Center
• Images, files and media, Notion Help Center
• Embeds, bookmarks and link mentions, Notion Help Center
• Sharing and embedding: Embed URLs, Rive
• Custom code, Super Docs
• Notion colors, Super Docs
• How to add Notion cover images (GIFs too), Simple.ink
• FFmpeg filters documentation (pad, palettegen, paletteuse), FFmpeg