Flujos de trabajo creativos
Convierte tu logo de IA en un favicon que se lea a 16 píxeles
Un logotipo de café elegante en un rótulo puede convertirse en una mancha en la pestaña del navegador. El favicon necesita un símbolo reconocible y archivos pequeños reales, además de una vista reducida del logo.
La tienda de cerámica ficticia usa una silueta sencilla de taza con asa abierta. Conserva ese hueco al preparar los archivos pequeños reales del icono web.
Elige el símbolo antes de reducir todo el logotipo
Abre el logo en Ciyo e identifica qué parte se reconoce sin leer el nombre del negocio. Quita el lema y los adornos secundarios de la versión favicon. Conserva el logotipo completo para la cabecera del sitio.
Un icono simplificado puede representar mejor la marca que una copia diminuta de todos los detalles. Mantén la silueta y la relación entre los colores aprobados.
Prepara un original limpio
Si necesitas vectorizar, usa la herramienta Vector y revisa el SVG exportado. Busca rectángulos de fondo, partes cortadas y trazos sueltos. Vectorizar no simplifica automáticamente un dibujo demasiado complejo.
Deja espacio alrededor del símbolo. No recortes hasta el último píxel pintado si el asa queda pegada al borde. Guarda el original antes de preparar versiones por tamaño.
Usa el símbolo de taza de este logo para preparar el original de un favicon. Conserva el hueco del asa, elimina el texto, usa gris carbón sobre marfil y centra el símbolo en un cuadrado. Muestra vistas de 16, 32 y 64 píxeles. Indica qué detalles desaparecen sin afirmar que todos los tamaños pasan la revisión.Exporta archivos reales para cada uso
Pide al agente de diseño que genere PNG en los tamaños necesarios y un ICO auténtico con las entradas pequeñas solicitadas desde su espacio de archivos. Renombrar un PNG como .ico cambia el nombre, no el formato.
Un PNG grande puede servir para otras superficies del sitio; el ICO pequeño, para el navegador. Comprueba los requisitos de tu plataforma y explica la función de cada archivo al entregarlo.
| Archivo | Tamaño de ejemplo | Qué revisar |
|---|---|---|
| Vista PNG | 16 × 16 | Silueta y asa abierta |
| Vista PNG | 32 × 32 | Bordes y centrado |
| PNG grande | 64 × 64 | Forma cuadrada y colores de marca |
| ICO | Entradas de 16 y 32 píxeles | Codificación real de las entradas, además del nombre |
Revisa cada tamaño sin ampliarlo
Coloca las vistas en una página sencilla, a un píxel de imagen por píxel de pantalla, y comprueba fondos claros y oscuros. Ampliar ayuda a estudiar los bordes, pero no sustituye la prueba al tamaño real.
Si el asa se cierra a 16 píxeles, ensancha la abertura o simplifica el interior. Añadir detalle al original grande no resolverá el problema. Anota qué versión pequeña necesita un ajuste específico.
Prueba el enlace del sitio y la respuesta del archivo
Entrega los archivos y el enlace de icono previsto a quien mantenga el sitio. Abre directamente el archivo servido para comprobar que existe y devuelve el tipo de contenido correcto. Después abre la página de prueba y revisa la pestaña.
Google añade requisitos para sus resultados: icono cuadrado, página de inicio y URL del icono accesibles al rastreador, y URL estable. Mostrarlo en el navegador y en Google Search son comprobaciones independientes; ninguna garantiza la otra.
La página de prueba separada muestra los PNG reales de 16, 32 y 64 píxeles a un píxel de imagen por píxel CSS. También decodifica la imagen de 64 píxeles de un contenedor ICO montado por separado con los PNG intactos. La inspección confirma los tres tamaños y sus datos exactos. Es una prueba de los archivos en Chrome, no una garantía de que Google Search muestre el icono ni de que todos los navegadores elijan el mismo tamaño interno.
Incluye la versión pequeña en la entrega de marca
Guarda el original del icono, los archivos exportados y la vista a tamaño real aprobada junto al logo completo. Otra persona debe poder saber qué símbolo pasó la revisión y qué colores utiliza.
Si el sitio sigue mostrando el icono anterior, comprueba el enlace y el archivo servido antes de redibujar. La caché del navegador y el procesamiento pendiente del buscador son problemas distintos de un diseño ilegible.
Preguntas frecuentes
¿Basta con cambiar PNG por ICO en el nombre?
No. El archivo debe estar codificado como ICO. Revisa el formato y los tamaños que contiene.
¿Debe incluir el nombre del negocio?
Un símbolo sencillo suele leerse mejor a tamaños pequeños. Reserva el logotipo completo para espacios grandes.
¿Google mostrará el icono nuevo inmediatamente?
No. Debe procesar el icono y la página de inicio accesibles al rastreador, y sus directrices no garantizan que lo muestre.
Prepara primero la versión pequeña
Lleva tu logo a Ciyo y revisa el símbolo a los tamaños reales de favicon antes de entregarlo a quien mantenga tu web.