• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo poner un favicon en tu página web de Dreamweaver o Wordpress

favicon

Supongo que la gran mayoría de vosotros sabe lo que es un favicon, para quien no lo sabe, un favicon, también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores muestran el favicon de la página visitada en el encabezado de la pestaña correspondiente.

También se utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos y en los historiales de páginas visitadas y de navegación reciente.

El tamaño ideal de un favicon es de 16x16 píxeles, aunque puedes ir probando tamaños, con extensión .ico y se recomienda que el icono sea el logotipo que identifique tu proyecto para que la gente se familiarice con él y se posicione. A continuación os paso una imagen para que veáis que es un favicon.

Para realizar un favicon utilizamos el logo de nuestra empresa o negocio, a un tamaño no muy grande, que sea un cuadrado con fondo transparente, o a vuestro gusto, y guardado con una extensión .png. Una vez lo tengamos, nos vamos a la página de Dynamic Drive para convertir nuestra imagen .png a un icono con extensión .ico.

Lo primero será selecionar el archivo y elegir un tamaño de 32x32 o 48x48, si no se selecciona ninguno el tamaño será de 16x16. Luego le damos al boton Create Icon. Una vez creado el favicon hacemos clic en Download Favicon.

Si no queréis crear el archivo con extensión .ico podéis dejarlo directamente en .png pero con uno de los tres tamaños que hemos dicho antes.

Una vez que ya tenemos nuestro logo con la extensión y tamaño adecuado, vamos a explicar como ponerlo en nuestra página web de diferentes formas:

Poner el favicon en tu página web de Dreamweaver u otro editor (realizada sin CMS)

Es bien sencillo agregar el favicon, tan solo tenemos que poner uno de los dos siguientes códigos en todos los archivos .php de nuestra web dentro de la etiqueta <head>.

Con extensión .ico

<link rel="icon" href="img/faviconibo.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/faviconibo.ico" type="image/x-icon" />

Con extensión .png

<link rel="icon" href="img/faviconibo.png" type="image/png">
<link rel="shortcut icon" href="img/faviconibo.png" type="image/png" />

Tenéis que cambiar donde dice img/faviconibo.ico o img/faviconibo.png y poner la ruta donde tenéis puesta la imagen más su nombre, y listo!

Poner el favicon en tu página web de Wordpress

Hay varias formas de hacerlo si nuestra página web la hemos creado a través de Wordpress y son las siguientes:

  1. Accedemos a la administración de nuestra web y seguimos la ruta Apariencia->Theme Options. A veces aparece directamente el nombre de nuestro tema en la columna de la izquierda. En las opciones del tema, de normal en la primera pestaña, veremos un apartado que dice Custom Favicon o sólo Favicon. Tendremos la posibilidad de poder subir nuestro favicon, da igual si es .png o .ico. Previamente hay que subir la imagen a Medios, que es la librería o biblioteca de archivos que está en la columna de la izquierda. Si no tenéis esta posibilidad, pasar a la siguiente forma de hacerlo.
  2. Otra opción es ir al archivo header.php que se encuentra dentro de la carpeta de nuestro tema y copiar uno de los dos códigos anteriores explicados y pegarlo dentro de la etiqueta <head>. Cambiar la ruta y el nombre del archivo como hemos dicho anteriormente.
  3. Como última opción, sería a través de un plugin. Os dejo el enlace de tres de ellos que os pueden servir para hacerlo: All In One Favicon, Heroic Favicon Generator y Custom Favicon

Con lo sencillo que es ponerlo, yo no optaría por hacerlo a través de un plugin para no consumir recursos innecesarios que carguen más nuestra web de Wordpress.

Es importante tener un favicon, asi el usuario con un simple icono puedo reconocer la página. Espero que os sea de ayuda este tutorial.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (2)

  • foto
    Mauricio Responder

    Hola he seguido el tutorial y sin embargo el único icono que me aparece es en la parte superior de la pestaña y no en la barra de direcciones, que es lo que necesito, me puedes ayudar?, gracias saludos.

    01 de Agosto 2016 a las 22:36h
    • foto blog
      Paco (Iborra Web Design) Responder

      Hola Mauricio,

      Si el favicon te aparece en la parte superior en la pestaña significa que lo has hecho bien. Ese es el sitio del favicon, no en la barra de direcciones actualmente. Fíjate en el post en la primera imagen que pongo donde redondeo en rojo el lugar donde va el favicon. El icono que ves en la barra de direcciones cada navegador lo interpreta de una forma, Chrome con un icono de archivo o Firefox con un icono de una bola del mundo, ese icono o espacio está reservado a Certificados SSL, a veces aparece verde y con un candado que significa que esa página web tiene un Certificado SSL y por lo tanto es segura.

      Espero haberte podido ayudar con la respuesta. Gracias por comentar.

      Un saludo.

      02 de Agosto 2016 a las 11:39h

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code