yo-blogueo Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cambiar el color del navegador por el de tu blog


Cambiar el color del navegador por el de tu blog de añade un icono!

Personaliza Google Chrome con el color principal del tema de tu blog  de una forma muy fácil cambiando el esquema de color , por defecto es el azul de google y añadir el logo de tu blog o una imagen que te guste, lo vamos a poder hacer en diferentes plataformas.

Color azul por defecto de Chrome

Fucsia de yo blogueo

Hay que aprovechar estas pequeñas novedades que aparecen para personalizar los blogs para hacerlos mas atractivos en los dispositivos móviles, hay que reconocer que cada vez leemos mas en los teléfonos y todo lo que sea mejorar el aspecto de nuestros blogs en ellos es muy importante.

Este tutorial sirve para blogger, blogspot, wordpress, tumblr, web normal… para todas las plataformas que te dejen acceder al código.

Lo primero es elegir el color para cambiar el azul de google, si no lo tienes definir cuál es tu color principal, si no lo tienes deberías empezar a definirlo y pensar en la importancia que puede tener una buena paleta de colores para tu blog.

Puedes ir directamente a la fuente principal que es Google developers Dónde explican paso a paso como cambiar el color del navegador por el color de tu blog.

Para cambiar el color del navegador por el de tu blog seguimos un método muy fácil simplemente tienes que ir al editor y colocar debajo de la etiqueta <head> esta línea de código cambiando el color por el de tu blog en cada plataforma es un poco diferente:

En Blogspot debes acceder a plantilla> editar html y busca la etiqueta <head>

En WordPress puedes cambiar el tema de color de Google fácilmente: normalmente en todos los temas hay un lugar dónde colocar código en el head, ahí puede poner la línea. Si tu tema no tiene esa función debes ir a editor y al archivo header.php y colocarlo bajo la etiqueta <head>.

En tumblr puedes cambiar el tema de color igual colocando el código bajo la etiqueta head.

Y en las webs idem de idem, es muy sencillo, os aconsejo en la apertura <head> y no en la parte de cierre que es: </head>
<meta name="theme-color" content="#f0045a">

Para añadir el icono a los temas móviles de Google seguimos el mismo paso lo único es que debemos poner la ruta de dónde lo tenemos alojado, recuerda que debe ser accesible, como truco lo puede insertar en un post antiguo y copia la ruta de la imagen.

Hay muchos temas que tienen esta función de añadir el icono activa de serie pero otros no.

Lo recomendable para el icono principal es un tamaño de 192×192 px para que se pueda ver en cualquier dispositivo, si no en los dispositivos retina quedará borroso. Debe ser en PNG para tener un fondo transparente.

Yo uso Adobe Illustrator pero podéis hacer lo mismo con cualquier otro editor.

Si no tienes el icono o quieres hacer pruebas echa un ojo a estos editores de imágenes:

editores de fotos gratis


Piensa que el tamaño de esto es muy pequeño, seguramente el logo sea demasiado grande y tenga muchos detalles, además el formato ha de ser cuadrado por lo que deberías usar el mismo que tienes de favicon, si no sabes que es el favicon en este post te cuento como obtenerlo y verás lo importante que es.

Qué es el favicon?

Este es el código del icono que lo puedes poner tranquilamente después de la línea para cambiar el esquema de color de google.

<link rel="icon" sizes="192x192" href="la dirección de tu imagen.png">

Ya lo tenemos, pero eso no basta en todos los dispositivos, es algo genérico, si quieres que funcione en casi todos los navegadores actuales debes hacer la versión del icono en mas tamaños y decirle al navegador que lo muestre:

Este es el tamaño máximo, pero por razones de peso de las imágenes es conveniente dar a cada uno su medida correspondiente, además en PNG las imágenes son mucho mas pesadas y tardan mas en cargar.



<link rel="icon" sizes="192x192" href="icon.png">

Este es para que se muestre el icono en safari:
<link rel="apple-touch-icon" href="ios-icon.png">

Este es para internet Explorer:
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

Pero si quieres especificar los tamaños en diferentes dispositivos como el Iphone, ipad, tablets… hay que añadir mucho mas código.

Para Apple:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Este código siguiente es para añadir los iconos del sitio a windows phone y a internet explorer:
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">

<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">

<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

Espero que disfrutes de este pequeño cambio, aunque parezca una simpleza es un detalle muy interesante para tu blog.

Una cosa no te impacientes este cambio en Chrome tarda uno minutos en ser efectivo y debes refrescar el navegador de tu teléfono móvil par poder verlo cambiado!

La entrada Cambiar el color del navegador por el de tu blog aparece primero en Yo Blogueo.

Fuente: este post proviene de yo-blogueo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo crear los mejores títulos para post

Cómo crear los mejores títulos para post Los títulos para post representan uno de los elementos más importantes para conseguir visitas, seguidores e incluso conversiones en nuestro blog. Para crear lo ...

