Cómo crear un Favicon para tu Blog

¿Tu blog tiene un favicon personalizado? Si no, realmente debería. Hoy aprenderemos qué es un favicon, por qué lo necesitas y, finalmente, cómo crear un favicon para tu blog o sitio web.

Todavía veo toneladas de blogs sin uno, así que si tu blog es uno de ellos, hazte un favor y crea uno ahora usando el tutorial a continuación. Prometo que no tomará mucho tiempo y también es divertido.

Actualizado: 11/4/2020

Divulgación: Esta publicación puede contener enlaces de afiliados (indicados con un*), lo que significa que puedo recibir una pequeña comisión si decide realizar una compra con mi enlace. Agradezco su apoyo y nunca recomendaré productos que no estoy solo.

En primer lugar, ¿Qué es un Favicon?

Un Favicon, pronunciado icono de favoritos, es la abreviatura de Icono de Favoritos que se nombró porque aparecen en su lista de marcadores de sitios web, en otras palabras, sus sitios web favoritos. Los favicons son una versión pequeña de su marca de registro que aparece como un icono de pestaña del navegador, un icono de marcador o un icono de acceso directo.

Los favicons son una forma rápida de que los usuarios reconozcan su sitio web a primera vista. Echa un vistazo a las pestañas de mi navegador a continuación. ¿Reconoce la mayoría de los sitios web que tengo abiertos aquí?

¿Por qué necesitas Crear un Favicon?

Cuando no asignas un favicon personalizado a tu blog o sitio web, se le asigna un icono genérico o ningún icono. En el peor de los casos, tu blog utiliza el favicon de tu empresa de alojamiento. En el mejor de los casos, cada navegador te asigna sus propias cosas: Chrome agrega un pequeño globo (ver imagen de arriba), Safari agrega la primera inicial de la URL de tu sitio web en un cuadro gris (ver imagen de abajo) y Firefox no agrega nada en absoluto. De cualquier manera, ¡hablando de ABURRIMIENTO!

Vuelva a mirar las pestañas del navegador anteriores. Tener iconos reconocibles hace que sea fácil hacer clic de ida y vuelta rápidamente entre sitios web, ¿no es así? Si guardas un sitio web en tus favoritos, también verás el favicon en tu lista de favoritos. Esto hace que sea fácil encontrar rápidamente lo que está buscando. Ayuda a tus lectores a encontrar rápidamente tu blog en sus pestañas o marcadores incorporando un favicon.

Hay otro lugar que apuesto a que no pensaste en dónde aparecen los favicons: Si tienes sitios web que visitas con frecuencia en tu teléfono, siempre puedes agregarlos a la pantalla de inicio de tu teléfono como un acceso directo. Si a tus lectores les encanta visitar tu sitio a menudo, es posible que quieran agregarle un acceso directo desde su pantalla de inicio para que definitivamente quieras que tengan un icono de aspecto agradable para destacarse de los otros iconos de aplicaciones que ya han agregado.

Y aquí hay una nueva página de pestaña de Safari. Imagine el acceso directo de su sitio web aquí. No quieres que tu blog esté representado por un icono gris aburrido como el icono» C » de abajo, ¿verdad?

Cómo diseñar un Favicon para tu Blog

Algunas reglas de diseño para Crear un Favicon

Primero, hablemos de algunas prácticas recomendadas para diseñar tu favicon.

1. Tu favicon debe ser perceptible y reconocible al instante
   La mejor manera de hacer que tu favicon sea reconocible es usar tu logotipo como punto de partida. Incluso si tu blog aún no es súper famoso, está bien. El uso de elementos y temas de diseño consistentes a lo largo de su marca lo ayudará a destacarse del resto y ayudará a las personas a reconocer eventualmente su marca.Aquí hay un par de opciones para que las consideres al diseñar tu favicon:
   • su logotipo o marca de registro
   • variación más simple de su logotipo
   • un símbolo o icono que representa su marca
   • las iniciales (o solo la primera inicial) de su nombre de marca – asegúrese de que el estilo de las iniciales coincida con el diseño y el estilo de su logotipo inicial
   • una foto simple – últimamente he estado viendo a bloggers que usan sus fotos de perfil para crear una favicon
2. Su favicon debe usar un diseño muy simple
   Eche un buen vistazo a los favicons en las pestañas de su navegador ahora mismo. ¿Qué notas? Son pequeñas! El favicon típico se muestra en 16 x 16 píxeles. Por esta razón, es importante asegurarse de utilizar una versión muy simplificada de su logotipo o elemento de marca. Gráficos detallados y elaborados no escalarán bien a un tamaño tan pequeño. Lo más probable es que parezcan un desastre borroso.
3. Asegúrese de que su favicon contrasta bien con fondos claros y oscuros
   Dependiendo de las preferencias de sus lectores, las pestañas del navegador pueden ser blancas, negras, claras o grises oscuras. Por esta razón, debes asegurarte de crear un favicon con colores que contrasten bien en fondos claros y oscuros.Algunos favicons tienen fondos transparentes y funcionan porque sus colores contrastan bien en cualquier fondo. Si el gráfico es demasiado claro u oscuro, puede ser útil agregar un círculo o cuadrado de color sólido detrás del gráfico o logotipo para que se destaque y se pueda leer en cualquier pestaña de color.
