Hogar Cuentas Cómo hacer un favicon a partir de una miniatura. Una forma universal de crear favicons. Cómo crear un favicon usando el generador en línea Logotizer

Cómo hacer un favicon a partir de una miniatura. Una forma universal de crear favicons. Cómo crear un favicon usando el generador en línea Logotizer

favicon -(abreviatura de palabras "Icono favorito") es un tamaño de imagen pequeño 16x16 píxeles, que verá un visitante de su sitio. Aparece junto a la URL del sitio en la barra de direcciones del navegador. Además, este icono aparece junto al nombre de su sitio en la lista de pestañas abiertas, marcadores y resultados de búsqueda, lo que facilita a los usuarios encontrar rápidamente su sitio entre otros sitios.

Predeterminado como iconos sitio se muestra un icono del navegador. Para que el sitio sea diferente del resto y no perderse en las innumerables pestañas grises que abre el usuario, es necesario crear su propio favicon original.

Aunque muchos navegadores web modernos admiten favicons en GIF, PNG u otros formatos de archivo populares, todas las versiones Explorador de Internet todavía requiere iconos como archivos ICO(Formato Microsoft). En este formato, cualquier navegador entenderá su icono.

¿Por qué necesitas un favicon?

Se necesita un favicon para que su sitio se destaque entre la multitud en la página de resultados. resultados de búsqueda y fue notable en muchos pestañas abiertas en el navegador. Un buen ícono es como el logo de su sitio, que será reconocible y crea una cierta actitud y evoca un nivel especial de confianza.

Naturalmente, un favicon puede atraer la atención del usuario y éste leerá el enlace del título de su artículo. El título, en combinación con un buen fragmento y un hermoso ícono, aumentará la tasa de clics y, en consecuencia, el tráfico al recurso.

Me gustaría señalar de inmediato que para los sitios que tienen la etiqueta "GS", el ícono en sí no es capaz de mejorar la impresión del recurso. Pero es como una reunión por la ropa. Un maravilloso favicon definitivamente creará la primera impresión del sitio, invitándolo a visitarlo.

Cómo crear un favicon

Por supuesto, puede intentar encontrar un archivo favicon.ico ya preparado en el sitio web www.iconfinder.com, pero creo que a muchos les gustaría crear algo propio. Después de todo, es el favicon el que resaltará su sitio en los resultados de búsqueda. Ahora sabes cómo hacer esto. Así que comencemos.

Logaster es un servicio online para la creación de logotipos y elementos de identidad corporativa. En él recibirás automáticamente, con sólo unos pocos clics, un icono del sitio en formato ICO y PNG.

Pero tenga en cuenta que ningún generador automático de logotipos puede reemplazar la creatividad humana.

Por supuesto, las grandes empresas no utilizarán este tipo de herramientas. Encontrarán un diseñador costoso que les creará un logotipo profesional. Pero para las pequeñas empresas y los empresarios privados, una herramienta de este tipo puede resultar útil.

¿Cómo funciona el proceso de creación de un ícono en Logaster?

Para garantizar que su favicon coincida con su logotipo, primero se le pedirá que cree un logotipo (es gratis).
Escriba un nombre y, si lo desea, un eslogan, indique el tipo de actividad y Logaster preparará de forma independiente muchas opciones de logotipos para usted.
Elija un logotipo adecuado, podrá cambiarlo más tarde.

esto es lo que tengo

Ahora puedes hacer clic en el botón “Descargar logo”. EN versión gratuita tendrá la marca de agua de Logaster.com

El logotipo se puede comprar. Después de eso, podrá descargar en el formato seleccionado (PNG, JPEG, PDF, SVG) y tamaño (1024 px, 5000 px).

Ahora pasemos a crear un favicon.

Nuevamente, elige la opción que más te guste.
Puede cambiar la forma para que sea cuadrada, redondeada, redonda o sin forma alguna.
Si lo desea, agregue un trazo de color haciendo clic en la herramienta Trazo.
Haga clic en el botón "Guardar".

Así quedó el favicon. En principio tiene buena pinta.

Cómo agregar un favicon a tu sitio web

