Menú de Páginas
TwitterRssFacebook
Menú de Categorías

Publicado por en Oct 29, 2013 en Curso de WordPress, De la Red | 0 comentarios

Como Hacer un FavIcon y Subirlo a tu Sitio Web

Como Hacer un FavIcon y Subirlo a tu Sitio Web

Un Favicon es el icono o pequeña imagen que aparece en las pestañas, barra de direcciones, favoritos de los navegadores y sirve para representar nuestra web.

favicon, como crear un favicon

Basicamente un Favicon es una imagen de 16X16 pixeles en formato ICO (16 colores, 4 bits), aunque algunos navegadores también aceptan formatos GIF y PNG.

Como hacer un Favicon

En este caso vamos a crear un favicon en formato ICO que es el más extendido y el que aceptan todos los navegadores.

Lo primero que necesitas es una imagen, puede ser en formato, PNG, GIF, JPGo BMP, tienes que tener en cuenta que el favicon es cuadrado, así que trata de que tu imagen tenga esa dimensión.

Si quieres que tu favicon tenga un fondo transparente, necesitarás tu imagen en formato PNG con fondo transparente.

Voy a usar esta imagen como ejemplo:logo weboide, weboide

Una vez que tengas la imagen que quieras utilizar lo siguiente es utilizar una herramienta en línea que nos va a generer el favicon automáticamente.

En este caso vamos a utilizar Dynamic Drive

dynamic drive, favicon generator, generador de favicon

Como ven esta es una herramienta muy sencilla, solo tenemos que cargar una imagen dando clic en Choose File y después presionar el botón Creat Icon.

Si se fijan este generador de Favicon también nos da la opción de generar iconos más grandes para usarlos en el escritorio como accesos directos, si desean que su archivo contenga estos iconos más grandes solo tienen que marcar las casillas en la parte de Optional.

Una vez que hayan creado el icono solo tienen que bajarlo. Presionando el botón Download Favicon.

download favicon, bajar favicon

Listo! tenemos nuestro favicon
favicon weboide,
con el nombre favicon.ico.

Existen otras herramientas en línea que generan favicons, como, favicon.cc o Favicons From Pics, no está demás que les des un vistazo a estas herramientas ya que tienen diferentes funcionalidades, pero al final utiliza la que más te acomode.

Como subir el favicon a mi sitio web

Esto es muy fácil solo tienes que subir el favicon a la carpeta raiz de tu servidor por medio de un programa FTP como FileZilla con el nombre favicon.ico

Si subes el favicon a la carpeta raiz de tu servidor su dirección debe ser http://www.tudominio.com/favicon.ico, si escribes esa dirección en tu navegador debe aparecer tu icono.

Después debes especificar su dirección en HTML poniendo el siguiente codigo en el <head> (cabecera) de tu sitio.
<link rel=”shortcut icon” href=”http://www.tudominio.com/favicon.ico”>

¡Listo! esto es todo lo que tienes que hacer.

Para probar que como se ve tu favicon borra la caché de tu navegador e ingresa tu sitio web en la barra de direcciones o actualiza la pestaña si ya la tenías abierta.

Como subir el favicon en WordPress

En algunos temas de WordPress puedes subir el favicon directamente con las opciones de la plantilla, en dado caso de que tu plantilla no tenga esa funcionalidad puedes hacer dos cosas.

1. Con un programa FTP
Una vez que tengas tu favicon.ico súbelo por medio de un programa FTP a la carpeta raiz de tu servidor.

Ya que nuestra imagen este arriba nos dirigimos a Apariencia/Editor.

editor de archivos de wordpress

Abrimos el archivo de nombre Cabecera (header.php) y colocamos el código:

<link rel=”shortcut icon” href=”http://www.tudominio.com/favicon.ico”>

entre las etiquetas <HEAD> y <HEAD/>

Borramos la caché del navegador y actualizamos para ver los cambios.

2. A travéz del cargador multimedia de WordPress

Subimos la imagen favicon.ico con el cargador de multimedia de WordPress

cargador multimedia de wordpress

Cuando la imagen se cargue damos clic en editar y copiamos la ruta del archivo.

url de la imagen

Remplaza con la ruta de tu imagen.

<link rel=”shortcut icon” href=”remplaza-con-la-ruta-de-tu-imagen/favicon.ico”>

y pegamos este código en el archivo Cabecera (header.php) como lo mencioné anteriormente.

Para comprobar que funcione, borramos la caché del navegador y actualizamos la página.

Espero que este post te haya sido de utilidad, si tienes dudas o preguntas coméntalas y si eres nuevo por aquí te invito a suscribirte al blog para que recibas toda la información antes que nadie.

Soy Rodrigo Robert

Blogger, WordPress Lover, Emprendedor, apasionado del e-Marketing, el Diseño, los tacos y el rock & roll

Publicar Comentario

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