Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

En este post vamos a ver qué es un favicon y por qué tu web debe tener uno. Veremos también como podemos crear un favicon y que herramientas podemos utilizar.

Posteriormente veremos cómo podemos añadir el favicon a wordpress. Ya sea a través de las opciones disponibles en la plantilla, a través de código o a través de un plugin.

La manera de añadir el favicon va a depender de las circunstancias de cada caso particular.

 

 

 

1.- ¿Qué es un favicon?

 

El favicon en una imagen cuadrada en formato .ico que se muestra en la pestaña del navegador en la que se ha abierto el sitio web.

El favicon asociado a una web también se mostrará cuando dicha web se añada a los favoritos del navegador.

 

Qué es el favicon

El favicon aparece en la pestaña actual del navegador y en los favoritos

 

El favicon es nuestra marca, es algo así como el logo pero que se muestra en otras partes diferentes.

Habitualmente podremos utilizar alguna parte del logo para crear nuestro favicon, pero también podemos crear un favicon que no esté sacado del logo.

Tienes que tener en cuenta que el favicon debe ser cuadrado.

 

 

2.- Cómo crear Favicon

 

Para que el favicon quede perfectamente adaptado a los colores de su entorno, mi recomendación es hacer el favicon en .png con fondo transparente y posteriormente pasarlo a formato .ico

Lo que habitualmente haremos para crear el favicon será abrir nuestro logo en Photoshop y recortar un cuadrado, quitar el fondo para dejarlo transparente, ajustar el tamaño y guardar para web con formato png-24

Hoy en día lo ideal es usar un tamaño grande para crear el favicon ya que dependiendo de dónde se muestre necesitará un tamaño u otro. Si utilizamos un tamaño muy pequeño para crear el favicon y luego éste se muestra en un lugar donde se tiene que ampliar perderemos resolución.

 

cómo crar el favicon con photoshop

Crear favicon

 

De esta manera podremos generar el favicon para nuestra web.

Mi recomendación es que utilices por lo menos unas dimensiones de 128×128 px para crear el favicon. También puedes probar en otras dimensiones como 64×64 px, 32×32 px o 18×18 px.

El dispositivo ampliará o reducirá las dimensiones de la imagen según le convenga.

 

 

2.1.- Convertir favicon a formato .ico

 

Una vez tengas el favicon creado y guardado en png-24 lo que deberemos de hacer es pasarlo a formato .ico

Para ello vamos a utilizar un sitio web exclusivamente creado para convertir imágenes creadas en formato PNG a formato ICO

 

IR AL SITIO

 

Haz clic en el rectángulo con el texto: “Drop your .png or .ico files here, or clic to select them manually!”

Se abrirá una ventana en la cual podrás seleccionar el archivo del favicon en formato PNG que has creado anteriormente.

Una vez subido el favicon aparecerá un rectángulo rojo en el lateral izquierdo con el favicon desde donde podremos descargar el favicon ya en formato ICO

Haz clic sobre la flecha para descargar el archivo del favicon en formato .ico

 

Convertir formato del favicon de .PNG a .ICO

Convertir favicon de formato PNG a ICO

 

 

3.- Cómo poner favicon en wordpress con la plantilla

 

En la mayoría de plantillas profesionales (de pago) actuales existe una opción en el panel de administración de la plantilla para poder poner el favicon en wordpress.

 

Aun no tienes claro que plantilla utilizar para wordpress. Echa un vistazo a esta mega guía para elegir plantilla para wordpress

 

 

3.1.- Poner favicon con la plantilla Divi para wordpress

 

Yo utilizo la plantilla Divi para la inmensa mayoría de proyectos, ya que pienso que es la mejor del mercado.

En el caso de la plantilla Divi para poner el favicon tendremos que acceder al panel de administración de wordpress e iremos a: “Divi > Opciones del tema”

 

¿No conoces la plantilla Divi? Mira este post y verás las inmensas posibilidades de esta fabulosa plantilla para wordpress

 

Desde ahí veremos una opción para subir el favicon con Divi. Haremos clic en el botón “subir” y elegiremos el archivo del favicon en formato ICO.