Compra y activa el favicon.
Descárgalo.
Descomprima el archivo descargado en la carpeta raíz de su sitio.
Pegue el siguiente código en todas las páginas del sitio en la etiqueta :

Paquete de diseño con descuento.

Además, podrás adquirir el set de identidad corporativa completo. Aquí tienes una opción.

Artículo relacionado: Cómo conectar Yandex.Speller a WordPress

Complemento para crear favicons

existe gran cantidad diferentes programas para crear favicons. Básicamente, son primitivos y te permiten crear iconos usando 16 colores.

Puedes crear un favicon directamente en Photoshop. Para hacer esto necesitará un complemento que se puede descargar desde www.telegraphics.com.au. Para instalarlo, copie el archivo. Formato ICO.8bi al directorio c:Archivos de programaAdobeAdobe Photoshop CS2Plug-InsFile Formats.

Usando un complemento Formato ICO.8bi, puede guardar imágenes como “archivos .ico”.

Cómo instalar el complemento de formato ICO (icono de Windows)

Windows de 64 bits (Vista/Windows 7):
- Reinicie antes de instalar;
- Coloque el complemento en la carpeta C: Archivos de programa Adobe PhotoshopPlug-InsFile Formats, pero tengo una estructura diferente, guardo este archivo aquí: C: Archivos de programa Adobe Adobe Photoshop CS6 (64 bits) Complementos.
- Si está ejecutando un sistema Windows de 64 bits y está iniciando la versión de 64 bits de Photoshop CS4 o CS5, descargue la versión de 64 bits del complemento y colóquelo en la carpeta de complementos correspondiente a Photoshop de 64 bits (es decir, la que está en "Archivos de programa", no en "Archivos de programa (x86)").
Mueva el complemento a la carpeta "Formatos de archivo" dentro de su carpeta de complementos de Photoshop:
- Para Windows (32 bits), Formato ICO.8bi
- Para Windows (64 bits), Formato ICO64.8bi
- Para MacOS X, ICOFormat.plugin(tenga en cuenta que se proporcionan versiones independientes para CS2, CS3/4 y CS5)
- Para Mac OS X/clásico, icoformato
- Para MacOS de 68K, formato ico(68K)
Si utiliza Corel PSP Photo X2, coloque el complemento en C:Archivos de programaCorelCorel Paint Shop Pro Photo X2IdiomasESPlugIns
Salga y reinicie Photoshop, si ya se está ejecutando.

También existe un servicio online www.convertico.com. ConvertICO es convertidor en línea gratuito Archivos ICO/PNG. Funciona rápidamente y es fácil de usar. Se utiliza para convertir íconos de escritorio, íconos de aplicaciones y favicons para sitios web.

Cómo crear favicon.ico tú mismo

Abre Photoshop.
Crea un documento de 32x32 píxeles.
Inserte un objeto inteligente de la imagen terminada desde Illustrator.
Usando el comando "Guardar como", guarde el favicon en formato .ICO *.
Cargue el favicon resultante en la raíz del sitio y conéctelo a través de un tema de WordPress, o regístrelo manualmente en la plantilla del sitio. Ya escribí anteriormente sobre cómo conectar un favicon.

*Si no tienes un complemento especial instalado Formato ICO (icono de Windows), puede descargarlo desde www.telegraphics.com.au/sw/. Hay para Mac, Windows 32, 64 bits con soporte para todos Versiones de Photoshop, incluido CS6.

visualización de favicon

a tu sitio muestra un favicon, simplemente se puede colocar en la raíz del sitio. El navegador y los propios motores de búsqueda determinarán que tienes un archivo favicon.ico y lo mostrarán automáticamente. este método Es el más sencillo y funciona en el 95% de los casos. Pero también puedes conectar explícitamente el favicon.

Esta lección cubrirá la creación de un Favicon, aprenderá por qué es necesario este ícono y recibirá recomendaciones para mejorar su apariencia y atractivo.

Además, veremos el proceso de creación y adición de un Favicon para un sitio.

favicon- este es un pequeño ícono que puedes ver en la barra de direcciones del navegador y en las pestañas abrir paginas, y también al agregar un sitio a los favoritos de su navegador, este ícono también se agrega allí.

Además, el motor de búsqueda Yandex muestra un icono de Favicon en los resultados de búsqueda junto a su sitio. Su tarea es hacer que este ícono se destaque, sea recordado, llame la atención sobre el fondo de otros íconos en los resultados de búsqueda y también tenga algunas asociaciones con su sitio. Un Favicon bellamente diseñado y llamativo puede aumentar significativamente el número de visitas a tu sitio en comparación con aquellos que no lo tienen instalado o tienen una apariencia poco atractiva.

Aquí hay algunas pautas a considerar al crear un Favicon.

#1.

El ícono debe ser fácilmente reconocible y tener asociaciones con su sitio o el nicho al que pertenece su sitio. Como icono, puede utilizar un logotipo o símbolo que evoque una asociación con su sitio. Además, puede utilizar la combinación de colores en la que se creó su sitio web o logotipo. #2. No utilice iconos estándar. Mucha gente, tras crear una web en uno u otro CMS, deja el icono sin cambiar nada. Como resultado, en la emisión

motor de búsqueda

Puede que haya más de un sitio con ese icono, pero son muchos. Esto no hará que su sitio se destaque, así que use solo Favicons únicos creados específicamente para su sitio. Esto también incluye la situación en la que se utilizan iconos de varias colecciones o elementos de la interfaz de otros sitios. Recuerda, para destacar necesitas un Favicon único.

#3. Al crear un ícono, intente usar colores más brillantes y claros, como regla general, atraen más la atención.#4.

No utilices iconos animados. En primer lugar, no todos los navegadores admiten la animación y, en segundo lugar, la atención del visitante debe centrarse en el contenido y no en el icono.

Ahora veamos directamente el proceso de creación de un Favicon. Hay muchos servicios para esto. Sin embargo, son más adecuados para aquellos que ya tienen un ícono listo para usar, que arrancaron en algún lugar o tomaron de alguna colección. Pero como dije anteriormente, el ícono debe ser único, así que aquí veremos el proceso de creación usando programas de photoshop, usando el sitio como ejemplo.

#2.

En mi caso no tengo ningún logo para el sitio, por lo que decidí usar el símbolo “W” con el que comienza la dirección del sitio, así como los colores que predominan en la parte superior del sitio: azul y amarillo. Entonces configuré el color en #6A91D0 y usé la herramienta Cubo (G) para darle al documento creado previamente un color azul.

#3. Después de eso, seleccioné la herramienta Texto (T), agregué un carácter "W" y le di el siguiente valor de color #FAC31D. Para que el símbolo se destaque más sobre el fondo azul, le agregué un trazo negro de 2px. Para hacer esto, debe ir al elemento del menú.

"Capa" >> "Estilo de capa" >> "Trazo" , seleccione el color y tamaño del trazo. Después de esto necesitas fusionar las capas, para hacer esto debes ir al elemento del menú

"Capa" >> "Fusionar visible" o presione la combinación de teclas Shift + Ctrl + E. Para suavizar las líneas sin serifas, agregué un desenfoque. Para hacer esto, debe ir al elemento del menú.

"Filtro" >> "Desenfoque" >> "Desenfoque gaussiano..."

y establezca el radio en 0,3 píxeles. Coloque su símbolo o imagen de manera que ocupe el máximo espacio, porque si es pequeño, con un tamaño de icono de 16*16 no se notará.#4.

Ahora necesitas cambiar el tamaño del icono. Para hacer esto necesitas ir al menú.

"Imagen" >> "Tamaño de imagen"

y establezca el tamaño en 16*16px. #5. Todo lo que queda es guardar el icono. El ícono de Favicon debe tener el nombre favicon y la extensión .ico. El caso es que, de forma predeterminada, Photoshop no guarda imágenes en formato .ico. Por lo tanto, guárdelo en formato .png, para ello vaya al elemento del menú "Archivo" >> "Guardar como..." y seleccione PNG de la lista desplegable.

Convertir una imagen al formato .ICO

Después de eso, lo convertimos al formato .ico usando el archivo . Ir a este servicio

Pero estas líneas deben agregarse a cada página si tiene un sitio HTML. Pero dado que lo más probable es que su sitio esté creado sobre la base de algún tipo de CMS, entonces solo necesitará agregar estas líneas al archivo principal de su tema que utiliza para el sitio.

Si está utilizando WordPress, vaya a la carpeta wp-content/themes/folder-with-your-theme/, busque y abra el archivo header.php, luego pegue las líneas necesarias y guarde el archivo.

Si está utilizando Joomla, vaya a plantillas/carpeta-de-su-tema/ y abra el archivo index.php, pegue las líneas necesarias y guarde.

Es posible que algunos temas de WordPress y Joomla ya tengan sus propias rutas al archivo favicon.ico, en cuyo caso elimínelas y reemplácelas por las suyas.

Si utiliza cualquier otro CMS, haga todo por analogía.

En las pestañas de la página y en la barra de direcciones del navegador, su ícono se mostrará inmediatamente, en cuanto a los resultados de búsqueda de Yandex, aquí necesita que pase tiempo y un robot de búsqueda especial de Yandex para encontrar su ícono, después de lo cual aparecerá en los resultados de la búsqueda.

Material elaborado por el proyecto:

Hola, queridos lectores del blog. La conversación en el artículo de hoy será sobre los llamados íconos 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. 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 favicon creadas por otros usuarios y publicadas en acceso general. 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- Una vez, este servicio era 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 necesitas pagina de inicio En la parte superior, haga clic en el botón "Seleccionar archivo" y especifique 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 mini logotipo 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. Lo ideal sería que un usuario pudiera 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 varias opciones 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 desde el caché versión antigua. 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 en la página. clic derecho ratón y seleccione el elemento apropiado menú contextual(Por ejemplo, " código fuente" en Opera antiguo, o "Código fuente de página" en Mazila Firefox, o "Ver código de página" en Google Chrome, o “Ver código HTML” en IE) o presione la combinación de teclas 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 este camino, puedes conectarte nuevamente usando protocolo FTP y cargue su favicon en la ruta especificada, reemplazando el 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 debe 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 apertura. etiqueta HTML CABEZA. 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 mini logotipo.

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 uno 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.

Dónde descargar la versión terminada

Nada de eso mejor elección, pero alguien lo está usando. Puedes descargar un favicon ya preparado de Internet y no preocuparte demasiado por crear el tuyo propio. Todos ellos se presentan en formatos cómodos y en los tamaños adecuados.

Simplemente ingrese la consulta deseada en el motor de búsqueda, algo así como "Descargar un favicon ya preparado", después de lo cual se le presentará una gran cantidad de variaciones diferentes.

Descargamos la imagen a nuestra PC y luego la instalamos en el sitio web. Es sencillo. Están disponibles de forma totalmente gratuita, nadie te regañará. Aunque si hablamos de una empresa, aunque sea pequeña, si se descubre el logotipo de otra persona, pueden surgir incidentes desagradables.

Puede buscar opciones listas para usar en varios sitios web. Como regla general, existen colecciones completas de diversos logotipos temáticos que pueden atraer a algunos webmasters.

Pero repetiré una vez más que sería mejor crear un favicon usted mismo.

Creando un favicon

Servicios en línea

Puedes dibujar un favicon en los servicios en línea. Solo necesita ingresar la consulta correspondiente en el motor de búsqueda, después de lo cual se le presentará una lista completa de sitios que pueden ayudarlo a realizar sus planes.

Este curso examinará las características más importantes de la creación competente. proyectos de información, interacción con el equipo y otros aspectos útiles que definitivamente necesitarás al hacer crecer tu negocio.

Favicon, el término se traduce literalmente como "icono favorito", se considera uno de los elementos más complejos del diseño web moderno. Se trata de una pequeña imagen que se encuentra en la pestaña del navegador, en la barra de búsqueda y en otros lugares, y juega un papel importante en la personalización del sitio web.

Debido a su formato no estándar y su pequeño tamaño, crear un favicon puede resultar un desafío, tanto desde el punto de vista técnico como de diseño.
Una tarea igualmente difícil es garantizar la compatibilidad de favicon con diferentes navegadores.

En este artículo aprenderá cómo crear un favicon: le daremos consejos de diseño y le informaremos sobre los servicios para crear un favicon y cómo agregar un favicon al sitio.

¿Qué es un favicon y por qué es necesario?

A pesar de que un favicon es un objeto gráfico muy pequeño, es extremadamente importante en el diseño de sitios web y en general.

Haga clic para ampliar la imagen.

En primer lugar, favicon hace que su sitio web sea más personalizado y consistente estilo uniforme con otros elementos graficos, como un logotipo.

En segundo lugar , un favicon distingue su sitio de otros recursos web en la lista de resultados de búsqueda. Un sitio sin este miniícono se verá aburrido y perderá frente a sus competidores. En una palabra, un favicon es simplemente algo "imprescindible" para los sitios web.

En tercer lugar , un favicon permite al usuario encontrar rápidamente su sitio en el directorio de favoritos u otros iconos del escritorio.

Creando un diseño de favicon

El favicon debe reflejar la esencia y la marca en un pequeño cartel del tamaño de una carita sonriente. Buena decisión Será una versión simplificada del logotipo de la empresa, pero tenga en cuenta: un logotipo completo con texto y marcas comerciales no es adecuado para este propósito.

Estos sitios web utilizan un gráfico de su marca (o al menos algo similar).

No uses texto

Debes evitar el uso de texto, ya que debido al pequeño tamaño del favicon, las inscripciones serán ilegibles. Coloque 1, máximo 2 letras en el ícono, por ejemplo, las primeras del nombre de su empresa o recurso web; en este caso todavía se pueden distinguir.

Pixelación de favicon

Los favicons son tan pequeños que cada píxel importa. A menudo, cuando reduce el tamaño de un logotipo de tamaño completo, la imagen aparece borrosa.

Este es un fragmento del logotipo de Facebook en tamaño completo después de que se redujo a un tamaño de 32x32. Es fácil notar que la imagen "flota" alrededor de los bordes. Para evitar tal defecto, la edición debe realizarse a nivel de píxel.
Cuando trabajo con iconos, prefiero utilizar programas de edición de imágenes rasterizadas (como Photoshop o Pixelmator). Primero, reduzco la escala del logotipo a tamaño completo a 64x64 píxeles porque ese es el favicon más grande que necesitaré. El trabajo es muy minucioso, puede llevar una hora entera, o incluso dos, pero el resultado es sencillamente excelente.
Si no tiene el tiempo y las habilidades para este tipo de operaciones, es mejor utilizar servicios en línea, como Logotizador.ru

Tamaño del favicon

Habiendo recibido un ícono de 64x64, creo íconos de 32x32, 24x24 y 16x16 píxeles de la misma manera. Cada uno de ellos tiene su propio propósito:

– 64×64 – “Lista de lectura” en Safari y Windows
– 24×24 – Sitios anclados en IE9.
– 32×32 – Para pantallas de alta resolución.
– 16x16 – Normalmente se utiliza en navegadores como IE, Safari, Chrome, etc.

Pero la creación de favicons más pequeños no termina ahí: a menudo se requiere edición adicional a nivel de píxel. También puedes agregar un canal alfa si lo crees conveniente. Si antes esto causaba dificultades, ahora casi todos los navegadores admiten la transparencia en los favicons.

Formatos de favicon

Anteriormente, cuando solo se admitían archivos formato de Windows ICO, podríamos ahorrar tiempo guardando el favicon de 16x16 como GIF y dándole la extensión .ico. ¡Esta técnica funcionó perfectamente! Pero ahora este método no es necesario ya que las herramientas para crear archivos ICO se pueden encontrar fácilmente en Internet. Además, ahora se utilizan para favicons, pero los más comunes siguen siendo sólo los dos siguientes.

ICO

La palma pertenece al formato ICO. A diferencia de los archivos PNG, los archivos ICO pueden tener diferentes resoluciones y profundidades de bits (lo cual es excelente para Windows). Internet Explorer utiliza favicons de varios tamaños (por ejemplo, iconos de 32 píxeles para el favicon Tareas de Windows 7), por lo que en este caso el formato ICO es la única opción.

Los archivos PNG son muy convenientes porque no necesitas herramientas especiales para crearlos. Este formato admite un canal alfa y le permite crear archivos muy pequeños. Quizás el único inconveniente del formato PNG es que no es compatible con navegador de internet Explorador.

Hay otras opciones:

– Los formatos GIF y GIF animado no tienen más ventajas que la compatibilidad con navegadores muy antiguos.
– formato JPG No se recomienda su uso, incluso si la imagen se presenta en forma de fotografía. Este formato carece de la nitidez de PNG y su única ventaja son las transiciones más suaves entre colores, un matiz que es completamente imperceptible en una imagen muy pequeña.
– SVG podría ser una gran opción si más navegadores admitieran favicons en este formato. Por ahora sólo hay compatibilidad con Opera.
– También existe el llamado “subformato” de PNG: APNG (PNG animado), que es compatible con Firefox y Opera. Sin embargo, la viabilidad de su uso sigue siendo cuestionable. Un favicon animado puede distraer e incluso molestar al usuario.

Crear un favicon en línea: herramientas y servicios en línea

Hemos seleccionado para usted los servicios más útiles que le ayudarán a crear un favicon en línea.

Logotizador

Logotizer es nuevo, simple y servicio conveniente para crear un favicon y un logotipo para su sitio web.
Con este creador online puedes crear un favicon desde cero. El servicio está dirigido a principiantes, así que desarrolle buen diseño no será difícil.

Cómo crear un favicon usando el generador en línea Logotizer

La zona de trabajo principal está a la izquierda. A la derecha puede ver cómo se verá el favicon en diferentes medios: una pestaña del navegador, la barra de tareas de una computadora o la pantalla de un teléfono inteligente. Muy conveniente y claro.

Primero, debes elegir una forma para el favicon. Hay muchos, más de 50. Le recomendamos que elija formas simples y sencillas para que el favicon sea fácil de percibir y recordar.

En esta etapa, también determina el color del formulario, que servirá como fondo del favicon, y selecciona un marco. Fíjate qué color domina tu logo (si tienes uno) y qué colores son los principales en tu sitio web. Es dentro de este rango que recomendamos crear un diseño de favicon.

Debajo del bloque "Forma" hay una colección de formas (símbolos). No hay muchos, es una pena que no puedas cargar tus propias opciones; pero la elección sigue siendo bastante interesante.

¡Cambia el color, tamaño y ubicación de las figuras! En una palabra, experimente, afortunadamente, el servicio le permite hacerlo.

Una vez seleccionada la forma, puede agregar su texto. Como escribí antes, es mejor usar 1 o 2 letras, no más.

Hay una amplia selección de fuentes. Esto es definitivamente una ventaja. Al igual que con las formas, puedes cambiar el color, el tamaño y la ubicación del texto.

Si decide que alguna capa de favicon le molesta temporalmente o no es necesaria en absoluto, simplemente puede ocultarla.

Después de crear un favicon, el servicio le ofrecerá guardarlo. Registre una cuenta (en 2017 no hay forma sin registrarse) y luego podrá descargar archivos por un pequeño pago: 199 rublos.

El sitio también contiene pequeñas instrucciones sobre cómo agregar un favicon al sitio, por lo que no debería tener ningún problema para agregar un favicon al sitio. También se proporcionan recomendaciones similares a continuación en este artículo.

Después del pago, el usuario recibe inmediatamente 10 favicons de diferentes tamaños para todos los dispositivos necesarios hoy (ícono táctil de Apple, íconos de aplicaciones de Microsoft y otros).

El archivo favicon.ico en sí tiene varios tamaños y contiene íconos de 4 tamaños en 1 archivo (16px, 24px, 32px, 64px). En consecuencia, si agrega un sitio a los favoritos de su navegador o abre su historial, podrá ver íconos de diferentes tamaños, pero se mostrarán claramente y sin desenfoque.

