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:
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í.
Creado:
