¿Cómo crear y subir un logo en WordPress?

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Medio

¿Cómo crear y subir un logo en WordPress?

Un logo es una imagen que suele ir alojada en la cabecera de un sitio web. Está compuesto tanto por símbolos, texto o una combinación de los dos. Es importante que sea sencillo, fácil de reproducir y de recordar.

Por lo general, cuando se diseña un logo, es recomendable definir un color base y un color secundario que serán los que se utilicen para el desarrollo del sitio web.

La idea es que el logo contenga, al menos, el color principal que se utilizará en el sitio web o una combinación entre el color principal y el secundario.

Lectura recomendada...

Antes de seguir esta lección, te recomiendo que visites la lección anterior, imágenes en WordPress, donde encontrarás información actualizada para preparar correctamente una imagen antes de subirla a WordPress.

1. Características de un logo en WordPress

Muchas personas suelen crear un logo al azar y subirlo a su sitio web. Luego se dan cuenta que el logo no se ve, se ve pixelado, queda demasiado grande o no encaja bien en la cabecera. En fin, el logo no ha sido optimizado para subirlo al sitio web.

Normalmente esto sucede por falta de conocimientos. Antes de subir un logo a un sitio web es necesario tener en cuenta algunos parámetros para conseguir un excelente resultado

1.1 Formato de la imagen

Lo recomendable es que el logo tenga formato PNG (extensión .png) de manera que se pueda diseñar con fondo transparente.

Además de esta extensión, existen otras extensiones con las que se suelen crear logos aunque no todas suelen ofrecer buenos resultados:

  • JPG: no ofrece la posibilidad de fondo transparente por lo que no sería una buena opción.
  • GIF: se utiliza comúnmente para animaciones. No se recomienda su uso para logos ya que no ofrecen una buena resolución.
  • SVG: es un buen formato para un logo pero muchas plantillas no son compatibles con esta extensión.

En resumen, cuando crees un logo para tu sitio web, asegúrate que tenga formato PNG con fondo transparente.

1.2 Orientación del logo

La orientación del logo suele estar definida por la arquitectura de la plantilla. Por lo general los logos se diseñan en formato horizontal para que se adapte a la cabecera del sitio web que se suele ubicar en la parte superior de la pantalla.

Sin embargo, hay plantillas que ofrecen la opción de configurar la cabecera en el lateral de la pantalla. En este caso es más recomendable utilizar un logo en formato vertical.

Por último existen logos simétricos (ancho y alto iguales) que pueden ser utilizados tanto en formato horizontal como en formato vertical.

¿Cómo crear y subir un logo en WordPress?

Variaciones de la cabecera en una plantilla

En la imagen anterior puedes apreciar diferentes configuraciones de cabecera que ofrecen algunas plantillas (por lo general las plantillas PREMIUM).

Dependiendo de la opción que elijamos para nuestro sitio web, diseñaremos el logo para que se adapte a la configuración de la cabecera.

  • Logo en formato vertical: para las opciones 1, 2, 5, 7 y 8.
  • Logo en formato horizontal: para las opciones 3, 4 y 6.
  • Logo simétrico: cualquiera de las opciones.

Si contratas el diseño de un logo, por lo general, el profesional suele diseñar el logo en varios formatos. De esta manera puedes cambiar el logo según la configuración que elijas en la plantilla.

En la siguiente imagen puedes observar el diseño de un logo tanto en formato horizontal como en formato vertical.

¿Cómo crear y subir un logo en WordPress?

Logo en formato horizontal y vertical

1.3 Tamaño del logo

El tamaño de un logo viene dado por las medidas. Un logo con 1000px de ancho y 300px de alto ofrece una buena resolución pero no es un tamaño adecuado para subirlo a un sitio web.

Cuando contratas el diseño de un logo, generalmente el diseñador te entrega varias versiones, en varios formatos y con una resolución muy alta.

Suelen tener grandes medidas (3500px de ancho y 1800px de alto, por ejemplo) de manera que se pueda utilizar también para imprenta: diseño de banners publicitarios, camisetas y tarjetas entre otros.

Lo recomendable es que redimensiones el logo a un tamaño acorde a la plantilla. El logo original, al ser de grandes dimensiones, tiene buena resolución.

Al redimensionarlo, no se pixelará por lo que se verá muy bien en el sitio web.

2. ¿Dónde crear un logo para mi sitio web?

Para crear un logo, para tu sitio web, tienes 3 opciones:

  1. Si cuentas con recursos económicos puedes contratar el diseño un logo a un diseñador gráfico. Los precios suelen variar dependiendo de la calidad y complejidad del logo y del tipo de diseñador. Con esta opción tendrás un logo muy profesional, en poco tiempo pero te costrará dinero.
  2. Puedes diseñarlo tu mism@ si tienes algo de conocimientos de diseño y estás familiarizad@ con programas como Photoshop. Con algo de creatividad y, viendo algunos videos en YouTube, podrás diseñar un logo que encaje en tu sitio web. Con esta opción tendrás un logo profesional (dependiendo de tus habilidades), gratis pero te llevará más tiempo.
  3. Plataformas online. Es una opción gratuita y lo tendrás en muy poco tiempo pero la calidad no será muy profesional. Sin embargo, es la mejor opción si no se cuenta con tiempo ni dinero para contratar a un profesional.

Existe una plataforma llamada Logaster. Es una plataforma donde puedes crear logos de cualquier tipo, tamaño, diseño y color para tu sitio web.

Aunque puede que el resultado final no sea tan profesional como te gustaría, es una buena elección para crear un logo y comenzar con tu proyecto.

Para crear un logo en Logaster, sigue los siguientes pasos:

  1. Accede a Logaster y haz clic en el botón Crear un logo.
  2. En la siguiente pantalla, escribe el nombre de tu marca y haz clic en el botón CREAR UN LOGO.
¿Cómo crear y subir un logo en WordPress?

Creando un logo en Logaster

Si has seguido el curso desde el inicio, podrás recordar que en la primera lección, hablamos del proyecto: desarrollar el sitio web de un Gimnasio.

Vamos a crear un logo en base a esta temática.

  1. La plataforma creará varias opciones aleatorias de logos. En la barra superior podrás cambiar el nombre de tu marca, la temática del logo y la combinación de colores que Logaster te propone. Modifícalas a tu gusto y haz clic en el botón CREAR.
¿Cómo crear y subir un logo en WordPress?

Personalización del logo en Logaster

  1. Una vez haya elegido el logo que más te guste, haz clic en el botón PREVISUALIZAR Y DESCARGAR.
  2. Se abrirá una ventana donde te indicará las posibles combinaciones que puedes hacer con el logo que has elegido. Si estás satisfech@ con el diseño, haz clic en el botón DESCARGAR.
¿Cómo crear y subir un logo en WordPress?

Aplicaciones del logo en Logaster

  1. En la siguiente pantalla necesitarás registrarte en la plataforma para poder continuar con la descarga del logo. Una vez te hayas registrado, inicia sesión.
  2. A continuación verás varias combinaciones de diseño y color del logo para que elijas, la que más te guste, para tu sitio web.
¿Cómo crear y subir un logo en WordPress?

Selección del logo en Logaster

  1. Como puedes observar, Logaster sólo ofrece la opción de descargar un formato del logo de forma gratuita. Para el resto de combinaciones deberás pagar.
  2. Haz clic en la opción gratuita. Se abrirá una ventana donde te ofrece las diferentes opciones de descarga. Haz clic en Tamaño pequeño PNG para descargar el logo.
¿Cómo crear y subir un logo en WordPress?

Descarga del logo en Logaster

Para este ejemplo, el logo que hemos descargado tiene formato PNG, 327px de ancho y 147px de alto. Tanto el formato como el tamaño están bien para subirlo al sitio web.

Pero hay un problema, tiene fondo blanco. El fondo transparente es más recomendable para un logo ya que te permite jugar con el diseño de tu sitio web si el fondo es de otro color.

Existe un programa gratuito llamado GIMP que es muy parecido a Photoshop. Con este programa podrás quitar el fondo blanco de la imagen y guardarla con fondo transparente.

En este tutorial tienes una guía para que aprendas a quitar el fondo de una imagen con GIMP.

Al quitar el fondo blanco, el logo adopta las medidas: 275px de ancho y 75px de alto, lo cual sigue siendo un buen tamaño para subirlo a nuestro sitio web.

Siguiendo estos sencillos pasos, en los que no tardarás más de 5 minutos, puedes crear un logo para tu sitio web totalmente gratis y con una calidad bastante óptima.

3. ¿Cómo subir un logo a mi sitio web?

Una vez tengas a mano el logo, renombra y optimiza la imagen como se indica en la lección imágenes en WordPress (punto 4.4) para subirlo al sitio web.

Continuando con el ejemplo que llevamos desarrollando en este curso de WordPress, con la plantilla Astra, dirígete al apartado Apariencia >> Personalizar >> Diseño >> Cabecera >> Identidad del sitio.

Sigue los siguientes pasos:

  1. Haz clic en el botón Elegir logo.
  2. Sube el logo a WordPress y haz clic en el botón Elegir.
  3. Se abrirá una ventana para recortar la imagen. Haz clic en el botón No recortar.
  4. Como puedes observar, se ha subido el logo pero sigue apareciendo el título del sitio en formato texto. Desactiva la casilla Mostrar título del sitio. Verás como ahora solo aparece el logo.
  5. Si te parece muy grande el logo, en la opción Ancho del logo, puedes variar el tamaño del logo para que adopte el tamaño que más te guste.
¿Cómo crear y subir un logo en WordPress?

Subiendo el logo al sitio web

  1. Haz clic en Publicar para guardar los cambios.
  2. Abre tu sitio web en el navegador para que puedas apreciar los cambios.
¿Cómo crear y subir un logo en WordPress?

Vista previa del sitio web con el logo

El logo, en versión PC, se ha subido y configurado correctamente en nuestro sitio web. Pero, ¿qué pasa con la versión móvil?

En la parte inferior izquierda de la pantalla, hay 3 iconos de visualización: PC, tablet y móvil. Mediante cada uno de estos íconos, podrás configurar las opciones para cada versión de tu sitio web.

¿Cómo crear y subir un logo en WordPress?

Versiones RESPONSIVE del personalizador de la plantilla

Haz clic en cada una de ellas para que puedas observar como se verá tu sitio web en cada dispositivo.

Para este ejemplo, el logo, en la versión móvil, se ve muy grande y se descuadra del ícono del menú. En la opción Ancho del logo, se puede apreciar como ha cambiado el ícono de PC por el ícono del móvil.

Esto significa que la plantilla se adapta a cada una de las opciones para ser configuradas independientemente en versiones responsivas.

¿Cómo crear y subir un logo en WordPress?

Vista del logo original en versión móvil

  1. Varía el tamaño del logo, en la opción Ancho del logo, hasta que adopte un tamaño adecuado para la vista en versión móvil.
  2. Haz clic en Publicar para guardar los cambios.
¿Cómo crear y subir un logo en WordPress?

Vista del logo adaptado a la versión móvil

Siguiendo estos sencillos pasos hemos subido un logo a WordPress. El logo tiene el tamaño ideal y se encuentra optimizado para todas las versiones del sitio web.

Con esta información podrás ir avanzando en el diseño de tu sitio web. Aún quedan más pasos para lograr tener un sitio web completamente funcional y optimizado para el SEO.

Ten paciencia que poco a poco irás teniendo más práctica y, cuando finalices el curso, obtendrás excelentes resultados.

En siguientes lecciones, veremos cómo configurar las opciones avanzadas de la cabecera de nuestro sitio web. También veremos como crear una versión del logo para cabeceras transparentes con Astra.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(3 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.