Logo Marieu Corp
Tutorial

✅¿Por qué mi logo de Empresa no aparece en resultados de Google?

Aprenderás a integrar un logo e ícono de página web para sistemas operativos. Con vídeo paso a paso.

 

LOGO SITIO WEB

FAVICON

Mar 28, 2024

Montoya A.

20min de lectura

Reproducir video acerca de Logo no aparece en Google

Hola amigos de Marieú Technology Corporation, ¿por qué mi logo de Empresa no aparece en resultados de Google? De hecho, en esta guía, paso a paso, aprenderás a aplicar dos métodos para visualizar el ícono favicon de tu empresa y mostrar el logo en los resultados de búsqueda de Google.

Para el primero, identificaremos los ajustes del sitio y subiremos imágenes del logo. Para el segundo, generaremos un código de favicon en el administrador de archivos del Hosting.

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

Real Favicon Generator es una plataforma web que permite convertir tu imagen o logo en un archivo ZIP. Luego de descargarlo, esta carpeta contiene archivos .PNG, .SVG, .ICO, el cual, son útiles para adaptar tu logo a disitintos sistemas operativos.

¿Por qué mi logo no aparece en los resultados de Google?

Entonces, vamos a utilizar un total de cuatro aplicaciones: WordPress, Elementor, para indexar Google Console Search y, para lo que es el método 2, el Real Favicon Generator. Recuerden que este Google Search Console nos permite, a nosotros, indexar nuestro sitio web con el buscador de Google. Es decir, si nosotros tenemos, de repente, cinco productos, cinco servicios, hay un cliente y entrada Google, pone las características de su producto, mediante un SEO puede aparecer en las búsquedas.

En una etapa inicial, si es que no le hemos configurado bien, nos va a aparecer un icono, en este caso de «world» o de mundo. Si configuramos adecuadamente, incluimos un icono que, mediante la indexación, pueda Google identificar el icono, nos va a aparecer después así. Es un antes y después tenemos los resultados luego de la indexación. Y ello es muy importante porque genera un poco más de confianza al cliente cuando ingresa y puede visualizar tu página web.

Entonces, algunos pasos que nosotros vamos a desarrollar van a ser los siguientes. Antes se utiliza algunos de estos dos métodos, que les vamos a proporcionar, tenemos que disponer de dos imágenes con distintas dimensiones. De estas imágenes, van a ser de su logo de su empresa. La primera tienda dimensión de 350 por 100 píxeles. En este caso, se recomienda utilizar un logo y al costado sería un icono. Entonces, un ejemplo de la primera, con unas medidas de 350 por 100 lo tenemos ¡aquí! Entonces, 350 por 100, vamos a abrir y ¡ahí está!

Entonces. para esta primera imagen, se recomienda tener el logo ¡ahí está el icono! y, en la mano derecha, tener lo que es el texto que pueda representar. Sería, en este caso, el nombre de la razón social de la empresa. Y, para la segunda de 512 por 512, es una dimensión cuadrada de Favicon. Tenemos el siguiente modelo ¡ahí está! Puede ser con bordes, no hay problema, o si no, puede ser con las esquinas punteadas, va a depender de cada uno de ustedes y cómo quieren que se repesente su logo, dentro del buscador de Google.

Entonces, tenemos un total de dos métodos para que la indicación con Google Console Search funcione. El primer método está dentro del maquetador de Elementor, dónde nosotros vamos a abrir la página, con el editor de Elementor. En este caso, una página, se recomienda que sea una página principal o sea el «home».

Número dos, en el editor Elementor, primero, nos vamos a ubicar en ajuste del sitio. Internamente, en ajuste del sitio, nos va a aparecer para la identidad del sitio. Estando dentro de esta identidad, vamos a subir las dos imágenes, tal cual. La primera con esas dimensiones y, la segunda, con las dimensiones cuadradas. Después de haber subido las dos imágenes, guardamos cambios y actualizamos.

Método número dos, a nivel manual, entramos en el Hosting, administrador de archivos, ingresamos a la siguiente ruta. Ingresamos a los archivos «wp-content/theme» e ingresamos a la carpeta de selecciona tu tema. Después, vamos a ver un archivo llamado «header», header punto PHP. Dentro del archivo punto PHP, vamos a pegar el código generado de Favicon, pegamos el código de Favicon que se ha generado en la página de Real Favicon Generator. Finalmente, guardamos cambios y listo.

El código de Real Favicon Generator va a ser algo similar aquí. Evidentemente, en el «href» nosotros tenemos que cambiar a nuestra página web. En donde dice «website.com», sería cada uno su dominio.

Diagrama Colocar icono de pagina y que aparezca en los resultados de busqueda de Google Marieu Corp scaled

Diagrama de Arquitectura: Colocar ícono de página y que aparezca en los resultados de búsqueda de Google.
Fuente: Propia, mediante software Miro.

Entonces, aquí estamos en WordPress, vamos a ingresar a páginas y vamos a ingresar a la página principal, lo tenemos guardado como principal. Colocamos editar con Elementor y, cuando ya tenemos listo el maquetador de Elementor, dentro de la página principal, nos vamos a ir aquí. Ponemos ajustes del sitio y nos ubicamos dentro de la identidad del sitio. Entonces, aquí es donde nosotros vamos a colocar, en nuestra etapa inicial, lo que es el nombre del sitio. Colocamos el nombre de la razón social de la empresa, la descripción del sitio, pueden colocar alguna frase representativa.

Nosotros hemos colocado alguna frase representativa de Marieú, pero ustedes pueden colocar algún detalle de su producto o de su servicio que están ofreciendo. Entonces, después de ello viene lo que son los logotipo. Logotipo el sitio y el Favicon del sitio. Entonces, aquí vamos a colocar la primera imagen, tiene las medidas de 350 por 100, ya mencionadas en una etapa inicial. Seleccionamos y lo insertan. Ponemos subir archivos y aquí nosotros vamos a seleccionar un archivo desde nuestro «desktop» o si no escritorio.

Una vez que haya seleccionado su imagen, simplemente van a poner guardar y ¡ahí está! Algo similar con el Favicon con el sitio, subir archivos. Pueden cargarlos desde aquí, con esta opción o si no pueden arrastrarlo y soltarlo desde su carpeta. Por ejemplo, si tiene la imagen, seleccionamos y arrastramos. Una vez que lo tengan, recuerden actualizar. Actualizamos cambios y listo.

Entonces, ya llegado a este punto, nosotros recomendamos lo siguiente: siempre el logo del «header», que lo encontramos aquí, siempre el logo del header debe estar incluido como un enlace. Es decir, integran lo que es el logo e insertarlo como un enlace. ¿Cómo podemos insertarlo con un enlace? de la siguiente manera. Vamos a editar el «header». Recuerden que el «header», en un vídeo anterior, nosotros lo pasamos al «shortcode». Entonces, vamos a abrir la plantilla que contiene al «heater».

Entonces, esta es la plantilla que contiene el «header» y ya tenemos todas las partes del «header». Tenemos todas las columnas, la imagen que corresponde a la imagen del logo de la empresa. Hemos insertado la imagen, insertamos la imagen y ¡aquí está! Nosotros hemos insertado una imagen, esta es la imagen y, el texto, en la parte inferior. Tenemos lo que es el logo como una imagen y en la parte inferior el texto. Algunas dimensiones recomendadas: 300 por 229 píxeles. ¿Cómo insertamos nosotros como una imagen?, si nosotros revisamos, actualmente, vamos a poner en vista previa y vemos que no tiene ningún enlace. Si Seleccionamos no te direcciona a nada, no te direcciona a otra página.

Entonces, para que nosotros insertemos un enlace, nos vamos a contenido y, dentro de contenido, editamos lo que es el enlace. En enlace vamos a colocar solamente un Slash y ¡listo!, colocamos actualizar. Ahora, en la vista previa, tenemos una imagen que está insertado un enlace. Te direcciona a la página principal. Entonces, esta recomendación la hacemos para que también se le haga mucho más sencillo a Google identificar e indexar tu página web con lo que es el logo. Esto está dentro de lo que es el método 1.

Ahora, nosotros vamos a ver lo que es el método 2. Vamos a ingresar al Hosting y administrador de archivos. Aquí estamos en el Hosting, vamos a colocar en el «search» administrador de archivos, ¡ahí está! Nosotros vamos a ingresar a todos los archivos del «business web Hosting». Ingresamos a «domains», después ingresan a su dominio y entramos a «public_html». Nos vamos a «wp-admin», nos vamos a «wp-content» y nos ubicamos en «themes».

Dentro de «themes», vamos a ubicar en cada uno de su tema. En nuestro caso, nosotros estamos trabajandolo dentro del «sandbox». Abrimos lo que es el «header» ¡ahí está! Entonces, es aquí donde nosotros vamos a pegar código generado en la página de Real Favicon Generator. Entonces, aquí vamos a colocar Real Favicon Generator e ingresamos aquí. Seleccionamos nuestro Favicon image y aquí seleccionamos el Favicon.

Una vez que terminó de cargar, nos vamos a la parte final. Vemos que son las vistas previas de cómo va quedar nuestro logo en los buscadores. Este es a nivel de pestaña, en un navegador con un tema blanco o claro, a nivel oscuro en el Google Search, en la lista de resultados. Y esto es en la versión mobile, también vemos, el icono, cómo se visualiza dentro de la pantalla de inicio de un sistema iOS, para el sistema Android, para Windows, para macOS, entre otros.

¿Finalmente, vamos a colocar general o «generate your Favicons and HTML code», lo descargamos. Una vez que se terminó de configurar la instalación del Favicon, vamos a descargar el paquete de Favicon, aquí lo tenemos. Se descarga como un ZIP, si abrimos el ZIP se va a encontrar todos los archivos, a nivel de Android, Apple Favicon, entre otros. Vas a encontrar distintos archivos PNG, para que reconozcan cada uno de los dispositivos.

Para nosotros insertar dentro del «header», copiamos todo el código y pegamos aquí, en el «header». Siempre recuerden marcar un comentario. Vamos a poner el código para Favicon, ¡ahí está! Recuerden guardar cambios y, además, lo que vamos a hacer es lo siguiente. Tenemos el ZIP, nosotros lo vamos a extraer dentro de la raíz de nuestro sitio web. Vamos a ir aquí y nos vamos a ir a «public_html». Dentro de «public_html», nosotros vamos a colocar todo el archivo de «Favicon package». Tenemos el archivo aquí, seleccionamos, arrastramos y soltamos.

Una vez que lo tenemos aquí, vamos a extraerlo, «clic» derecho y ponemos extraer. Colocamos un nombre cualquiera, vamos a colocarle Favicon y ponemos extraer, tenemos aquí. Recuerden que está dentro del archivo o de la ubicación «public_html». Es una vista pública para que también lo puedan visualizar el cliente. Abrimos el Favicon, ahí están todos, seleccionamos todos, copiamos «Control + C» y vamos a pegar aquí. Lo vamos a extraer todos, en nuestro caso, nosotros ya lo tenemos, ya lo hemos extraído ahí. Vamos a borrarlo, vamos a borrar también lo que es el ZIP, ¡ya está! Entonces, una vez aquí nosotros simplemente realizamos el «test», este es el mismo test de Fabicon, Fabicon Checker.

Después de haber guardado los cambios dentro de el administrador de archivos, vamos a validarlo, si es que, todos los iconos están correctamente instalados. Colocamos nuestra URL y ponemos «check favicon». Y ¡listo amigos!, entonces, aquí tienen ustedes los resultados. Cuando aparece en verde es que se ha ubicado el archivo, se llegó a ubicar lo que es el icono y está todo correcto, en iOS, en Android, en Windows, Mac, escritorio o «desktop».

Ahora, llegado a este punto, de repente, en algunos casos les va a aparecer en rojo. Nosotros recomendamos lo siguiente, miren, les vamos a dar algunos «tips». Entramos al WordPress, entramos a Elementor, y vamos a poner Custom Code, en Custom Code, nosotros vamos a agregar un código dentro de «header». Vamos a poner «Head Favicon» y aquí es donde nosotros vamos a pegar el código que incluimos dentro del header punto PHP. Vamos al «header» punto PHP, tal cual, el mismo y pegamos. Actualizamos, publicamos, en nuestro caso, nosotros ya lo hemos creado.

Publicamos, que se incluyan en todos los sitios: «entire sites», guardamos y colocamos «save and close». Vamos a verificar si se creó el archivo. Ingresamos a Elementor, ponemos «custom code» y ¡ahí está!

Favicon checker resultados Marieu Corp scaled

Resultados Favicon checker.
Fuente: Propia, mediante software ElementsKit.

Resultados Finales

Entonces, ya con eso, ustedes van a obtener, los resultados, todos en verde, para este segundo método. Cualquiera de los métodos es válido. Ya para la indexación, nosotros vamos a hacer lo siguiente. Para que ustedes puedan indexar, recuerden que los métodos son dentro de WordPress, pero si nosotros queremos indexar nuestra página web con Google Search Console, ponemos Google Search Console, ingresamos aquí. Ponemos empezar ahora y ¡ahí está!

En nuestro caso ya tenemos indexado, pero si es que es la primera vez que indexamos, colocamos nuestro dominio y ponemos enlazar. Siempre recomendamos hacer con la cuenta de «business», con esta cuenta de empresa. Colocamos indexar, aquí, ponemos aquí nuestro dominio y ponemos ENTER, y ahí lo va a indexar. Ya cuando lo termine de indexar, te aparece si es que hay algún bloqueo, de repente tienes un «robot» que bloquea el indexado. Tenemos algunos vídeos también, en particular, para solucionar esos robots.

Ya como resultado finales, si nosotros colocamos Marieú Technology Corporation, ya como resultados finales vamos a obtener nuestro logo, ¡ahí está! Aquí tenemos para servicios, también tiene nuestro logo. De hecho, si nosotros colocamos, por ejemplo, «marieú servicios» también nos va aparecer con nuestro logo, ahí está. ¡Listo, gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Logo Julio 2023 fondo transparente texto blanco

Marieú ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados