Creación de un favicon

Profesores:JAB y Ester Torres

Creación de un favicon

Un favicon es el icono que se muestra en la pestaña del navegador o bien en las búsquedas de Internet.

Existen dos maneras de utilizar un favicon:

Pero en ambos casos, lo primero que hay que hacer es crear el icono.

Crear el icono

Para la creación de un favicon se deben tener en cuenta 2 requisitos básicos: Para conseguir estas dos características lo más conveniente es crear un fichero con Photoshop con un lienzo de 16x16 píxeles (a 72ppp) y grabar el fichero con formato GIF o con PNG-8 para que restringa los colores a un máximo de 256 colores.

Para convertir este fichero a formato .ico podemos utilizar un servicio gratuito de la web favicon.cc, siguiendo estos tres pasos:

Importar la imagen GIF o PNG creada con Photoshop:

Hacer clic en el botón "Import Image".
Cargar la imagen:

Marcar la opción "Mantenga dimensiones" (Keep dimensions).
Hacer clic en el botón "Seleccionar archivo" para seleccionar el archivo PNG o GIF.
Pulsar el botón "Subir " (Upload).

Previsualizar el resultado y guardar el icono (.ico):

En la parte inferior del navegador podrás ver el resultado (en el Panel Preview).
Si es correcto pulsa el botón "Download Favicon" para descargar el icono.
Si usas Windows el fichero está en la carpeta 'Descargas '.

Cómo añadirlo a mi web

Si se quiere utilizar para todas las páginas del servidor no hace falta utilizar ningún código, basta con colocar el fichero .ico en la carpeta raíz del servidor.

Si por el contrario se quiere utilizar el icono en una sola página, ir variando utilizando diferentes iconos o bien si el icono no se llama 'favicon.ico' o está ubicado en otra carpeta se debe añadir un código dentro del <head> 

  <link rel="shortcut icon" href="carpeta/favicon.ico" type="image/x-icon" />
En el texto que está coloreado de color rojo se debe indicar la ruta donde se encuentra el icono, partiendo siempre desde la carpeta donde está ubicado el html que contiene este código.