De esta manera subiremos el favicon a wordpress y lo enlazaremos con Divi.

A continuación guardaremos las opciones de configuración.

 

Añadir favicon con la plantilla Divi

Poner favicon con Divi

 

 

3.2.- Poner favicon en otras plantillas para wordpress

 

Como comentaba antes poner el favicon a través de la plantilla no es algo exclusivo de Divi. Realmente hoy en día la mayoría de plantillas Premium tienen alguna opción en su panel de administración para subir el favicon y el logo.

Por ejemplo en la plantilla Enfold iremos al panel de administración de wordpress y luego haremos clic en “Enfold”.

En la pestaña “Opciones del tema” tendremos la opción de subir el favicon

 

poner favicon con enfold

Poner favicon con la plantilla Enfold

 

 

4.- Cómo poner favicon en wordpress con código

 

En la mayoría de plantillas para wordpress profesionales podrás colocar el favicon desde sus opciones de administración. Pero es posible que utilices alguna Plantilla gratuita o de pago que no tenga esta opción.

En ese caso podremos intentar poner el favicon añadiendo un código o a través de algún plugin para wordpress.

Vamos a ver primero como podríamos colocar el favicon a través de código.

 

 

A.- Subir imagen:

 

lo primero que haremos es ir al panel de administración de wordpress e ir a: “Medios > biblioteca”.

Haz clic en el botón “Añadir nuevo” y añade el favicon.

Luego haz clic sobre el archivo del favicon en la biblioteca y copia su URL

 

subir favicon y copiar su url

Subir favicon a la biblioteca de wordpress

 

 

B.- Header php:

 

Copia el archivo header.php en tu tema hijo o child theme y luego añade el siguiente código.

Si no tienes un tema hijo o child theme tendrás que modificar el archivo header.php de tu plantilla, pero ya sabes que tendrás que volver a hacerlo cada vez que actualices la plantilla (si lo haces en el tema hijo te ahorra es)

 

¿sabes que es un tema hijo o child theme? y ¿sabes que ventajas tiene? descúbrelo en este post

 

El archivo header.php estará en: “wp-admin/themes/tu_plantilla/header.php”.

Tendrás que introducir el siguiente código entre las etiquetas <head> </head>

Añade el siguiente código justo antes de la etiqueta </head>

<link rel=”shortcut icon” type=”image/x-icon” href=”URL copiada en el punto A“/>

En el código tendrás que sustituir el texto URL copiada en el punto A por la URL del favicon que obtuviste en el punto A

 

código a añadir para poner favicon en wordpress sin plugin

Añadir código para poner el favicon en wordpress

 

 

5.- Cómo incluir el favicon con un plugin para wordpress

 

Es posible que no te guste mucho tocar el código de la web, porque no sabes muy bien lo que estás haciendo y te da miedo poder hacer algo mal que afecte a tu web.

En este caso puedes utilizar un plugin para añadir el favicon a tu web realizada con WordPress.

El plugin se llama “Very simple favicon manager” y es un plugin gratuito del repositorio de wordpress.org

He elegido este plugin porque es el único actualmente del repositorio que es compatible con la última versión de wordpress (en la fecha en que ha sido escrito este post)

IR AL PLUGIN

 

Lo primero que deberás hacer será crear el favicon y ponerlo en formato ICO. Puedes ver el proceso en el punto 2 de esta misma entrada de blog.

Lo segundo que tendrás que hacer será realizar es subir el favicon a la bliblioteca de wordpress y copiar la URL. Para ello puedes seguir el proceso descrito en el punto 4 A

Para configurar el plugin y poner el favicon una vez instalado el plugin ve al panel de administración de wordpress y ve a: “Ajustes > Favicon Manager”

Copia la url del favicon que has subido a la biblioteca y pégalo en el campo que pone “Favicon”.

Después haz clic en el botón de abajo para guardar los cambios

 

instalar plugin wordpress para poner el favicon

Poner favicon en wordpress con un plugin

 

En el plugin hay otras opciones diferentes a poner el favicon como subir imágenes tipo iconos para móviles como son el home screen icon para IOS o Windows. Pero estos son temas que no vienen a cuento de este post.

 

 

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto.
Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies