[anuncio_b30 id=1]

¿Sabes qué es un favicon? ¿No sabes cómo crear un favicon personalizado para la web de tu negocio? ¡Hoy aprenderás paso a paso a poner el tuyo propio en tu página o Blog!

Muchas de las personas que se deciden por crear un Blog y me contactan para ayudarles con su estrategia, me suelen preguntar a menudo de qué se trata esta opción que incluyen la mayoría de plantillas de WordPress.

Por tanto, para resolver esta duda, he creado esta completa guía donde aprenderás qué es, qué tamaño exacto debería tener y cómo instalarlo tú mismo en pocos minutos y sin ayuda de un profesional.

¡Comenzamos!

¿Qué es un favicon?

Un favicon, también llamado favicono, “fav icon” (escrito separado), icono de página o de marcadores, no es más que esa pequeña imagen asociada a una página en particular, que se puede ver en la pestaña del navegador, justo en la parte superior de tu ordenador o dispositivo móvil.

Cuando escribimos la URL del sitio web en cuestión en la barra de direcciones, suele subirse a Internet en la forma de un archivo denominado favicon.ico que ya luego los navegadores descargan para mostrar a todos sus visitantes.

Muchas veces (en la mayoría de hecho), estas pequeñas imágenes son el logo de la empresa a la que pertenece la página, o una versión simplificada de éste.

Su nombre original proviene de “Favorites Icons”, que se traduciría del inglés como “Iconos de favoritos”.

Como dato curioso, este archivo “.ico” fue utilizado por primera vez por el navegador Internet Explorer 5, para las páginas que estuviesen agregada a tu lista de marcadores o favoritos, siendo éstas las que mostrarían esta imagen.

De igual forma, si buscabas una página en la barra de búsqueda y ésta estaba agregada a tus marcadores, también mostraba este “mini-logo”.

Tiempo después, esto fue cambiado, debido a que se podía saber la cantidad de personas que añadieron tu página a marcadores en base a la cantidad de descargas del elemento, por lo que ahora todos los navegadores muestran esta imagen sin importar si has añadido o no la página a marcadores.

Qué es un Favicon y cómo crear el tuyo propio en WordPress

¿Para qué sirve un favicon?

[anuncio_b30 id=3]

Una vez que ya hemos aprendido qué es y cuál es su origen, es momento de repasar sus diversas utilidades, más allá de lo meramente estético.

» Mejorar la Imagen de tu Marca

Básicamente, este elemento es una de las formas que tenemos de darle una imagen más atractiva a la página web de nuestro negocio online.

Ya sabes, la Reputación de una Marca es uno de los factores esenciales para conseguir atraer a tus potenciales clientes, además del precio y otras decenas de condicionantes más.

Es además un medio a través del cual las personas pueden identificar nuestro sitio web o Blog de una forma mucho más sencilla, asociando nuestra página a una imagen característica y única.

Esto hace que la dote de identidad, algo así como un logo que reducimos y pegamos a la pestaña del navegador cuando éste entra a nuestra web.

» Diferenciación

¿Te imaginas tener muchas pestañas abiertas y no tener ni idea de qué página hay en cada pestaña?

Estoy seguro de que, si trabajas habitualmente con Internet, te habrás encontrado en esta situación, teniendo que ir pestaña por pestaña para encontrar una web concreta de todas que tienes abiertas.

La verdad es que yo no querría estar yendo de una en una hasta encontrar la que busco. De ahí la utilidad de este elemento, que de un vistazo te va a permitir identificarla.

» Genera confianza al usuario

Dicho esto, también hay que aclarar que indirectamente, este elemento juega un papel importante como forma de generar confianza a los usuarios que ingresan a la página ya que, después de todo, prácticamente todas los sitios webs oficiales y “seguros” poseen un logo propio en la pestaña del navegador.

No cabe duda que ésta es una señal de profesionalidad.

Esto en contrapartida, es también motivo de desconfianza, ya que hoy en día una gran parte de los usuarios que navega habitualmente por Internet saben qué es un favicon y están acostumbrados a verlos en la parte superior de sus navegadores.

Por tanto, cuando una página no tiene la famosa imagen en miniatura, les suele crear un poco de recelo…

» Mantenerte en el “top of mind”

Finalmente, también te ayuda a que las personas que previamente ya te han visitado, recuerden con mayor facilidad tu Marca, sobre todo cuando tu imagen es sencilla pero llamativa y, a su vez, fácil de recordar.

Si creas uno con estas características, lograrás que te relacionen con esos valores que tu logo transmite.

Qué tamaño debe tener un favicon

Si atendemos a los cánones teóricos, su tamaño puede variar, dependiendo de la plataforma en la que se use, yendo del estándar que es 16×16 hasta tamaños de 128×128 e incluso de 228×288 px, como te muestro en la siguiente tabla:

PLATAFORMA

NOMBRE DE ARCHIVO

VALOR DEL ATRIBUTO REL (HTML)

TAMAÑO (PX)

Google TV favicon.png icon 96×96
Opera Coast favicon-coast.png icon 228×228
Ipad con iOS 7 o superior apple-touch-icon-152×152-precomposed.png apple-touch-icon-precomposed 152×152
Ipad con iOS 6 o inferior apple-touch-icon-144×144-precomposed.png apple-touch-icon-precomposed 144×144
Ipad Mini con iOS 7 o sup. apple-touch-icon-76×76-precomposed.png apple-touch-icon-precomposed 76×76
Ipad Mini con iOS 6 o inf. apple-touch-icon-72×72-precomposed.png apple-touch-icon-precomposed 72×72
Iphone con iOS 7 o sup. apple-touch-icon-120×120-precomposed.png apple-touch-icon-precomposed 120×120
Iphone con iOS 6 o inf. apple-touch-icon-114×114-precomposed.png apple-touch-icon-precomposed 114×114

Sin embargo, si eres de los que prefiere tomar un “atajo”, un icono de marcadores como el que hoy analizamos suele representarse por una imagen con “pequeñas dimensiones”, como te he mencionado anteriormente.

Hago este inciso porque, ante la duda de qué dimensiones exactos debe tener, si quieres dejarlo finalmente en 16×16 píxeles. no necesariamente tienes que crearlo directamente en esa medida.

Puedes optar por tomar una imagen que tengas en tu dispositivo y/o que hayas elegido como logo corporativo y modificarla al tamaño y formato requerido con una herramienta de edición de imágenes.

Esto te vendrá de maravilla si ya tienes una imagen previa, que simplemente quieras colocar como tal.

Cómo instalar o cambiar tu favicon en WordPress

Ahora vamos con la parte tutorial de este artículo, y es que de nada te sirve saber qué es un favicon ni las dimensiones que debe tener si no tienes ni idea de cómo implementarlo en tu web.

Es por ello por lo que yo te mostraré paso a paso cómo implementarlo en WordPress muy fácilmente, además de cambiarlo más adelante si te apetece.

Para hacer esto, te voy a mostrar dos métodos: uno de ellos a través de WordPress directamente, mientras que el segundo es utilizando un plug-in dentro de esta plataforma.

¡Ahí van ambos!

2 Métodos de crear un favicon online paso a paso para tu web

En caso de que seas diseñador/a gráfico o se te de bien la creación y edición de archivos audiovisuales, puedes hacerlo tú mismo desde el principio en PhotoShop o programas similares.

También puedes ayudarte de algunas de las muchas herramientas que puedes encontrar en Internet para generar este tipo de iconos gratuitos.

Para ello, más adelante te mostraré algunos programas gratuitos, que te ayudarán a crear el tuyo propio.

Ahora es hora de implementarlo de una de estas dos formas:

1) Menú de personalización de WordPress

Éste es quizás uno de los más usados, sobre todo cuando es la primera vez, ya que realmente no tienes que esforzarte mucho, además de que incluso puedes utilizar una imagen y no un archivo tradicional de tipo “.ico”.

Debes seguir los siguientes pasos:

1. Entra en tu WordPress.

2. Busca la opción “Apariencia > Personalizar ” en el menú izquierdo.

Elegir Favicon desde ajustes generales de WordPress

3. Una vez allí, verás las opciones típicas para personalizar la apariencia de tu sitio web, de ellas, la que te interesa es justamente la opción de “Identidad del sitio”.

4. Dentro de esta sección, verás varias opciones a modificar relacionadas con la identidad de tu página web, y al final de todas ellas, un texto que dice “Icono del sitio”. Selecciona desde tu dispositivo la imagen que quieras.

Establecer "Icono del sitio" en WordPress

5. Esta opción te llevará a la galería de tu WordPress y, una vez allí, deberás seleccionar la imagen que desees para establecer como icono del nevagador.

En mi caso, he elegido una versión simplificada del logo de mi Blog, en una versión de favicon transparente (sin fondo y formato .png).

6. Una vez seleccionada la imagen, damos a la opción “elegir” en la parte inferior derecha y esto nos llevará a un editor, en dónde se cambia de forma automática el tamaño de la imagen, para adaptarse al óptimo para tu navegador.

Paralelamente, puedes recortar la imagen a conveniencia o simplemente dejarla como está y hacer clic en “Recortar imagen”.

Ahora bien, veamos algunos puntos que es importante aclarar, el primero de ellos es que WordPress te recomienda un tamaño específico de 512×512 px y ya luego la propia plataforma se encargará de adaptarla al tamaño de un “fav icon” normal.

Otro punto importante por aclarar es que puedes usar cualquiera de los formatos de imágenes que soporta WordPress al subir la imagen que quieres de icono.

Dicho esto, ¿ves que fácil es?

¡Sigamos con el segundo método!

2) Utilizando un plugin

Como ocurre con prácticamente toda slas funcionalidades que quieras agregar a una web en WordPress, siempre existe algún plugin que te ayude, en este caso a subir e instalar un favicon.

En este caso utilizaré Jetpack, el cual puedes instalar desde este enlace:

[appbox jetpack wordpress ]

1. Accede al menú y ve a “Configuración”.

2. Una vez allí, deberás buscar la opción de “Icono del sitio” y la activas en caso de que no lo esté.

3. El siguiente paso es dirigirte nuevamente al menú de Jetpack e ir a “Ajustes > Generales”.

Favicon de Ismael Ruiz en Jetpack

4. Una vez estés en la sección de ajustes generales, deberás ir casi al fondo, allí encontrarás la opción de “Icono de sitio”, haz clic en donde dice “Añadir icono de sitio”.

Sube el icono que desees utilizar y que hiciste previamente y acepta, guarda los cambios y ya lo tendrás instalado.

Favicon generator: las 10 Mejores plataformas para crear un favicon online

A continuación, te mostraré las 10 mejores plataformas online para crearlo de forma sencilla y rápida.

La mayoría de estas páginas te ofrecen la misma función, crearlo, por lo que te recomiendo que vayas probando hasta que consigas la que más te conviene.

1. FaviconGenerator.org

FaviconGenerator.org

Comenzamos con una de las páginas más conocidas en Internet para la creación de estos iconos, “FVicon Generator” (pruébala aquí).

Es prácticamente una apuesta segura y, aunque está en inglés, es muy fácil de utilizar y cuenta con opciones básicas que puedes configurar según lo que estés buscando.

También puedes escoger si mantener sus dimensiones o si permitir a la aplicación que ajuste su tamaño para que sea cuadrado.

En cuanto a su funcionamiento, solo necesitas subir una imagen directamente desde tu ordenador. Incluso te da la opción de buscar una imagen de entre una galería que se encuentra en la misma página, en caso de que no tengas idea de que icono quieres crear.

2. Favicon.CC

Favicon.CC

Ésta es otra plataforma muy conocida para crear iconos de marcadores. Se trata de FVicon.cc, una herramienta que no solo te permite crear tus “minilogos” partiendo de una imagen ya hecha, sino que te permite hacerlos desde cero en la misma página.

El único problema es que se encuentra en inglés, por lo que tendrás que ir jugando con las opciones si no conoces el idioma.

Aun así, si no tienes ganas de hacerlo desde cero, puedes buscar en su galería alguno que llame tu atención, o subir una imagen propia ya hecha y convertirla como en el resto de las páginas.

Además, te da la opción de vista previa para ver cómo ha quedado todo antes de descargar el diseño final.

3. Favicon.PRO

Esta es una opción ya en español (pruébala ahora), con un funcionamiento simple, por lo que es muy fácil de utilizar. Solo necesitas escoger el tamaño que deseas para tu imagen (por defecto está el estándar de 16×16 px).

Luego sube una imagen que desees convertir y haz clic en “Submit”. Se va a generar un archivo al que solo deberás hacer clic con el botón derecho del ratón y luego en “Guardar cómo”.

Eso sí, ¡acuérdate de guardarlo como ".ico"!

En este caso, te recomiendo que tengas la imagen guardada en un tamaño de 512x512 px, ya que esta página no tiene la opción de ajustar el tamaño para que sea cuadrado, por lo que deberás hacerlo manualmente.

4. FreeFavicon

FreeFavicon