4. Mira las pestañas de tu navegador en busca de inspiración
   Haz clic en la web y mira los favicons utilizados en tus sitios web favoritos. Observe si funcionarán en fondos claros u oscuros. ¿El gráfico tiene un fondo transparente o está en un cuadrado o círculo de colores?

Inspiración de Favicones

Favicones con transparencia

Observe cómo estos iconos pueden sobresalir en un fondo oscuro o claro, excepto en el último, «Di que sí». Probablemente debería haber sido colocado en un cuadrado blanco. Y es un poco difícil de decir, pero el cuarto icono, la flor de loto, en realidad tiene un contorno negro muy fino. De esta manera, puede verlo fácilmente incluso si se ve en pestañas de colores claros.

Favicons con un fondo de color

Estos favicons se diseñaron con un fondo cuadrado o cuadrado redondeado para garantizar que sean claramente visibles en las pestañas oscuras y claras.

Favicons con iniciales

Algunos de estos iconos de iniciales usan un fondo de color, otros usan uno transparente. De cualquier manera, asegúrese de que sea legible.

Favicons usar una foto de perfil

Usar una foto de perfil parece ser una nueva tendencia que está cobrando popularidad. Si sigues esta ruta, asegúrate de usar la misma foto de perfil en todos tus perfiles en línea para que sea reconocible al instante.

Cómo Crear un Favicon para Tu Blog

Crear un archivo de Favicon Paso a paso

1. Crear el Gráfico en un Editor de imágenes
   Utilizando un editor de imágenes como Photoshop (regístrate para una prueba gratuita)*, Pixlr, BeFunky o Canva, * crea tu archivo de favicon a 512 x 512 píxeles. A pesar de que se muestra en solo 16×16 en las pestañas del navegador, también se mostrará en tamaños más grandes en algunas de las otras aplicaciones que mencioné anteriormente.
2. Previsualice su Favicon en Tamaño Pequeño
   Si ha terminado de crear un favicon gráfico, aleje la imagen hasta que el gráfico se vuelva pequeño, aproximadamente del tamaño de los favicons que ve en su navegador. ¿Todavía es legible? ¿Tiene sentido? Si lo hace, genial, pasa al siguiente paso.
3. Guarde el archivo
   Primero, guarde el gráfico como un archivo editable en su programa de software para que pueda volver atrás y ajustarlo si es necesario.A continuación, guárdelo como un archivo PNG.
4. Generar un Favicon.Archivo ico
   Utilice un generador de favicones para convertir su archivo PNG en un archivo ICO. Este paso es necesario ya que algunos navegadores solo leerán archivos ICO.

Alternativas para diseñar el suyo propio desde cero

Si desea una forma rápida y fácil de crear un favicon de texto o iniciales, use el generador de favicones text > ICO. Rápidamente creé este para DYOB:

También puedes usar el generador de favicones Emoji > ICO si realmente quieres que sea fácil para ti.

Finalmente, Agregue Su Nuevo Favicon a Su Blog o sitio web

WordPress

La forma más fácil de agregar un favicon en un blog de WordPress auto hospedado es iniciar sesión en su panel de control. A continuación, vaya a Apariencia > Personalizar y, a continuación, haga clic en la pestaña Identidad del sitio. En la sección Icono del sitio, selecciona tu nuevo favicon.archivo ico para cargar.

Y boom, ya está, compruébalo en tu navegador! Tenga en cuenta que es posible que necesite actualizar un par de veces y/o borrar la memoria caché en su navegador antes de que aparezca.

Cómo añadir un favicon a un WordPress.com blog.

Squarespace

También es muy fácil agregar un favicon a Squarespace.

Blogger

Inicie sesión en su blog y haga clic en Configuración en la columna izquierda. Luego haz clic en el Favicon debajo de la sección Básica. A continuación, sube tu favicon.archivo ico, guardar y boom!

Pruebe su Nuevo Favicon

Si desea probar el aspecto de su favicon en varias plataformas y configuraciones, use este Comprobador de Favicon. Si desea editar la forma en que se ven sus iconos en cualquiera de las plataformas, por ejemplo, iOS (iPhones), puede usar el generador para optimizarlos para cada configuración. A continuación, solo tienes que seguir las instrucciones para añadirlas todas a tu blog.

Acabas De Aprender a Crear un Favicon

¡Felicitaciones! Al diseñar tu propio blog, debes asegurarte de no omitir ningún detalle, incluso los más pequeños. Agregar un favicon personalizado no solo ayuda a tus lectores a localizar rápidamente tu blog en sus pestañas o marcadores, sino que muestra que te importa mantener la consistencia de tu marca.

Ahora es Tu turno

Hazme saber en los comentarios si tienes alguna pregunta sobre cómo crear un favicon o si necesitas ayuda para identificar un tipo de favicon para crear para tu marca. De lo contrario, por favor comparta su favicon con nosotros en los comentarios!
Y si has disfrutado de este tutorial, por favor compártelo haciendo clic en uno de los iconos debajo de mi firma.
Esta entrada se publicó originalmente el 14/8/2013 y se actualizó el 11/2/2015, y nuevamente el 4/11/2020.