{"id":31485,"date":"2023-05-09T20:53:06","date_gmt":"2023-05-09T18:53:06","guid":{"rendered":"\/tutoriales\/?p=31485"},"modified":"2026-03-10T16:43:40","modified_gmt":"2026-03-10T15:43:40","slug":"cambiar-logo-en-wordpress","status":"publish","type":"post","link":"\/co\/tutoriales\/cambiar-logo-en-wordpress","title":{"rendered":"C\u00f3mo cambiar un logo en WordPress: 3 formas sencillas"},"content":{"rendered":"

El logo de un sitio web es una herramienta importante para el reconocimiento de la marca, ya que ayuda a los visitantes a distinguir el sitio de los competidores y a formar una buena impresión. También hace que el sitio web parezca más legítimo y profesional.<\/p>

Después de crear un logotipo<\/a> relevante y de alta calidad, sólo tienes que añadirlo a tu sitio web de WordPress<\/a> y personalizarlo.<\/p>

Si estás buscando una forma efectiva de añadir o cambiar el logo de un sitio web de WordPress, te guiaremos utilizando diferentes métodos. También te enseñaremos cómo reemplazar el logo de inicio de sesión predeterminado.<\/p>

Descarga la hoja de trucos de WordPress definitiva<\/a><\/p>

Cómo cambiar el logo en WordPress<\/h2>

Como no hay ningún botón o acceso directo predeterminado, averiguar cómo cambiar el logotipo de un sitio de WordPress puede ser complicado para los principiantes.<\/p>

Por lo tanto, vamos a darte instrucciones detalladas para cambiar o añadir un logo personalizado en WordPress:<\/p>

Añadir un logo personalizado a un tema de WordPress<\/h3>

Hay dos formas de añadir un logo personalizado al tema activo del sitio: a través del Personalizador de WordPress <\/strong>o del Editor de Plantillas<\/strong>.<\/p>

Sin embargo, sólo puedes utilizar la función Personalizador en temas específicos de WordPress, como Twenty Fifteen, Twenty Sixteen y Twenty Seventeen. Por su parte, el Editor de plantillas solo está disponible para temas en bloque como Twenty Twenty-Two, Blockbase y Tove.<\/p>

Además, asegúrate de que has configurado tu sitio de WordPress para que muestre una página de inicio estática. Para ello: <\/p>

    \n
  1. Inicia sesión en el panel de WordPress<\/a> y ve a Ajustes <\/strong>→ Lectura<\/strong>.<\/li>\n\n\n\n
  2. En tu página de inicio<\/strong>, elige la opción de Página estática <\/strong>y selecciona Página de inicio <\/strong>en la lista desplegable.<\/li>\n\n\n\n
  3. Haz clic en Guardar cambios <\/strong>para confirmar.<\/li>\n<\/ol>

    Añadir un logo con el Personalizador de WordPress<\/h4>

    Para añadir un nuevo logotipo mediante el Personalizador de WordPress, sigue las instrucciones que se indican a continuación:<\/p>

      \n
    1. Instala y activa un tema de WordPress<\/a> compatible con el Personalizador a través del panel de control de WordPress. En este tutorial, utilizaremos el tema Twenty Seventeen<\/strong>.<\/li>\n<\/ol>
      \"Tema<\/figure>
        \n
      1. Ve a Apariencia <\/strong>→ Personalizar<\/strong>.<\/li>\n<\/ol>
        \"Opción<\/figure>
          \n
        1. En la página Personalizar, dirígete a la barra lateral izquierda y haz clic en Identidad del sitio<\/strong>.<\/li>\n\n\n\n
        2. A continuación, haz clic en Seleccionar el logotipo <\/strong>para abrir la biblioteca multimedia.<\/li>\n<\/ol>
          \"Opción<\/figure>
            \n
          1. En la pestaña Cargar archivos, haz clic en Seleccionar archivos <\/strong>y elige el archivo del logotipo personalizado que deseas cargar.<\/li>\n<\/ol>
            \"Pestaña<\/figure>
              \n
            1. Una vez cargado, resalta el logo y haz clic en Seleccionar<\/strong>.<\/li>\n<\/ol>
              \"Pestaña<\/figure>
                \n
              1. Es posible que tengas que ajustar el logotipo del sitio de WordPress si es demasiado grande. Una vez que hayas terminado, haz clic en Recortar imagen <\/strong>para insertar el logo en el editor.<\/li>\n<\/ol>
                \"Lugar<\/figure>
                  \n
                1. A continuación, haz clic en Publicar <\/strong>para guardar los cambios.<\/li>\n<\/ol>
                  \"Opción<\/figure>

                  Para reforzar la identidad de tu sitio de WordPress, también puedes utilizar el logotipo como favicon<\/a> del sitio, pero ten en cuenta que WordPress recomienda utilizar un mínimo de 512 por 512 píxeles.<\/p>

                  Añadir un logo a través del Editor de plantillas de WordPress<\/h4>

                  Para añadir un logo personalizado mediante el Editor de plantillas, sigue los pasos que se indican a continuación:<\/p>

                    \n
                  1. Instala y activa un tema compatible con esta función. En este tutorial, utilizaremos Twenty Twenty-Two<\/strong>.<\/li>\n<\/ol>
                    \"Tema<\/figure>
                      \n
                    1. Tras activar el tema, ve a Páginas <\/strong>→ Todas las páginas<\/strong>. A continuación, selecciona tu página principal.<\/li>\n<\/ol>
                      \"Pestaña<\/figure>
                        \n
                      1. Se te redirigirá al editor de bloques. Navega hasta la barra lateral Opciones <\/strong>→ Resumen <\/strong>→ Plantilla<\/strong>.<\/li>\n<\/ol>
                        \"Editor<\/figure>
                          \n
                        1. A continuación, haz clic en el botón Página <\/strong>y selecciona Editar plantilla <\/strong>para abrir el Editor de plantillas.<\/li>\n<\/ol>
                          \"Opción<\/figure>
                            \n
                          1. Seleccione la Cabecera<\/strong>.<\/li>\n<\/ol>
                            \"Sección<\/figure>
                              \n
                            1. Para añadir el logo, selecciona el bloque Añadir un logotipo del sitio <\/strong>y carga la imagen. Haz clic en Seleccionar <\/strong>para insertarla en el editor.<\/li>\n<\/ol>
                              \"Opción<\/figure>
                                \n
                              1. A continuación, haz clic en el botón Actualizar<\/strong>. El editor te informará de que los cambios afectarán a todo el sitio. Haz clic en Publicar <\/strong>para confirmar.<\/li>\n<\/ol>
                                \"Opción<\/figure>

                                Cambiar el logo con estilos CSS personalizados<\/h3>

                                Para modificar o personalizar aún más los estilos del logo de WordPress, puedes utilizar CSS adicional. Esta función te permite añadir clases de hojas de estilo en cascada (CSS<\/a>) a un bloque específico y adaptarlo a tus necesidades.<\/p>

                                Dado que esta función sólo está disponible en el Personalizador de WordPress, utilizaremos Twenty Fifteen <\/strong>como ejemplo. Sigue los pasos que se indican a continuación para añadir código CSS personalizado y dar estilo a tu logotipo:<\/p>

                                  \n
                                1. Ve a Apariencia <\/strong>→ Personalizar <\/strong>para abrir la pantalla del Personalizador.<\/li>\n\n\n\n
                                2. En el área de edición, haz clic con el botón derecho en la imagen del logotipo y selecciona Inspeccionar <\/strong>para abrir la herramienta Inspeccionar elemento.<\/li>\n<\/ol>
                                  \"Opción<\/figure>
                                    \n
                                  1. Pasa el ratón sobre la etiqueta HTML resaltada y localiza la clase CSS que aparece sobre el logotipo. En este caso, el valor de la clase CSS es img.attachment-thumb<\/strong>.<\/li>\n<\/ol>
                                    \"Clase<\/figure>
                                      \n
                                    1. Cierra la herramienta Inspeccionar elemento y vuelve a la pantalla del Personalizador. A continuación, haz clic en CSS adicional <\/strong>en la barra lateral izquierda.<\/li>\n<\/ol>
                                      \"Opción<\/figure>
                                        \n
                                      1. En el área de edición CSS adicional, escribe la clase CSS, img.attachment-thumb <\/strong>en nuestro caso. A continuación, añade tus propias propiedades CSS para personalizar los estilos del logotipo de WordPress. Aquí un ejemplo:<\/li>\n<\/ol>
                                        img.attachment-thumb {\nborder: 5px solid black;\nborder-radius: 10px 20px;\nheight: 130px;\nwidth: auto;\n<\/pre>
                                          \n
                                        1. El resultado debería ser el siguiente:<\/li>\n<\/ol>
                                          \"Sección<\/figure>
                                            \n
                                          1. Haz clic en Publicar <\/strong>para guardar los cambios.<\/li>\n<\/ol>
                                            \n
                                            \"\"<\/a><\/figure><\/div>
                                            Cambiar el logo de la página de inicio de sesión de WordPress<\/h3>
                                            También es posible sustituir el logotipo de la página de inicio de sesión o login por tu imagen personalizada. Solo tienes que modificar el archivo functions.php <\/strong>del <\/strong>tema activo, utilizando el panel de control de tu alojamiento web<\/a> o el Editor de temas de WordPress<\/a>.<\/p>
                                            Te mostraremos cómo cambiar las imágenes del logo de WordPress en la página de inicio de sesión, a través del panel de control de Hostinger, hPanel<\/a>:<\/p>
                                              \n
                                            1. Desde el panel de control hPanel, abre el Administrador de archivos<\/strong>.<\/li>\n\n\n\n
                                            2. A continuación, ve a public_html <\/strong>→ wp-content <\/strong>→ themes<\/strong>. A continuación, abre el directorio de temas activos: utilizaremos el tema Twenty Fifteen.<\/li>\n\n\n\n
                                            3. Busca el archivo functions.php<\/strong>, desplázate hasta la parte inferior y añade el siguiente fragmento de código:<\/li>\n<\/ol>
                                              function custom_loginlogo() {\necho '<style type=\"text\/css\">\nh1 a {background-image: url(insert_the_logo_url_here) !important; }\n<\/style>';\nadd_action('login_head', 'custom_loginlogo');<\/pre>
                                                \n
                                              1. A continuación, copia la URL del archivo del logotipo de la biblioteca multimedia de WordPress. Pégalo entre los paréntesis del valor de la URL, de esta forma: url(https:\/\/tusitioweb.com\/wp-content\/uploads\/2024\/05\/ejemplo-logo.png).<\/li>\n\n\n\n
                                              2. Una vez que hayas terminado, haz clic en el botón Guardar<\/strong>.<\/li>\n<\/ol>
                                                Conclusión<\/h2>
                                                Añadir un logo personalizado a tu sitio web de WordPress es un paso importante para establecer una identidad atractiva y fuerte de tu sitio web o blog. <\/p>
                                                En este artículo, has aprendido múltiples métodos para añadir y cambiar un logotipo en WordPress: utilizando el Personalizador de WordPress, el Editor de plantillas y el código CSS personalizado.<\/p>
                                                Para que la identidad del sitio sea aún más coherente, también hemos proporcionado instrucciones para cambiar el logotipo de la página de inicio de sesión de WordPress.<\/p>
                                                Esperamos que este artículo te haya ayudado a entender cómo configurar un logo en tu sitio web WordPress. Si aún tienes preguntas, puedes escribirlas en la sección de abajo. ¡Mucha suerte!<\/p>
                                                Cambiar logo en WordPress – Preguntas frecuentes <\/h2>
                                                A continuación encontrarás respuestas a algunas preguntas comunes sobre cómo cambiar el logotipo en WordPress. <\/p>
                                                \n
                                                \n
                                                \n
                                                ¿Cuáles son los tamaños de logo más comunes en WordPress?<\/h3>\n
                                                \n\n
                                                Al cargar un archivo de logotipo a través de la biblioteca multimedia de WordPress, verás unas medidas de imagen sugeridas de u003cstrongu003e248 por 248 u003c\/strongu003epíxeles. Por lo tanto, recomendamos utilizar este tamaño de logotipo para obtener el mejor resultado.<\/p>\n\n<\/div>\n<\/div>\n
                                                \n
                                                ¿Se puede cambiar el tamaño del logotipo de WordPress?<\/h3>\n
                                                \n\n
                                                Sí, puedes cambiar el tamaño del logotipo editando la imagen antes de insertarla en la página. Para ello, abre la biblioteca multimedia de WordPress y selecciona la imagen del logotipo. En la ventana  u003cstrongu003eDetalles del archivo adjuntou003c\/strongu003e, haz clic en u003cstrongu003eEditar imagen u003c\/strongu003epara personalizar el tamaño del logotipo de WordPress.<\/p>\n\n<\/div>\n<\/div>\n
                                                \n
                                                ¿Qué formato de archivo debo utilizar para el logo?<\/h3>\n
                                                \n\n
                                                Te recomendamos que utilices el formato SVG para tu logo, ya que es ligero y puede representarse en cualquier tamaño sin perder calidad. Además, los motores de búsqueda como Google pueden leer el texto del archivo SVG.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                                                El logo de un sitio web es una herramienta importante para el reconocimiento de la marca, ya que ayuda a los visitantes a distinguir el sitio de los competidores y a formar una buena impresión. También hace que el sitio web parezca más legítimo y profesional. Después de crear un logotipo relevante y de alta […]<\/p>\n
                                                Read More…<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"%title% %page% de hacerlo","rank_math_description":"Potencia tu marca con tres m\u00e9todos efectivos para cambiar un logo en WordPress. Lee nuestro art\u00edculo y dale vida a tu identidad visual.","rank_math_focus_keyword":"cambiar logo wordpress","footnotes":""},"categories":[4747],"tags":[],"class_list":["post-31485","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/cambiar-logo-en-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/cambiar-logo-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/cambiar-logo-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/cambiar-logo-en-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-change-logo-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-change-logo-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/31485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=31485"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/31485\/revisions"}],"predecessor-version":[{"id":46623,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/31485\/revisions\/46623"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=31485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=31485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=31485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}