Programa para crear favicon. Una forma universal de crear favicons. ¿Cómo funciona el proceso de creación de un ícono en Logaster?

19.11.2023 -

Hoy volveremos a hablar de las imágenes para el blog, es decir, del icono del proyecto, llamado favicon. Analicemos qué es un favicon, cómo crearlo y conectarlo a nuestro sitio. Y también, qué tamaño debe tener esta imagen y por qué cada uno de ustedes debería, simplemente debe, instalarla. Después de todo, incluso este ícono puede afectar el tráfico a tu blog.

¿Qué es un favicon?

El concepto de favicon es bastante simple y se forma a partir de dos palabras en latín (de hecho, como todo lo demás en Internet): icono de favoritos. Esto a su vez puede traducirse como icono o insignia. El significado puede ser así; icono favorito o favorito. ¿Por qué este nombre? Es simple, favoritos es solo el nombre de los marcadores en el navegador, por lo que el nombre puede interpretarse como una imagen de un marcador o pestaña del navegador. Después de todo, no puedes evitar notar que cuando abres un sitio o lo agregas a tus favoritos, vemos no solo su nombre, sino también su imagen, que se llama favicon. Espero haber podido explicar qué tipo de animal es este.

¿Por qué podrías necesitar un favicon?

Bueno, todo es así de simple, un favicon es necesario para individualizar un proyecto de Internet. Es decir, otra característica distintiva de su blog será esta imagen, que no sólo hará más cómodo el uso de su sitio en un navegador, sino que también, con el enfoque correcto, aumentará el número de visitantes a su proyecto.

En primer lugar, puede resultar conveniente en un navegador, ¿por qué? Por ejemplo, cuando tengo varias pestañas abiertas, puedo navegar por el ícono del sitio que necesito en ese momento. Es decir, es conveniente para gente como yo.

En segundo lugar, esta imagen puede atraer más visitantes a su recurso desde el motor de búsqueda Yandex si es pegadiza y se destaca entre otras, pero sin fanatismo. Gracias a que Yandex inserta un favicon en las primeras nueve páginas de resultados de búsqueda, tu blog será diferente de los demás. Precisamente por esta razón Vale la pena pensar en conectar un favicon a tu proyecto.. Así es como se ven las primeras páginas de búsqueda.

hacer un favicon No será difícil, porque hay una gran cantidad de generadores en la red que pueden crear un favicon a partir de imágenes comunes y permitirle dibujarlo usted mismo desde cero. También puedes crear una imagen usando Photoshop y luego usar generadores para convertirla al formato deseado.

Las diferencias entre imágenes e íconos normales son pequeñas, pero existen. La imagen debe ser simple (los elementos gráficos complejos serán difíciles de ver), tener un tamaño de 16x16 píxeles y debe estar en formato ico. Por supuesto, puede utilizar formatos png o gif, pero estas imágenes no se mostrarán en todos los navegadores, por lo que la mejor opción es utilizar el formato ico.

No veo el sentido de contarte cada paso de cómo hacer este ícono, porque todos pueden manejarlo. Lo principal es tener en cuenta los requisitos de las imágenes y todo saldrá bien. En resumen, descargue o dibuje una imagen y cree un favicon utilizando generadores en línea. Los generadores en línea se pueden encontrar escribiendo en la búsqueda de Google o Yandex: favicon. O aquí hay un enlace a un servicio con el que puedes dibujar desde cero o crear un favicon a partir de una imagen terminada: http://favicon.ru/

¿Cómo conectar un favicon para un sitio web?

Bien, el ícono está listo. Ahora, ¿cómo hago para que se inicien los navegadores? mostrar favicon para el sitio?

Después de usar el servicio, descargue el ícono listo para usar para su blog en su computadora. Y sube la imagen usando un cliente FTP a la carpeta raíz del blog (public_html/site/your_file_in_ico_format) o cualquier otra. Pero es mejor ir a la carpeta raíz, simplemente es más fácil al compilar la ruta al archivo.

Entonces, el archivo está subido, ¿qué sigue? Ahora, puedes comprobar si tienes dudas de que el archivo esté subido a la carpeta raíz: tu_sitio/favicon.ico. Si el archivo se descarga en la carpeta raíz, entonces se mostrará en esta dirección. A continuación, debe escribir para cada página del recurso entre las etiquetas. Y el siguiente código:

Y si el ícono está en una carpeta diferente, entonces debería ser así:

Este código se considera generalmente aceptado para muchos recursos de Internet y funcionará en cualquier motor. Pero puedes escribirlo de manera diferente para diferentes motores. Por ejemplo, para WordPress, este código se vería así:

/favicon.ico" />

Sólo que en esta opción el icono debe estar en la carpeta con la plantilla. Por ejemplo (public_html/site/wp-content/themes/your-theme/favicon.ico).

Después de estos pasos favicon para el sitio comenzará a funcionar y podrás verlo en las pestañas de tu navegador. Pero en los resultados de búsqueda de Yandex, el archivo no se mostrará inmediatamente; primero debe esperar hasta que el robot de Yandex indexe el ícono y solo después comenzará a aparecer en los resultados de búsqueda, y solo con la condición de que su blog esté activado; una de las primeras nueve páginas de los resultados de la búsqueda.

Eso es todo. Si algo no queda claro, pregunta y lo resolveremos. ¡Hasta luego!

Hola, queridos lectores del blog. La conversación en el artículo de hoy se centrará en los llamados íconos de Favicon.ico. Descubriremos qué es un favicon, por qué debe instalarlo en su sitio web y cómo crear usted mismo un icono del tamaño requerido.

En principio, para crear un favicon no es necesario utilizar ningún generador especial en línea, aunque es bastante cómodo y sencillo. Puedes intentar hacerlo en Photoshop, pero de forma predeterminada, desafortunadamente, no puede guardar imágenes en formato ICO. Por lo tanto, para enseñarle a Photoshop a trabajar con ICO, necesitará instalar un complemento especial.

Pero si no se siente cómodo con Photoshop (ni tampoco con él), le resultará mucho más conveniente utilizar uno de los muchos servicios en línea que se enumeran a continuación. Además, en algunos de ellos podrás dibujar un nuevo icono completamente desde cero, y en otros podrás convertir una imagen que ya tienes (que te convenga) a formato favicon.

Bueno, la opción más sencilla es descargar la colección Favicon desde alguna galería o catálogo online. Lea a continuación dónde puede conseguirlos.

Cómo crear un Favicon en línea y dónde puedes descargar una colección de ellos

Permítanme primero dar ejemplos de servicios (los llamados generador de favicones), donde puede, sin ninguna habilidad especial, diseñar un minilogotipo completamente decente para su sitio web, o al menos convertir automáticamente una imagen adecuada al formato requerido para cargar un favicon en el sitio.

Faviсon.cc— un generador de favicon en línea bastante conveniente. Usándolo podrás, por ejemplo, crear tu propio icono desde cero (completamente exclusivo), dibujándolo píxel a píxel. Para hacer esto, deberá hacer clic en el botón "Crear nuevo Favcon" en el lado izquierdo de la ventana del servicio.
En el centro de la página del generador hay un área donde cada cuadrado es un píxel de tu futuro favicon. Tu tarea es pintar estos cuadrados con diferentes colores. Para pintar un cuadrado con un color, debe marcar la casilla en el lado derecho de la ventana de servicio en el campo "Selector de color", seleccionar el color deseado de la paleta ubicada allí y hacer clic en el cuadrado deseado. Para eliminar el sombreado incorrecto, marque la casilla "transparente" y haga clic en el cuadrado, como resultado de lo cual se volverá incoloro (transparente).
Para mover un píxel a través del lienzo del generador, deberá marcar la casilla "mover". Puedes ver el resultado de tu trabajo a escala real en el área "Vista previa" debajo del lienzo. Si el Favicon que creó le conviene, haga clic en el botón "Descargar" para guardarlo en su computadora. Como resultado, recibirá un archivo gráfico que luego podrá descargar y cargar en el servidor de hosting.
Ahora ya sabes cómo hacer un mini logo para tu sitio web desde cero. Pero si no tienes talento gráfico, puedes utilizar el servicio de generador en línea. sube cualquier imagen para el futuro favicon, que servirá como espacio en blanco. La imagen puede tener absolutamente cualquier tamaño y formato. Para cargar el archivo de icono al servicio en línea, deberá hacer clic en el botón "Importar imagen" en el lado izquierdo de la ventana del servicio.
En la ventana que se abre, haga clic en el botón "Examinar" y busque una imagen adecuada en su computadora. Luego elige qué hacer con la relación de aspecto de tu imagen al convertirla a 16 por 16 (cuadrado). Esto es cierto si la imagen que subes no es cuadrada. En este caso, son posibles dos opciones: dejar la relación de aspecto sin cambios (Mantener dimensiones) o convertir la imagen a una vista cuadrada (Reducir a icono cuadrado). En el segundo caso, la imagen del futuro favicon se distorsionará según uno de los ejes.
Para cargarla en el generador en línea y convertir su imagen, deberá hacer clic en el botón "Cargar". El Favicon.ico creado a partir de él será editable de la misma manera que el que dibujaste. Cuando termines de trabajar en tu obra maestra, haz clic en el botón "Descargar" para descargarla a tu computadora.
Este servicio en línea también tiene la oportunidad de utilizar colecciones de favicons creadas por otros usuarios y puestas a disposición del público. Para ver las exhibiciones disponibles en la galería, deberá hacer clic en el lado izquierdo de la ventana en el botón "Últimos Favicons" para ver las colecciones ordenadas por fecha de creación, o en el botón "Mejores Favicons" para ver galerías ordenadas por calificación.
favicon.ru- alguna vez este servicio fue mucho más simple que el generador en línea descrito anteriormente, pero recientemente se ha convertido casi en su análogo, pero solo en ruso. Favicon.ru no sólo te permite convertir cualquier imagen que tengas (en tu computadora o en Internet) al formato ICO con un tamaño de 16 por 16 píxeles, sino que también te permite dibujarla desde cero, píxel a píxel.
Esta versión del generador de favicon en línea es notable, quizás, solo porque es nacional. Por eso terminó en este artículo. Entonces, para trabajar con él, debe hacer clic en el botón "Seleccionar archivo" en la parte superior de la página principal y especificar la ruta a la imagen deseada en su computadora. La imagen descargada y convertida al formato Favicon.ico se puede corregir y luego guardar en su computadora. Todo es simple y conveniente.
logaster.ru es un generador de logotipos en línea, pero además de logotipos, también crea un favicon. A diferencia de todos los demás servicios, no es necesario dibujar un diseño de favicon ni convertirlo en un logotipo.
Para crear un favicon, primero debe ingresar el nombre del sitio o empresa y seleccionar el tipo de actividad. El servicio ofrecerá varias docenas de plantillas de favicon listas para usar. Puedes leer más sobre cómo crear un favicon. Después de crear Favicon.ico, puedes descargar el archivo a tu computadora en formato ICO o PNG.

Después de eso, todo lo que tienes que hacer es hacer clic en el botón "Crear". En la página que se abre verá un enlace para descargar el favicon resultante.

Una selección de generadores, colecciones y galerías de favicons online.

Si por alguna razón no le gustó el generador de favicon descrito anteriormente, puedo sugerirle que pruebe suerte en uno de los siguientes servicios gratuitos en línea:

FaviconGenerator: le permite convertir cualquier imagen descargada de su computadora al formato de favicon deseado (puede cargar imágenes).
AntiFavicon es un generador de Favicon bastante interesante. En él puedes crear un favicon con una inscripción. Deberá ingresar el texto de la inscripción en los campos "Texto superior" y "Texto inferior", y ajustar la combinación de colores en el área "Colores".
FavIcon de Pics es otro servicio en línea simple: usted especifica la ruta a la imagen en su computadora, convierte y descarga el archivo resultante en formato ICO y GIF.
Iconj: lo destacable es que puedes descargar el ícono creado o dejarlo en el servicio y recibir un enlace a este archivo.
DeGraeve es un generador de Favicon bastante potente, similar en funcionalidad al Favicon.cc analizado anteriormente. Aquí también puedes hacer todo desde cero o subir una imagen, que luego podrás ajustar y descargar en formato ICO de un tamaño adecuado.
Generador: le permite generar un favicon a partir de una imagen cargada y crearlo desde cero en un editor especial.
Editor de íconos en línea favicon.ico, bueno, en cierto modo lo hace todo: crear favicons desde cero y modificar una imagen existente.
Online Favicon es una herramienta muy funcional para crear y editar mini logos
Generador de Favicon gratuito, en caso de que nada de la lista anterior le convenga.
Generador de favicon: sencillo y elegante...

Si no le importa la exclusividad de su minilogotipo para el sitio y no puede jugar con editores y generadores, puede elegir un ícono adecuado para usted en sitios donde los hay a diez centavos la docena. Después de todo, de hecho, nos conviene absolutamente cualquier icono de 16 por 16 píxeles que pueda descargar de Internet o encontrar en el fondo de su computadora.

Pero hay que recordar que el favicon debe, ante todo, atraer la atención de los usuarios. Idealmente, un usuario podría reconocer su sitio simplemente mirando el Favicon, por lo que es mejor si es único, pero también puede buscar algo fuera de lo común en Internet.