En general el servicio es bueno. Sencillo, cómodo, nada superfluo.

RealFaviconGenerator.net

es un generador de favicons más simple que te permite crear favicons para cualquier plataforma. Además, puedes probar el favicon en el recurso. Ingrese la URL de su sitio y verá cómo se ve su favicon en cada navegador y en cada Sistema operativo. Real Favicon Generator también le dirá cómo solucionar los defectos y mejorar aún más su favicon.

Favicon.por

Favicon.por es otro generador de favicon gratuito y fácil de usar que convierte archivos PNG, JPG y GIF al formato .ico. Sube una imagen desde tu computadora, selecciona un tamaño (16x16px o 32x32px) y haz clic en el botón "Crear". Para guardar el favicon resultante en su sitio web, siga las instrucciones.

El servicio también permite dibujar un logotipo píxel a píxel, pero, para ser honesto, no todo el mundo puede hacerlo. Por ejemplo, yo no pude. Así de corrupto soy :)

Cómo agregar un favicon a un sitio web

Puede agregar un favicon a su sitio realizando algunos cambios en el código HTML de la página del sitio.

Paso 1: cargue el archivo “favicon.ico” a su servidor de alojamiento.

Para hacer esto, vaya a su servidor FTP usando este enlace:
ftp:// [correo electrónico protegido]
Ingrese su nombre de usuario y contraseña. Estos se pueden obtener desde el panel de administración de su empresa de hosting.
Cargue archivos favicon en el directorio raíz. El directorio raíz suele denominarse “public_html” o “www”.

Paso 2: agregue un favicon al HTML.

Manteniendo abierta la ventana del servidor FTP, descargue el archivo “index.html” o “header.php”.
Entonces necesitas descargar el código. El código que descargue depende de su sitio web.
Si su sitio es HTML, busque el área HEAD en el archivo index.html y pegue el siguiente código:

Si su sitio está en WordPress, busque el área HEAD en el archivo header.php y pegue el siguiente código:

/favicon.ico” />

Usando estos códigos, los navegadores podrán encontrar sus favicons.
Entonces, ¡has instalado tu favicon!

Cómo agregar un Favicon en WordPress y otras plataformas

Si su recurso se basa en WordPress u otro CMS, agregar un favicon al sitio es muy simple. En general, el algoritmo para agregar un favicon para diferentes plataformas será el mismo.
1. Debes ir a la consola del sitio.
2. Busque la sección "Diseño" o "Apariencia".

3. Vaya a la sección "Configuración del tema" y busque "Favicon" allí.

4. Sube el favicon desde tu computadora.

5. Guarde y actualice la página.

Cómo crear favicons más complejos

Este artículo analiza formas sencillas y rápidas de crear favicons que sean compatibles con casi cualquier navegador y sistema operativo. Pero cuando se trata de diseño y desarrollo web, el cielo es el límite. Si quieres aprender a hacer favicons más complejos, íconos táctiles para las pantallas de inicio de iOS, íconos para la interfaz Metro en Windows, íconos para Google TV y mucho más, te recomiendo que consultes estos materiales: hoja de trucos de favicon. Contiene información completa sobre el tema y proporciona buenas fuentes. Esta es una gran opción para aquellos diseñadores y desarrolladores (incluido yo mismo) que buscan constantemente ampliar sus conocimientos.

Con Favico.js puedes crear favicons dinámicos con números.

Es posible que también necesites un favicon dinámico, que tiene un ícono con un número cambiante. Para crear dichos favicons, recomiendo utilizar el servicio. favico.js, disponible en Github. Los favicons dinámicos aún no son compatibles con todos los navegadores. Pero para aquellos navegadores que los admitan, estos íconos pueden ser una adición interesante y útil.

Si desea agregar otro consejo a este artículo o tiene alguna pregunta, ¡deje un comentario a continuación!

Cómo crear un favicon para un sitio web: consejos y servicios actualizado: 7 de febrero de 2018 por: administración

Configuración y optimización de sistemas operativos.