FreeFavicon es una plataforma cuyo principal fuerte es su galería de "fav iconos", y es que posee una amplia base de datos con un montón donde escoger, además de que los tiene catalogados en diferentes categorías, para que te sea más fácil encontrar lo que estás buscando.

Aun así, te da la posibilidad de crear los tuyos propios por si no consigues lo que deseas, solo que su herramienta es un poco más compleja que las anteriores.

Igualmente puedes subir una imagen y convertirla con los tamaños que desees.

5. Image Online Convert

Image Online Convert

Image Online Convert es una página que pone a tu disposición una herramienta online para convertir imágenes de un formato a otro, y esto incluye el formato ".ico".

Entre sus ventajas está que puedes importar una imagen desde múltiples fuentes, ya sea Dropbox, una URL o directamente desde tu ordenador.

Puedes realizar ajustes de tamaño para que escojas el tamaño que deseas, si lo dejas en blanco utilizará el mismo tamaño de tu imagen hasta un máximo de 256 px, más de allí, la herramienta hará el ajuste de tamaño de forma automática.

6. Convert Image

Similar a la página anterior, Convert Image es una página en donde básicamente puedes pasar una imagen de un formato a otro.

Solo necesitas subir un archivo y seleccionar la opción “Create my Fav.”, y se creará tu logo de forma automática.

La plataforma te recomienda que utilices fotos cuadradas ya que esto es lo usual en un elemento de estas características.

Ya lo último es descargar el resultado; puedes ingresar a la página con este enlace: .

7. Favic-o-Matic

Favic-o-Matic

Favic-o-Matic es otra opción en la que podrás convertir una imagen "normal" en el símbolo de tu web. Lo más destacable es su cómico diseño de página, que te va a sacar unas risas.

Puedes escoger entre dos opciones para el tamaño, el clásico que incluye el estándar 16x16 + 32x32 px y la opción completa que incluye todos los tamaños para navegador, aplicaciones y demás.

La página te hace la recomendación de que uses 32x32 px como tamaño mínimo, para la imagen que vas a subir, de esta forma se verá mejor el resultado final.

8. Real FV Generator

Real Favicon Generator

Real Favicon Generator es quizás la opción más completa de la lista. Subes tu imagen, la conviertes en ".ico" y luego visualizas el resultado, editando lo que sea que no te termine de convencer antes de descargarlo.

Puedes crear un favicon básicamente para cualquier cosa, desde aplicaciones hasta sistemas móviles como Android o el clásico para tu sitio web.

9. IONOS Fav Generator

Favicon Generator de IONOS

Desde la página de IONOS también podrás diseñar el tuyo propio desde cero de forma muy simple.

También puedes utilizar textos o si ya tienes un diseño elaborado, solo necesitas subir su archivo de imagen. Es bastante profesional y con excelentes resultados.

10. GenFavicon

Terminamos esta lista con otra página en español que, básicamente, es la meca de lo simple.

Genfavicon es demasiado sencilla de utilizar, por lo que solo necesitas 3 pasos para crear el tuyo.

  • Subir una imagen.
  • Previsualizar el resultado.
  • Elegir el tamaño y la parte que deseas convertirlo.

Finalmente, guarda el resultado en tu ordenador. En solo 3 sencillos pasos rápidos podrás tener uno personalizado.

Conclusión

Espero que a través de esta guía hayas comprendido exactamente qué es un favicon y las ventajas de disponer de uno propio para tu sitio web o Blog.

Además, como has podido comprobar, es muy fácil instalarlo desde tu WordPress, sin necesidad de acudir a ningún profesional del diseño.

¿Cuál es tu plataforma favorita para crear un favicon online?

Imagen principal (warrior) By Shutterstock.

Cuéntame todas aquellas dudas que te hayan podido surgir a raíz de esta lectura, ¡te espero en los comentarios! 😉

[ratings]

¿Te ha gustado este contenido?

Puntuación media 0 / 5. Recuento de votos: 0

Sé el primero en puntuar este contenido.

Publicaciones Similares

Deja una respuesta

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

2 comentarios

  1. Me ayudan mucho!! Antes de pasarme al navegador de Google usaba en el Mac Safari y no te muestra los favicon (al menos antes) y era un lio cuando tenía varias pestañas abiertas

    1. Hola Álex, es cierto, hay navegadores a los que debes indicarle expresamente el favicon que quieres aplicar. De todas formas, aquí te muestro medidas exactas y demás información para que puedas hacerlo correctamente. Ya me dices qué tal te ha ido 😉 Un saludo