Si no tienes el deseo o la oportunidad (no eres artista y nunca lo has sido), entonces la forma más sencilla sería intentar buscar en galerías con colecciones de favicons gratuitos:

Iconj es una colección bastante grande de íconos diseñados por otras personas y puestos a disposición del público.
Favicon.cc: 55 mil opciones diferentes para todas las ocasiones. También hay favicons animados, que sólo serán visibles en el navegador FireFox.
La Galería Favicon: algunos íconos más que se ajustan al tamaño

Si conoce otros recursos similares, agregaré sus enlaces a esta lista.

Cómo instalar un Favicon en un sitio web y especificar la ruta al mismo

Su navegador y el robot de búsqueda Yandex busque el favicon principalmente en la carpeta raíz de su sitio. Por lo tanto, puedes simplemente conectarte al sitio a través de FTP y cargar tu archivo Favicon.ico en su directorio raíz (generalmente las carpetas public_htm o htdocs) (es mejor escribir su nombre en letras minúsculas). Ahora abra su recurso en algún navegador y vea si el ícono en la pestaña ha cambiado. ¿Ha cambiado? ¿No? Bueno, está bien.

Si no pudiste colocar un favicon de esta manera, es posible que tengas que hacerlo, porque... A menudo sucede que se carga una versión antigua desde el caché. Puedes probarlo, para mí responde mejor a los cambios realizados sin borrar el caché. Si el problema no está en la memoria caché del navegador, esto significa que su sitio tiene una ubicación diferente para el favicon, diferente de la carpeta raíz. ¿Cómo puedo comprobar esto?

Abra el código fuente de cualquier página de su sitio. Para ver su código fuente, simplemente haga clic derecho en la página y seleccione el elemento del menú contextual apropiado (por ejemplo, "Código fuente" en el antiguo Opera, o "Código fuente de la página" en Mazila Firefox, o "Ver código de la página" en Google Chrome, o “Ver código HTML” en IE) o presione el método abreviado de teclado Ctrl+U. Ahora mire en la parte superior del código de la página una línea que especifica la ruta a favicon.ico.

Podría verse algo como esto:

Ahora, conociendo esta ruta, puedes conectarte nuevamente vía FTP y cargar tu favicon usando la ruta especificada, reemplazando la que ya está en el sitio. Si no se han producido cambios en la barra de direcciones del navegador nuevamente, intente borrar el caché del navegador nuevamente.

EN Joomla Favicon generalmente se encuentra en la carpeta con la plantilla que está utilizando (la ruta en Joomla 1.5 se escribió en el archivo index.php desde el directorio de la misma plantilla, pero en Joomla 3 todo se volvió un poco más complicado). Aquellos. Para cambiar el favicon en Joomla, todo lo que necesita hacer es seguir esta ruta y cargar su archivo favicon.ico allí, y responder afirmativamente a la pregunta sobre el reemplazo:

/templates/folder_with_the_design_template/favicon.ico

Archivo favicon en WordPress De forma predeterminada, también puede estar en la carpeta con el tema que estás utilizando (la ruta al mismo también se establece allí):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

En general, si quieres establecer o cambiar la ruta a su favicon, que será entendido tanto por los navegadores como por el robot de búsqueda Yandex, luego deberá escribirlo en el archivo de plantilla correspondiente para Joomla, WordPress o cualquier otro motor, entre las etiquetas de apertura y cierre. CABEZA, las siguientes líneas de código:

En qué archivo de plantilla deben escribirse estas líneas depende del motor de su sitio. Por ejemplo, en en WordPress necesitas abrir el archivo header.php para editarlo: wp-content/themes/Folder_with_your_theme_design. Abra header.php en el editor y al principio busque la etiqueta HTML HEAD de apertura. En cualquier lugar después de él, pero antes del HEAD de cierre, escriba una de las líneas de código anteriores indicando la ruta a su archivo gráfico de mini-logo.

Cómo instalar favicon animado? Básicamente, exactamente igual que uno normal. La única diferencia será el código insertado en la plantilla de su sitio web, con el que indicará a los navegadores y al robot de búsqueda Yandex la ruta al archivo gráfico deseado. El hecho es que el Favicon animado tendrá una extensión GIF y, por lo tanto, en las líneas de código deberás escribir algo como esto:

Esa es toda la diferencia entre los favicons animados y los normales. Pero tenga en cuenta que el icono animado sólo funcionará en Firefox; en otros navegadores será estático. Yandex, al cargar su favicon animado, lo convierte a un formato PNG estático. Pero, en mi opinión, no vale la pena: instalar un logotipo animado en lugar de un mini logotipo normal para un sitio no tiene mucho sentido. Pero esa es solo mi humilde opinión.

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Tú podrías estar interesado

Cliente FTP en línea Net2ftp y Google Alerts: servicios útiles para webmasters
Análisis de sitios web en servicios online gratuitos Pr-cy, Cy-pr, Be1, Xseo y otros
Iconos, insignias, fondos, imágenes y logotipos para el sitio (servicios en línea IconFinder, Freepik, PSDGraphics y otros)
Usabilidad: cómo hacer que su sitio web sea conveniente para los visitantes e intentar que sigan leyendo sus artículos durante el mayor tiempo posible.
MegaIndex Tools: un conjunto de herramientas para webmasters y optimizadores
Cómo verificar la compatibilidad entre navegadores del diseño de un sitio web en Browsershots y configurar el envío de un ping cuando aparecen nuevos materiales
Http: ¿qué es, cómo ver los encabezados y verificar el código de respuesta del servidor? ¿Qué significan los códigos 200, 301, 302, 404 y 500?
Crossposting: qué es y cómo hacerlo correctamente

Ahora el ícono de un sitio personal, Favicon, es una especie de tarjeta de presentación de cualquier recurso web. Este icono resalta el portal deseado no solo en la lista de pestañas del navegador, sino también, por ejemplo, en los resultados de búsqueda de Yandex. Favicon, por regla general, no realiza ninguna otra función además de aumentar el conocimiento del sitio.

Crear un ícono para su propio recurso es bastante simple: busca una imagen adecuada o la dibuja usted mismo usando un editor de gráficos y luego comprime la imagen al tamaño deseado, generalmente 16x16 píxeles. Guarde el resultado resultante en el archivo favicon.ico y colóquelo en la carpeta raíz del sitio. Pero este procedimiento se puede simplificar significativamente utilizando uno de los generadores de Favicon disponibles en Internet.

La mayoría de los editores de iconos web ofrecen todas las herramientas necesarias para crear favicons. En este caso, no es necesario hacer un dibujo desde cero; puede utilizar una imagen ya preparada.

Método 1: Favicon.by

Generador de favicon online en ruso: sencillo y visual. Le permite dibujar un ícono usted mismo usando el lienzo incorporado de 16x16 y una lista mínima de herramientas, como un lápiz, un borrador, un cuentagotas y un relleno. Hay una paleta con todos los colores RGB y soporte de transparencia.

Si lo desea, puede cargar una imagen terminada en el generador, desde su computadora o un recurso web de terceros. La imagen importada también se colocará en el lienzo y estará disponible para editarla.

Como resultado, obtienes un archivo ICO gráfico llamado favicon y una resolución de 16x16 píxeles. Este ícono ya está listo para usarse como ícono para su sitio web.

Método 2: Editor de iconos X

Una aplicación de navegador HTML5 que le permite crear iconos detallados de hasta 64x64 píxeles de tamaño. A diferencia del servicio anterior, X-Icon Editor tiene más herramientas de dibujo y cada una de ellas se puede configurar de manera flexible.

Al igual que en Favicon.by, aquí puedes cargar una imagen terminada en el sitio y convertirla en un favicon, editándola adecuadamente si es necesario.

Si desea conservar los detalles de una imagen que desea convertir en un favicon, X-Icon Editor es ideal para ello. La capacidad de generar iconos con una resolución de 64x64 píxeles es la principal ventaja de este servicio.

Favicon (inglés: icono favorito) es un pequeño icono (imagen, imagen) en un formato especial que se muestra en la barra de direcciones del navegador al visualizar un sitio web, una pestaña del navegador o en sus marcadores ("Favoritos").

favicon es una decoración adicional para su sitio web, su mini logo. También se muestra al ver una lista de sitios en las búsquedas de Yandex y Google y hace que su sitio se destaque del resto.

¿Por qué necesitas un favicon para un sitio web?

favicon es una marca registrada de su sitio. Hoy en día, muchas empresas tienen un favicon distintivo que las diferencia de sus competidores. Para que los usuarios recuerden mejor el icono, las empresas deben mostrar su logotipo en él, que también debe ser uno de los elementos del encabezado del sitio. Otra característica positiva de usar un favicon es que cuando visualiza una gran cantidad de sitios en un navegador, no ve el título completo de la página, sino solo el ícono, y puede identificar inmediata y fácilmente la pestaña a la que desea ir.

¿Qué es mejor mostrar en un favicon?

El icono debe corresponder al tema del sitio.
marca, si su sitio web está asociado con esta marca. Al mismo tiempo, se pueden mostrar diferentes marcas para diferentes páginas;
Utilice un favicon en el que desee hacer clic; esto aumentará la tasa de clics al visualizar en las búsquedas de Yandex y Google;
Cree varios diseños de favicon para diferentes secciones de su sitio.
Haga varios diseños de favicon para diferentes eventos (por ejemplo, Año Nuevo, Día de San Valentín o Día de la Cosmonáutica, :).

Coloque el archivo resultante en la raíz de su sitio, donde se encuentra el archivo de índice principal (index.php). Para indicar al navegador la ubicación del favicon del sitio en la sección principal de la página, inserte la siguiente línea:

¿Cómo hacer un favicon animado?

El formato ICO no admite animación. Pero los navegadores modernos le permiten utilizar el formato GIF para las miniaturas. Es posible especificar un archivo animado (favicon.gif) para los navegadores modernos y otro (favicon.ico) para los antiguos, como Intertet Explorer. Para hacer esto, agregue las siguientes dos líneas a la sección del encabezado:

Naturalmente, primero debes colocar ambos archivos en la carpeta raíz del sitio.

¿Qué hacer si está prohibido mostrar imágenes en el navegador?

Si crea un favicon con una imagen incrustada en el código de la página:

Luego, el ícono se mostrará en el navegador incluso cuando las imágenes estén deshabilitadas. .

Cómo obtener un favicon de un sitio web

No todos los webmasters colocan favicon.ico en la raíz del sitio. Para obtener la dirección del favicon utilice el siguiente script:

]*)link([^>]*)(rel="icon"|rel="icono de acceso directo")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; si (strpos($favicon, "://")===false) $favicon = $url "/" ltrim($favicon, "/" )?>

Motores de búsqueda Google, Yandex y favicon.

Los robots de los motores de búsqueda almacenan en caché los iconos del sitio web. Los iconos almacenados en caché están disponibles para las siguientes solicitudes:

Además, Yandex puede crear un "sprite" a partir de iconos de diferentes sitios:

Iconos para iPhone y iPad

Incluso si no especifica un enlace a la imagen, el iPhone buscará un archivo llamado apple-touch-icon.png en la carpeta raíz del sitio y, si lo encuentra, tomará la imagen y la redondeará. en las esquinas y se le aplicará un resaltado automáticamente. Para evitar esto, en lugar de apple-touch-icon.png deberías escribir apple-touch-icon-precomposed.png propietarios de iPhone y iPad, porque Para ellos, hacemos un hermoso ícono de 57x57 (por cierto, puede ser más grande, pero este es el tamaño estándar del ícono en la pantalla del almuerzo), conectándolo así:

¿Cómo cambiar dinámicamente el favicon?

Si intenta cambiar el valor de una propiedad de etiqueta a través del DOM, no obtendrá el resultado deseado. Para cambiar dinámicamente el ícono de la página, primero debe eliminar la etiqueta de enlace con el ícono antiguo del título de la página y luego agregarla con el nuevo contenido. Esto se hace así: // Enlace al nuevo archivo de ícono var icon="new_favicon.ico"; var cabeza = document.getElementsByTagName("cabeza"); // Encuentra y elimina el icono antiguo de la etiqueta HEAD var links = head.getElementsByTagName("link"); para (var i = 0; i< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

HTML5 y favicon

El atributo de tamaños se agregó a HTML5, lo que le permite declarar varias versiones diferentes del mismo ícono, y pueden ser archivos PNG:

¿Cómo declarar un mosaico para tabletas en Windows 8?

El anuncio de Windows 8.0 se parece a esto:

Windows 8.1 e IE 11 esperan varias versiones de la imagen declarada en browserconfig.xml. Por ejemplo:

No es necesario declararlo si no se cambia el nombre del archivo:

#2b5797

Hoy tocaremos un tema muy interesante. Cuando trabaje en su sitio web, tarde o temprano necesitará crear un favicon. En términos simples, un favicon es un ícono de su sitio web que aparece en una pestaña del navegador. También puedes verlo en el área de acceso rápido de tu navegador si tu sitio ha sido agregado a Favoritos.

Favicons de los sitios más populares

Creo que no tiene sentido decir que el favicon debe ser de buena calidad, porque es, hasta cierto punto, la cara de tu sitio. En este artículo aprenderemos cómo crear favicons que satisfagan nuestras necesidades y también nos familiarizaremos con un servicio para convertirlos. Lea más a continuación.

Versión en vídeo:

¿Cómo debería ser un favicon?

