En esta entrada del blog de Seguidores Online te vamos a contar todo sobre cómo crear un favicon. El favicon vendría siendo un icono o una herramienta pequeña pero significativa para promocionar la marca de un sitio web. Los primeros iconos fueron desarrollados en el año 1970 por Xerox PARC, como una forma de hacer más fácil el uso de las computadoras y que sea más sencillos para los usuarios. David Canfield Smith, en aquel tiempo siendo empleado de Xerox, acuñó el término “icono” a este tipo de imágenes. Las interfaces de los iconos fueron popularizadas más adelante por los sistemas operativos Apple Macintosh y Microsoft Window; por consiguiente es necesario crear uno para un sitio web.
Existen varios formatos clásicos para las imágenes del favicon y archivos binarios en formato propietario; como también herramientas y programas para poder crearlos. Una de las razones principales que tienen como objetivo es mejorar la experiencia de los usuarios durante la navegación web. Son muy pequeños, donde probablemente no tenga tanta importancia este tipo de imagen en una sitio web; pero el más mínimo detalle mejora la experiencia del usuario, por lo que es tomado en cuenta sin mencionar que es importante desde el punto de vista de una marca.
Hay que añadir, que es importante para el que ha logrado construir una marca influyente en los usuarios y posibles seguidores; después de todo el reconocimiento de tus clientes nuevos, actuales o potenciales es fundamental para el éxito de tu negocio desde varios puntos de vista.
¿Que es un favicon?
Es una pequeña imagen que aparece en todos los navegadores web que existen. Se trata de un ícono que se visualiza en las pestañas de un navegador cuando se visita cualquier sitio web; por lo que esto permite que la página sea identificada visualmente. Las dimensiones cuadradas que normalmente tiene es de 16×16 píxeles y suele ser el logotipo de una empresa o de un sitio web.
¿Para qué sirve?
Sirve para identificar visualmente la web de orígen en la pestaña del navegador y de esa manera mejorar la experiencia de los usuarios. Este ícono que identifica los sitios web, se hace visible al momento de agregar una página a favoritos en el navegador; es decir, que no incluir este tipo de imagen en nuestra página web, resulta poco profesional distrayendo la atención de los seguidores.
Existen programas que nos permite poder crear un favicon, como también, editar íconos para distintas plataformas. Los editores de íconos normalmente tienen un editor básico de imágenes para dibujar pixel por pixel utilizando herramientas sencillas y filtros. Hay algunos programas sobre todo los que son comerciales; con características más avanzadas junto con el software de edición de imágenes. Una cualidad importante de este tipo de programas es la de generación de iconos a partir de imágenes; algunos tienen una función para tomar capture y desde allí crear un icono; otro aspecto muy común es la extracción de íconos de los archivos binarios o ejecutables como los que terminan en extensión “.EXE”. Cabe mencionar que podemos encontrar sitios web que nos permiten crearlos en línea.
¿Puedes crear un favicon desde photoshop?
Photoshop es una herramienta usada comúnmente por los diseñadores gráficos, donde es posible crearlo para la web; pero este programa fue diseñado más que todo para retocar fotografías. Es un editor de gráficos rasterizados, que fue desarrollado por Adobe Systems Incorporated su nombre en español significa “Taller de fotos”; este programa es líder mundial del mercado de las aplicaciones de ediciones de imágenes.
En sus versiones iniciales trabajaba en un espacio formado por una sola capa; donde se podían aplicar toda una serie de efectos, textos, marcas y tratamientos. Photoshop se ha convertido, casi desde sus comienzos, en una de las herramientas usada extensivamente en multitud de disciplinas del campo del diseño y fotografía. Esta herramienta fue creada en el año 1991 y soporta muchos tipos de archivos de imágenes como, bmp, jpg, png, gifs entre otros formatos de imagen propios.
Formatos soportados por photoshop
PSD (PhotoShop Document), PDD
Formato estándar de Photoshop con soporte de capas.
PSB
Formato de documento grande que admite documentos de hasta 300.000 píxeles en cualquier dimensión; aceptan todas las características de Photoshop, como las capas, efectos y filtros, puede guardar imágenes de alto rango dinámico (HDR), de 32 bits por canal como archivos PSB. Solo puede abrirse en Photoshop CS o superior; los documentos guardados en formato PSB, no pueden abrirse en otras aplicaciones ni en versiones anteriores de Photoshop.
PostScript
No es exactamente un formato, sino un lenguaje de descripción de páginas; se suelen encontrar documentos en PostScript y también utiliza primitivas de dibujo para poder editarlo.
EPS
Es una versión de PostScript utilizada para situar imágenes en un documento; es compatible con programas vectoriales y de autoedición.
DCS
Fue creado por Quark (empresa de software para autoedición) y permite almacenar tipografía, tramas, etc; se utiliza para filmación en autoedición.
Prev. EPS TIFF
Permite visualizar archivos EPS que no se abren en Photoshop, por ejemplo los de QuarkXPress.
BPM
Formato estándar de Windows.
GIF
Muy utilizado para las web, permite almacenar un canal alfa para dotarlo de transparencia y salvarlo como entrelazado; para que al cargarlo en la web lo haga en varios pasos, ademàs admite hasta 256 colores.
JPEG
También muy utilizado en la web, factor de compresión muy alto y buena calidad de imagen.
TIFF
Una solución creada para pasar de PC a MAC y viceversa.
PICT
Desde plataformas MAC se exporta a programas de autoedición como QuarkXPress.
PNG
La misma utilización que los GIF, pero con mayor calidad. Soporta transparencia y colores a 24 bits. Solo las versiones recientes de navegadores pueden soportarlos.
Formato original de Acrobat, permite almacenar imágenes vectoriales y mapa de bits.
ICO
Es utilizado para representar archivos, carpetas, programas, unidades de almacenamiento, etc.
IFF
Se utiliza para intercambio de datos con Amiga.
PCX
Formato solo para PC. Permite colores a 1, 4, 8 , 24 y 32 bits.
RAW
Formato estándar para cualquier plataforma o programa gráfico.
TGA
Compatible con equipos con tarjeta gráfica de Truevision.
Scitex CT
Formato utilizado para documentos de calidad profesional.
Filmstrip
Se utiliza para hacer animaciones; también se puede importar o exportar a Premiere.
Flashpix
Formato originario de Kodak para abrir de forma rápida imágenes de calidad superior.
JPEG2000
Al igual que el JPEG, es nuevo formato de compresión que permite aumentar la calidad de la imagen.
Algunos sitios web para un favicon en línea
Así como hay programas para crear un favicon, existen sitios web que te permite crearlo de manera online y descargarlo para ser usado en un sitio web. Si deseas saber en qué páginas puedes hacerlo de manera online; sigue leyendo más adelante donde te explicaremos dónde y cómo hacerlo.
FavIcon Pro
Es un sitio web que te permite crear un logo para tu página web o blog en línea. Podríamos decir que es una herramienta online gratuita, para crear iconos de forma mas rapida; por lo que no tendrias que descargar un programa para hacerlo desde el PC. Los pasos para crear un favicon son muy sencillos o así lo haremos para ayudarte.
Cabe mencionar que deberás descargar la imágen que usarás para crear un favicon, ya que desde la página web te pedirá que la selecciones desde tu computadora.
- Lo primero que deberás hacer es acceder al sitio web por medio de un navegador como firefox, google chrome, opera o safari.
- Al seguir el paso número 1, verás la página de inicio. Donde dice tamaño de imagen, selecciona entre 16×16, 32×32, 48×48, 64×64 y 128×128 dependiendo de la imagen que hayas descargado.
- Busca la imagen para cargarla desde la opción “seleccionar archivo” y presionar el botón submit y se creará para tu página web.
Una vez hayas creado un favicon.ico, deberás seguir unos pasos para añadirlo al sitio web o blog. Solo deberás subirlo creado al directorio raíz de tu sitio web y comprobar que se haya hecho, copiar el código html que te lo proporciona y listo.
Logaster
Se trata de un servicio online que te permite no solo crear un favicon para tu sitio web, sino que podrás crear hasta el logo si así lo deseas. Por lo tanto, significa que podrás crear todo en un mismo sitio en cuestión de minutos. Esta herramienta generará a partir de tu logo, docenas de favicons para que puedas elegir y ser usado para tu página. Además, cuenta con una opción de previsualización que permitirá comprobar como se verá tu favicon en la página web; también podrás editar el ícono y cambiar el color, el tipo de caracteres etc. En este sitio web, conseguirás archivos .ico y .png en distintos tamaños.
Favicon generator
Muchos navegadores modernos soportan favicons guardados como archivos .gifs, .png o en otros formatos populares, pero todas las versiones de internet explorer aún requieren que tengan el formato .ico. Esta herramienta es una forma muy sencilla de convertir cualquier archivo gifs, png o jpeg en formato ico. Por lo cual, está también soportado por todos los navegadores modernos. Una vez hayas usado esta herramienta, podrás descargarlo para poder usarlo en un sitio web. Cabe mencionar, que el servicio también crea iconos para apps. Sin embargo, no se puede editar o modificar el favicon, por lo que solo te darán la imagen en tamaño pequeño.
Favicon i
Favicon io es una herramienta pequeña que te permite crear uno minimalista en pocos pasos. Todo lo que necesitas es configurar tu icono seleccionando el texto, tipo de letra, forma y colores. Después solo cargaras el archivo .ico o .png. Otra de las opciones que ofrecen en este sitio web, es poder convertir la imagen en formato .ico ya que todos los navegadores soportan este formato. También cuenta con una lista de emojis que puedes usar para integrarlo en tu favicon y dale un toque más personal y original.
X-Icon editor
A diferencia de los sitios web mencionados anteriormente, esta herramienta se trata de una aplicación que está basada en html5, y permite crear iconos de alta resolución que son compatibles para cualquiera de las versiones del navegador internet explorer. tiene dos opciones que puedes utilizar como subir tu propia imagen o dibujar y empezar a crear un favicon. Los tamaños admitidos por este sitio web es de 16×16, 24×24, 32×32 y 64×64; al final de todo podrás descargar la imagen en formato .ico solamente.
Favikon
Favikon probablemente sea la herramienta más sencilla de usar ya que cuenta con opciones fáciles utilizar. Al igual que las anteriores que se ha mencionado, tendrás que descargar la imagen a utilizar para crearlo y subirla. Por consiguiente recortará la imagen, y la descargas como icono en formato .ico o .png. Cabe mencionar que esta plataforma no cuenta con otras opciones de edición aparte de recortar, pero si lo que necesitas es solamente convertir tu imagen a .ico, lo podrás hacer de manera gratuita obteniendo un icono en el tamaño estándar más pequeño.
Favicon cc
Esta plataforma es completa ya que es posible crear un icono desde cero, cómo importar una imágen ya descargada o diseñada con un programa gráfico y diseñar un logo, partiendo desde esta herramienta como lo es Favicon cc. Una opción interesante que ofrece esta plataforma es crear un icono animado para tu página o sitio web. Este sitio, también con intención de ayudarte a tener inspiración, cuenta con una lista de los mejor valorados por los usuarios para que puedas tener una idea de como crear el tuyo. Cabe mencionar que puedes editarlo pudiendo elegir un color y tipo de texto y al terminarlo poder descargarlo en formato ico a tu pc para que lo puedas utilizar.
Podrasw
Es una herramienta gratuita que te permite personalizarlo como quieras. Esta plataforma soporta algunos formatos como jpg, png, gifs, tif y tiff. Crear desde este sitio web es muy sencillo, solo deberas cargar una imagen la imagen desde tu pc para convertirla en formato ico y elegir el tamaño desde el 16×16 hasta el 128×128 requerido para windows 7.
Hasta aquí nuestra entrada en la que te contamos qué es y cómo crear un favicon. Esperemos que te haya gustado, y que si tienes alguna web más, nos comentes!!
También puede interesarte este contenido relacionado:
- Significado de los sueños
- Conoce todas las razas de gatos de diferente tamaño
- Todo lo que quieres saber sobre el diccionario de los sueños