Cómo cambiar el Favicon de Blogger

Aunque WordPress es una de las plataformas de blogs más poderosas, siempre he sido fanático de Blogger de Google.

Después de crear mi blog de tecnología personal, TechCometen Blogger, me di cuenta de que mi blog carecía de un toque profesional ya que su favicon estaba configurado con el logotipo predeterminado de Blogger: la «B» blanca y naranja.

Si desea crear una marca para su blog, es esencial reemplazar el ícono predeterminado con su propia creación que coincida con el tema de su sitio web.

En este artículo, describiré los pasos para crear y cambiar el favicon de Blogger.

Nota: Los pasos descritos están dirigidos a los usuarios de Blogger, sin embargo, los pasos generales para crear un favicon se pueden aplicar a cualquier sitio web o blog.

Uso de un Favicon

Un favicon es un ícono de 16 × 16 que aparece en la barra de título o en la barra de direcciones de un navegador. Los navegadores que admiten la navegación por pestañas también muestran el icono de favoritos en cada pestaña individual.

cromo - barra de pestañas

Como muestra la captura de pantalla, un favicon realmente puede ayudar a que su blog se destaque en un navegador lleno de gente, ya que son excelentes indicadores visuales.

Creando un Nuevo Favicon

El primer paso es crear su propio favicon.

Los favicons generalmente se crean usando el formato .ico, sin embargo, también puede crear el favicon usando los formatos GIF o PNG.

Si no se siente particularmente creativo, puede buscar en la web cualquier imagen que desee mostrar como su favicon y reducirla al tamaño de 16 × 16 y guardarla como un archivo .ico, .png o .gif. También hay una serie de favicon galerias donde puede descargar favicons listos para usar que están en el tamaño y formato requeridos.

Sin embargo, si se toma la molestia de crear una marca para su blog, tiene sentido que el favicon coincida con el tema de su blog. Por ejemplo, tengo un tema marrón oscuro para mi blog:

techcomet - logotipo

Y decidí que sería más apropiado si creaba un favicon que coincidiera con el esquema de letras y colores.

logotipo-(30x30)

techcomet - pestaña

Photoshop es probablemente la mejor aplicación para usar para crear su favicon. Solo recuerde dibujar su imagen en un lienzo de 16 × 16 y guárdelo como un archivo .gif o .png.

Si no tiene Photoshop, hay una serie de «generadores de favicon» como este uno, donde puede crear y editar una imagen en un lienzo de 16 × 16.

Subiendo tu Favicon

Blogger no ofrece servicios de alojamiento, pero cualquier imagen que adjunte a una entrada de blog se guarda automáticamente en su Picasa cuenta.

Entonces, todo lo que tiene que hacer es crear una publicación de blog en blanco y adjuntarle su favicon. Luego vea la versión HTML de su publicación de blog haciendo clic en «Editar HTML».

blogger-favicon-url

La ubicación de mi favicon está en «http://2.bp.blogspot.com/_MZZJ1m2SoG0/TG-IyPj4ZZI/AAAAAAAAAF0/bC0IZk9S3a8/s1600/logo-(16×16).png». Tome nota del enlace donde se encuentra su favicon.

Si utiliza otro servicio de carga de imágenes, como imagenshackasegúrese de anotar el enlace directo a la imagen (es decir, un enlace que termine en .ico, .png o .gif y no .html). Por ejemplo, el enlace de ImageShack para mi favicon está en «http://img175.imageshack.us/img175/8924/logo16x16.png».

Cambiar el Favicon predeterminado de Bloggers

Una vez que haya creado y subido un favicon con el que esté satisfecho, abra su panel de control de Blogger y seleccione «Diseño».

blogger - panel de control

A continuación, en la ventana principal de Blogger, seleccione «Editar HTML».

blogger - principal

Esto abrirá el editor de plantillas HTML. Aquí marque «Expandir plantillas de widgets» para asegurarse de que todo el código HTML de su sitio web esté visible.

Luego, desplácese hacia abajo y pegue lo siguiente ANTES del «» etiqueta:

<link href="http://place-your-favicon-url-here" rel="icon"/>
<link href="http://place-your-favicon-url-here" rel="shortcut icon" type="image/x-icon" />

blogger - editar html

Actualice su blog y el nuevo favicon debería estar visible.

Publicaciones Similares

Deja una respuesta

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