Cómo crear un favicon para tu web

Un favicon es un icono con el cual se representa una página web. Esta imagen se muestra en distintos apartados del navegador como en las pestañas abiertas, favoritos, barra de direcciones o accesos directos.¿Te has preguntado alguna vez cómo crear un favicon para tu web? A continuación te damos las claves.

¿Qué es un favicon?

Técnicamente un favicon no es más que una imagen de 16×16 píxeles, en formato ICO. Ahora bien, la mayoría de los navegadores amplían el abanico de opciones, soportando otros formatos como PNG o incluso GIF animado.

El tamaño también es relativo. La mayoría del tiempo se mostrará el icono de 16×16 píxeles (realmente pequeño) pero, si la imagen es mayor, será útil en casos aislados como en los accesos directos a páginas web.

¿Qué formato es mejor?

La información anterior quizá te haya confundido. GIF, PNG, ICO… ¿Cuál es mejor? La verdad es que cada uno de ellos tiene su peculiaridad:

  • ICO: Es el formato más estándar: funcionará en todos los navegadores. Además, permite incluir en un único archivo varias versiones con distintos tamaños: 16×16, 32×32, 64×64…
  • GIF: Puede ser animado y tener transparencia, pero 256 colores como máximo y no se verá correctamente en la mayoría de los navegadores.
  • PNG: Con él tendrás mejor calidad y canal alpha para transparencia

En cualquier caso, elegir un formato no implica renunciar al resto. Es imprescindible disponer del formato ICO, pues es el más extendido. Ahora bien, esto no impide que también tengas otra versión en formato PNG, que se verá mejor en otros navegadores.

En cuanto al tamaño, es recomendable basar el diseño en un tamaño superior a 16×16, como 64×64. Más tarde, siempre podrás redimensionarlo para comprobar que sigue siendo entendible, y podrás ofrecer a tus visitantes una alternativa a mayor resolución.

Lo primero, la imagen

Para crear tu favicon lo primero que necesitas es una imagen. Ten en cuenta que el tamaño será muy reducido y el formato cuadrado, así que abstente de complejas representaciones alegóricas sobre la vida y el universo: cuanto más simple, mejor. Si tu página web tiene logotipo o algún color representativo, no dudes en utilizarlo en tu diseño.

Puedes utilizar cualquier editor gráfico como es el caso de PhotoshopGimp. Si tu diseño implica transparencia (por ejemplo, si es un círculo), graba en formato PNG, que dará mejor resultado que GIF. Esto es así porque mientras que GIF sólo tiene un color que se comporta como transparente, PNG puede hacerlo mediante un canal alpha de 8bit de color.

Convertir en icono

Una vez tienes la imagen que quieres utilizar en formato cuadrado, ha llegado el momento de utilizar alguna de las múltiples páginas web con las cuales puedes generar favicon.

De hecho, podrías simplemente utilizar un editor de iconos como IcoFX y grabar en formato ICO, pero es más simple y rápido utilizar las alternativas en la red.

Favicon.cc es una de las páginas más conocidas. No sólo podrás importar tu imagen para modificarla, sino que dispone de herramientas de dibujo básicas con las que darle unos últimos retoques, viendo los cambios en tiempo real. Por si no fuera suficiente, también puedes crear animaciones in-situ. Otras alternativas para la generación de favicon a partir de imágenes las puedes encontrar en Html-kitDynamic Drive,Favicon.co.ukGenFavIcon.

Cargar la imagen

En nuestro ejemplo usaremos Favicon.cc. Lo primero que deberás hacer será pulsar Import Image, para subir la imagen que has creado con anterioridad. Selecciona la imagen en tu disco duro con Examinar, y termina el proceso presionando Upload.

Edición de última hora

Una vez se ha completado la subida, tienes la opción de realizar unos últimos retoques desde la propia página web.

Resulta especialmente útil para ajustar transparencia y hacer pequeños ajustes en las partes que no se entienden bien tras la reducción de tamaño.

En cuanto hayas terminado, pulsa sobre Download Favicon, para obtener tu archivo Favicon.ico.

Súbelo a Internet

Ya tienes tu favicon… ¿ahora qué? El siguiente paso es ponerlo en Internet. Es una buena idea que se encuentre en la carpeta raíz de tu página. Por ejemplo, si tu dominio es http://www.dominio.com, el favicon debería estar en http://www.dominio.com/favicon.ico.

Si esto no es posible, no te preocupes. Puedes hospedar tu favicon en cualquier hospedaje de imágenes gratuito, aunque algunos navegadores (especialmente los antiguos), así como otras aplicaciones, se empeñarán en buscarlo en la dirección anterior.

Además de subir el archivo ICO, también puedes subir una imagen PNG. Una vez tus imágenes están en la red, necesitarás su dirección URL para pasar al siguiente apartado.

Especifica su dirección en HTML

Ya está todo listo, tan sólo una pequeña línea de HTML te separa de adornar tu página web con un precioso favicon. Inclúyela entre y

Si vas a usar sólo ICO:

rel=”shortcut icon” href=”/ruta_de_tu/favicon.ico” />

Si vas a usar PNG (ojo, no se verá en navegadores antiguos)

rel=”shortcut icon” type=”image/png” href=”/ruta_de_tu/favicon.png” />

Si vas a usar ambos formatos (mejor compatibilidad)

Asegúrate de que el ICO está en la carpeta raíz. Internet Explorer lo leerá, mientras que el resto hará caso a la siguiente línea:

rel=”shortcut icon” type=”image/png” href=”/ruta_de_tu/favicon.png” />

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s