Antes de comenzar a crear el favicon en sí, sería bueno detenerse en cómo debería ser idealmente. Entonces, el favicon ideal:

Es claro y comprensible
Hecho en buena calidad
Transmite el significado de su sitio
Tiene un estilo común con su sitio.
Se destaca de los íconos de otros sitios.

Los parámetros anteriores se pueden clasificar como un favicon ideal. Y necesitamos crear ese ícono para nuestro sitio. Sin embargo, existe un debate sobre qué se debe representar exactamente en el favicon. Creo que en este asunto debes partir del estilo general y el tema de tu sitio. Puede contener alguna imagen o texto. Si se coloca texto en el favicon, no debe constar de más de 2 letras. De lo contrario, nadie podrá leer dicho texto, porque las dimensiones del favicon son generalmente de 16*16 píxeles.

¿De qué tamaño son los íconos de sitios web?

Como sabes, en la actualidad existe una gran variedad de navegadores, monitores y dispositivos. Y sus requisitos en cuanto a los tamaños de favicon son diferentes. Hay las siguientes opciones de tamaño a considerar:

16*16px: tamaños de favicon estándar, adecuados para la mayoría de navegadores y dispositivos
32*32px - usado en algunos casos en explorador de Internet Y Safari
57*57px - usado cuando se muestra en iPhone
72*72px - usado cuando se muestra en iPad
114*114px: se utiliza cuando se muestra en pantallas retina (57*2=114)
144*144px: se utiliza cuando se muestra en pantallas retina iPad (72*2=144)

¿Qué formato deberían tener los favicons?

Anteriormente, los navegadores sólo aceptaban favicons en el formato "ico". Ahora han aprendido a comprender otros formatos, incluido "png". En nuestro caso mataremos 2 pájaros de un tiro. Primero crearemos un favicon en el formato "png" y luego convertirlo a "ico".

Varias formas de crear favicons

Hoy en día existen dos formas principales de crear favicons:

A través de servicios especiales en línea.
Créelo usted mismo utilizando programas especiales como Photoshop y Adobe Illustrator.

Cada método tiene sus propias características. La ventaja de crear un favicon a través de servicios en línea es que no es necesario tener ninguna habilidad especial para hacerlo. Simplemente carga la imagen requerida, la modifica y descarga el favicon terminado. O simplemente trabaja con texto y dibuja un icono utilizando las herramientas del servicio en línea. En general, la principal ventaja de este método es su sencillez. Sin embargo, la otra cara de la moneda es que la calidad de estos iconos de sitios web deja mucho que desear. No recibirá un favicon único por la sencilla razón de que la galería de iconos de servicios en línea no es ilimitada. Y cuando se utilizan sus propias imágenes y las herramientas del servicio, no es tan fácil crear un producto de alta calidad. En el caso de dibujar un icono manualmente utilizando las herramientas de un servicio online, el resultado es “algo inimaginable”.

Por tanto, elegimos la segunda solución, más compleja pero exitosa. Para crear un favicon usaremos el programa Photoshop. Si no tiene experiencia con este programa, está bien. Siguiendo mis instrucciones podrás completar fácilmente la tarea.

Creando un favicon

Como ya mencioné, un favicon se puede crear usando una imagen o simplemente letras. En nuestro caso, usaré algún tipo de imagen. Por ejemplo, imaginemos que tenemos un sitio web de automoción. Por lo tanto, necesitamos encontrar una imagen del área automática. Sugiero hacer que el ícono de nuestro sitio tenga la forma de una rueda.

Seleccionando una imagen

Puedes tomar imágenes desde cualquier lugar. Por ejemplo, a través del mismo Fotos de yandex. La condición principal es que la imagen sea sencilla, sin sombras ni volúmenes. Esto se debe a que al reducirlo a 16 píxeles no tendrá muchos detalles. Debido al exceso de volúmenes y sombras, la imagen puede volverse borrosa.

Encuentro una imagen adecuada usando la búsqueda Google bajo pedido "rueda". Todo lo que tengo que hacer es guardarlo haciendo clic derecho y seleccionando "Guardar imagen como".

Imagen relevante en google imágenes.

A continuación, abrimos esta imagen usando Photoshop. Es muy importante que el favicon tenga un fondo transparente. En nuestro caso este no es el caso. Para eliminar el fondo utilizamos la herramienta Varita mágica. La esencia de su trabajo es muy simple. Con esta herramienta podemos seleccionar áreas del mismo color en una imagen. Dado que el fondo de nuestra imagen contrasta claramente con la propia rueda, esto será muy fácil de hacer. Al hacer clic una vez seleccionamos un área de un solo color. Pulsando el atajo de teclado CTRL+Suprimir eliminamos esta zona.