Aprende a ahorrar gestionando tu dinero

Aprende a ahorrar gestionando tu dinero ¿Dificultades para llegar a fin de mes? Seguro que  no paran de decirte «aprende a ahorrar». Lo primero de todo ¡ten paciencia!. Entre tú y yo, ahorra ...

Recomendamos

Relacionado

internet informática google ...

Nueva versión del navegador Chrome de Google, versión 12.0.742.91

Google ha actualizado su navegador para todas las plataformas y sistemas operativos para solucionar algunos problemas importantes y añadir nuevas mejoras. Corrige 14 problemas de seguridad, 5 de ellos de importancia alta. Por lo general, el navegador se actualiza automáticamente sin que el usuario tenga que actuar, pero si se quiere comprobar si nuestro navegador está actualizado tenemos que reali ...

aplicaciones ocio tutoriales

TECH: Crea una App con el Icono de tu Blog.

Sabias que este Blog tiene su propio App y lo puedes instalar en tu propio teléfono móvil para un acceso mucho mas rápido a mi Blog?? Bueno pues si lo tiene, y el tuyo también lo puede tener. Has visto como las mejoras aplicaciones tienen un Icono para descargar en el teléfono móvil?? Te gustaría que tu Blog lo pudiera tener?? Cuesta demasiado dinero hacerlo?? Esto le ayudara a mi Blog? En serio ...

Linux

Sincronizar el navegador del escritorio con el teléfono Android

Supongamos que está investigando en su navegador de escritorio y necesita dejar su computadora para hacer algún recado. ¿No sería estupendo que pudieras sincronizar lo que estás leyendo con tu teléfono móvil para que puedas seguir investigando sobre la marcha? Si estás usando un teléfono Android (ejecutando Froyo) y Google Chrome/Firefox, acabas de conseguir una gran oferta. es una extensión de Go ...

internet chrome firefox ...

Google Chrome, el navegador líder, aumenta su cuota de mercado

El dominio de Google Chrome en el mundo de los navegores sigue aumentando. Los últimos estudios realizados en relación a la penetración del navegador de la multinacional con sede en Mountain Dew revelan un aumento en su cuota de uso. De esta forma, Chrome cerró el pasado curso convirtiéndose en el navegador más usado con una penetración cercana un 60% que podría alcanzar en los próximos meses, por ...

internet blogs chrome ...

Cómo personalizar Chrome (Android) con el color de tu blog

Si navegas por la red desde tu dispositivo Android y tienes una de sus últimas versiones, habrás visto que páginas como Facebook o Pinterest tienen la parte superior del navegador Google Chrome personalizada del color de su marca. ¿Sabes que tú también puedes hacer lo mismo con tu blog? Además, no necesitarás más de cinco minutos para ponerlo en marcha. Este breve tutorial lo publiqué hace tiempo ...

móviles firefox android firefox 4 beta

La nueva versión de Firefox para Android es hasta 3 veces más rápida que el navegador por defecto

Los creadores de Firefox afirman que su última versión del navegador para Android, que ya se puede descargar desde aquí http://www.mozilla.com/en-US/mobile/beta/, es hasta 3 veces más rápida que el navegador por defecto del sistema operativo de Google. Además tienen preparadas más de 100 extensiones para mejorar la experiencia de navegación del usuario, que podemos ver aquí https://addons.mozilla. ...

general

Personaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs. Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las ...

general seo

Cómo poner los datos de autor en Google para tu sitio web o Blog: el proceso de autoría en Internet paso a paso.

El proceso de autoría en Internet es una revolución en la manera en que los buscadores seleccionan resultados para las búsquedas de los usuarios. Un autor o creador de contenidos puede llegar a tener una autoridad en la materia sobre la que escribe que le colocará siempre en mejor posición que a otros enlaces similares de menor calidad. Tan importante como la autoría es la autoridad en una materia ...

propuestas

Cómo personalizar Google Chrome con los colores de tu web

Google ha incorporado interesantes novedades para la presentación de nuestras Webs y Blogs en su navegador Chrome para móviles y tabletas. Podemos cambiar el color de todo el navegador para móviles y adaptarlo a la presentación de nuestra web, dándole un toque mucho más fresco e innovador. En general estos cambios dotan de una presentación mucho más profesional a nuestros contenidos para vestirlos ...

Tips enlaces

Hacer que todos los enlaces de tu blog sean nofollow automáticamente

Hoy vamos a hacer que los enlaces de nuestro blog salgan por defecto nofollow de una forma muy rápida, vamos de golpe. Hace poco hablábamos sobre como usar los enlaces nofollow de manera correcta y ha despertado bastante interés, tanto que me han preguntado si existe forma de hacer que salgan automaticamente nofollow todos los enlaces del blog. Querer que aparezcan nofollow automaticamente en toda ...