Quitando el fondo de nuestra rueda

Hacemos esto con todas las partes del fondo de la imagen. Por lo tanto, en nuestra imagen la rueda está sobre un fondo transparente, que es lo que necesitábamos hacer. Entonces, la plantilla para el ícono de nuestro sitio web está lista.

Crea un favicon en 2 tamaños diferentes

Sugiero hacer 2 favicons con tamaños de 64px y 16px. Primero necesitamos crear un ícono más grande (64px). Para ello pulsamos el atajo de teclado CTRL+N. En la ventana que aparece, seleccionamos el alto y ancho de la imagen para que sea 64px.

Establecer las dimensiones del futuro favicon

A continuación, debemos mover nuestra rueda al área de la imagen recién creada. Para ello volvemos a la imagen con la rueda y seleccionamos la herramienta "Mover". El siguiente paso es hacer clic en la imagen de la rueda y, mientras mantienes presionado el botón izquierdo del mouse, moverla al área de la nueva imagen. Asegúrese de que la capa con la rueda esté seleccionada al moverse. De lo contrario, la transferencia fracasará.

Mover la rueda a una nueva imagen

Después de mover las ruedas a una nueva imagen, vemos que no encajan. Necesitamos reducir la rueda a 64 px. Para ello mantenemos pulsada la tecla CAMBIO y pulsando sobre el punto diagonal de la imagen la reducimos. Entonces creamos el primer favicon para nuestro sitio web. Déjame recordarte que nuestro tamaño es 64*64px. Ahora solo nos queda guardarlo seleccionando la función “Guardar para Web” en la pestaña “Archivo”. Elegimos el formato PNG-24 y carpeta imágenes. También llamamos al favicon en sí, solo en letras latinas: "favicón".

guardar el favicon

Excelente. Ahora todo lo que tenemos que hacer es crear un favicon más pequeño. Para ello hacemos clic en la pestaña “Imagen” y seleccionamos la función “Tamaño de imagen”. Aquí configuramos el ancho y el alto en 16px. Ahora lo único que nos queda es guardar esta imagen para la web. Podemos llamarlo "favicon-2".

Entonces, aquí estamos, creando 2 favicons para nuestro sitio web en el formato "png". Primero creamos una opción con un tamaño de 64px para luego reducirla fácilmente a 16px. Si primero crea una opción con 16 px, no podrá aumentarla a 64 px sin perder calidad. Por tanto, ten esto en cuenta para no hacer doble trabajo.

Instalar un favicon en el sitio

Para instalar un favicon en un sitio dentro de una etiqueta nosotros escribimos:

Si tenemos un favicon en el formato " ico" entonces nosotros en su lugar " png" escribir " ico". Por ejemplo:

Como puede ver, el icono del sitio se muestra como pretendíamos.

Convertir el ícono del sitio al formato "ico"

Los navegadores modernos pueden reconocer y mostrar fácilmente favicons en el formato "png". Sin embargo, es posible que necesites convertirlo a "ico". Una de las ventajas de este formato es almacenar favicons de todos los tamaños en un solo archivo. De acuerdo en que esto es muy conveniente. Entonces, para convertir nuestros íconos usaremos un servicio genial: xiconditor.com. Es muy fácil trabajar con él. Todo sucede en 4 pasos:
1. Primero, debemos cargar nuestros favicons. Para ello hacemos clic en el botón "Importar".

Subir favicons al servicio xiconditor.com

3. Si lo deseas, puedes hacer clic en el botón "Avance" y vea cómo se mostrarán. Para descargar nuestros favicons en el formato "ico" hacemos clic en el botón "Exportar".

Entonces, aquí estamos, aprendiendo cómo crear favicons en "png" y convertirlos al formato "ico". Específicamente no consideré el procesamiento detallado de imágenes en Photoshop, ya que para muchos sería innecesario. Si es necesario, por supuesto, puedes mejorar aún más la calidad del favicon trabajando con píxeles en Photoshop. Intenté presentar todo lo esencial de forma simplificada. Y eso es todo para mí. Espero que esta lección te haya sido útil. Si es verdad:

Vuelva a publicar este artículo en las redes sociales para que más personas puedan beneficiarse de él;
Suscríbete a mi newsletter para no perderte publicaciones de blog útiles e interesantes.

Aquí es donde no te digo adiós. ¡Gracias por su atención y nos vemos en las próximas publicaciones!