EntradaCasa favicon. Una forma versátil de crear favicons
En esta lección, se considera la creación de un Favicon, descubrirás para qué sirve este ícono y recibirás recomendaciones sobre cómo mejorar su apariencia y atractivo.
Además, veremos el proceso de creación y adición de un favicon para el sitio.
Favicon es un pequeño icono que puedes ver en Barra de dirección navegador y en las pestañas de las páginas abiertas, así como al agregar un sitio a los marcadores del navegador, este icono también se agrega allí.
Además, el motor de búsqueda de Yandex muestra el ícono 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 ícono de Favicon bellamente diseñado y llamativo puede aumentar significativamente la cantidad de visitas a su sitio en comparación con aquellas que no lo tienen instalado o no parecen atractivas.
Aquí hay algunas pautas que debe tener en cuenta al crear un Favicon.
#uno. La insignia 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 asociado con su sitio. Además, puede utilizar la combinación de colores en la que se creó su sitio o logotipo.
# 2. No utilice iconos estándar. Muchos, después de crear un sitio en un CMS en particular, dejan el ícono, nada, sin cambiar. Como resultado, en el problema buscador puede haber más de un sitio con un icono de este tipo, pero muchos. Esto no hará que su sitio se destaque, así que use solo íconos de Favicon ú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 interfaz de otros sitios. Recuerda, necesitas un favicon único para destacar.
# 3. Intente usar colores más brillantes y claros al crear su ícono, como regla, atraen más la atención.
#cuatro. No uses íconos animados. En primer lugar, la animación no es compatible con todos los navegadores 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 robaron en alguna parte o tomaron de alguna colección. Pero como dije anteriormente, el ícono debe ser único, por lo que aquí consideraré el proceso de creación usando Programas de Photoshop, en el ejemplo del sitio web.
Crear un ajuste preestablecido de favicon en Photoshop
#uno. Crear nuevo documento en Photoshop, tamaño 64 * 64px, para esto vaya al menú "Archivo" >> "Nuevo ..." o presione el atajo de teclado Ctrl + N. En general, el icono en sí debería ser de 16 * 16 px, pero es mejor crearlo primero del mismo tamaño y luego reducirlo al tamaño requerido.
# 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 prevalecen en la parte superior del sitio son el azul y el amarillo. Así que configuré el valor del color en # 6A91D0 y usando la Herramienta de relleno (G) configuré el documento creado previamente en azul.
# 3. Después de eso, seleccioné la Herramienta de texto (T) y agregué una 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, vaya al elemento del menú Capa >> Estilo de capa >> Trazo, elija un color y tamaño para el trazo.
Después de eso, debe fusionar las capas, para esto debe ir al elemento del menú Capa >> Fusionar visible o presione la combinación Teclas de cambio+ Ctrl + E.
Para suavizar las líneas sans serif, agregué un desenfoque. Para hacer esto, vaya al elemento del menú "Filtro" >> "Desenfocar" >> "Desenfoque gaussiano ..." y establezca el radio en 0,3 píxeles.
Coloque su símbolo o imagen de manera que ocupe el mayor espacio posible, porque si es pequeño, entonces no se notará con un tamaño de icono de 16 * 16.
#cuatro. Ahora necesitas cambiar el tamaño del icono. Para hacer esto, vaya al menú Imagen >> Tamaño de imagen y establezca el tamaño en 16 * 16px.
#cinco. Queda por guardar el icono. El favicon debe tener el nombre favicon y la extensión .ico. El hecho es que, por defecto, Photoshop no guarda imágenes en formato .ico. Por lo tanto, guárdelo en formato .png, para ello vaya al elemento de menú "Archivo" >> "Guardar como ..." y seleccione PNG de la lista desplegable.
Conversión de una imagen a formato .ICO
Después de eso, lo convertimos al formato .ico usando el servicio. Ir este servicio y con el botón "Examinar", seleccione el archivo guardado anteriormente en Formato PNG luego haga clic en el botón "Crear favicon.ico".
Después de eso, el enlace "Descargar favicon.ico!" Aparecerá en la página cargada. haciendo clic en el cual puede guardar el ícono de Favicon terminado en su computadora.
Ahora es el momento de agregar el Favicon a su sitio para que aparezca en todas sus páginas. Para hacer esto, coloque el icono en carpeta raíz Tú sitio. Si su sitio ya está alojado, esta carpeta se suele llamar "public_html". Luego, en cada página de su sitio, antes de la etiqueta de cierre agregue las siguientes líneas:
Pero estas líneas deben agregarse a cada página si tiene un sitio HTML. Pero dado que, muy probablemente, su sitio fue creado sobre la base de algún CMS, entonces será suficiente que agregue estas líneas a archivo principal su tema que está utilizando para el sitio.
Si está utilizando WordPress, vaya a la carpeta wp-content / themes / folder-with-your-theme / find y abra el archivo header.php, luego pegue las líneas necesarias y guarde el archivo.
Si está utilizando Joomla, vaya a templates / folder-with-your-theme / y abra el archivo index.php, inserte las líneas necesarias y guarde.
Es posible que algunos temas en WordPress y Joomla ya tengan sus propias rutas al archivo favicon.ico, en este caso elimínelos y reemplácelos con los suyos.
Si usa 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 icono se mostrará de inmediato, en cuanto a los resultados de búsqueda de Yandex, aquí se necesita tiempo para que un robot de búsqueda especial de Yandex encuentre su icono, después de lo cual aparecerá en la búsqueda resultados.
Material elaborado por el proyecto:
Favicon (Eng. Favorite Icon) es un pequeño icono (imagen, imagen) en un formato especial, que se muestra en la barra de direcciones del navegador cuando se navega por el sitio, la pestaña del navegador o en sus marcadores ("Favoritos").
favicon es una decoración adicional para su sitio, su mini logo. También se muestra al navegar por la lista de sitios en la búsqueda de Yandex, Google y hace que su sitio se destaque del resto.
¿Por qué necesito un favicon para un sitio web?
favicon es la marca registrada de su sitio. Hoy en día, muchas empresas tienen un icono de favicon distintivo que las distingue de la competencia. Para que el icono sea recordado mejor por los usuarios, las empresas deben mostrar su logo en él, que también debe ser uno de los elementos del encabezado del sitio. Otra característica positiva del uso de favicon es que cuando visualiza una gran cantidad de sitios en un navegador, no ve el título completo de la página, solo ve el ícono, y puede identificar fácilmente de inmediato la pestaña a la que desea ir.
¿Qué es mejor retratar en un favicon?
- El icono debe corresponder al tema del sitio.
- marca, si su sitio está asociado con esta marca. En este caso, para diferentes páginas, puede mostrar diferentes marcas;
- Use un favicon en el que desee hacer clic, esto aumentará la tasa de clics al navegar en Yandex, búsqueda de Google;
- Crea varios diseños de favicon para diferentes secciones de tu 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, :).
¿Cómo hacer un favicon animado?
El formato ICO no admite animación. Pero los navegadores modernos te permiten usar Formato GIF para miniaturas. Es posible especificar para los navegadores modernos un archivo animado (favicon.gif) y para los antiguos, como Intertet Explorer, otro (favicon.ico). Para hacer esto, agregue las siguientes dos líneas a la sección del encabezado:
Naturalmente, primero debe colocar ambos archivos en la carpeta raíz del sitio.
¿Qué pasa si la visualización de imágenes en el navegador está prohibida?
Si hacemos un favicon con una imagen incrustada en el código de la página:
Luego, el icono se mostrará en el navegador incluso cuando las imágenes estén desactivadas. ...
Cómo obtener un favicon del sitio
No todos los webmasters tienen favicon.ico en la raíz del sitio. Utilice el siguiente script para obtener la dirección de favicon:
] *) enlace ([^>] *) (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) ; if (strpos ($ favicon, ": //") === falso) $ 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. Los iconos almacenados en caché están disponibles para las siguientes solicitudes:
Además, Yandex puede convertirlo en un "objeto" de los íconos de diferentes sitios:
Iconos para iPhone y iPad
Incluso si no especifica el vínculo-vínculo a la imagen, el iPhone seguirá buscando un archivo llamado apple-touch-icon.png en la carpeta raíz del sitio, y si lo encuentra, tomará una foto de redondearlo en las esquinas y superponer automáticamente un dispositivo de deslumbramiento. Para evitar esto, en lugar de apple-touch-icon.png, debe escribir apple-touch-icon-precomposed.png propietarios de iPhones y tokens, tk. 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 del enlace con el ícono anterior del título de la página y luego agregarlo con el nuevo contenido. Se hace así: // Enlace al archivo del nuevo icono var icon = "new_favicon.ico"; var head = document.getElementsByTagName ("encabezado"); // Busque y elimine 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
En HTML5, se agregó el atributo de tamaños para permitirle declarar varias versiones diferentes del mismo ícono, y estos pueden ser archivos PNG:
¿Cómo declaro un mosaico para tabletas con Windows 8?
El anuncio de Windows 8.0 se parece a esto:
Windows 8.1 e IE 11 esperan múltiples versiones de la imagen, declaradas en browserconfig.xml. Por ejemplo:
Es posible no declarar si no se cambia el nombre del archivo:
¿Qué es un favicon?
Para los que no sepan qué es un favicon, les daremos un poco de ayuda, que les permitirá ponerse al tanto de las cosas. Un favicon es un pequeño icono de 16x16 o 32x32 píxeles, que suele contener un logo, la primera letra de la marca o una imagen característica que refleja el tipo de negocio o la temática del sitio.
¿Por qué es importante el favicon?
El favicon realiza las siguientes funciones:
Marca.
Identificación del sitio por parte del usuario (usabilidad).
Da al sitio web un aspecto profesional.
Detengámonos en más detalle sobre las principales ventajas de usar un favicon.
Reconocimiento de marca
Favicon es como una pequeña identidad de sitio. Como se indicó en la introducción, el favicon ayuda al usuario a recordar su sitio entre los muchos sitios que ha visitado. Ya sea que se trate del historial de navegación, los resultados de búsqueda de Google o la lista de sitios marcados en su navegador, los íconos de página ayudan a los usuarios a reconocer y visitar fácilmente su sitio.
Confianza
Los usuarios tienden a juzgar a los vendedores de bienes y servicios en Internet en función de la profesionalidad de su sitio web. El descuido en forma de falta de un favicon (los motores de búsqueda muestran un sitio sin un favicon con un icono de documento en blanco) puede fácilmente llevar a una pérdida de credibilidad, especialmente cuando los usuarios lo comparan con sus competidores.
Visitas repetidas
Se sabe que las personas responden mejor a las imágenes que al texto. Ahora, suponga que un visitante de su sitio tenía prisa cuando lo visitó por primera vez y decidió marcarlo para volver más tarde. Digamos que esta persona posteriormente decide volver a visitar su sitio, por lo que hace referencia a sus marcadores. Estás de suerte si tienes un favicon reconocible, como la prominente y única letra G de Google, y el usuario te encontrará. Si no hay un favicon, es posible que incluso lo eliminen de la lista de marcadores.
Ahorra tiempo al usuario
Los favicons ahorran el tiempo que el usuario dedica a identificar un sitio en marcadores, historial u otros lugares donde el navegador coloca un favicon para una identificación rápida. Simplemente hace la vida más fácil para el visitante promedio de su sitio.
Beneficios SEO
Si su sitio tiene un favicon, será mejor visible en los resultados de búsqueda que los sitios que no lo tienen y, por lo tanto, podrá atraer más visitantes.
¿Cómo creo un favicon?
Existen muchas herramientas para crear un favicon en minutos. Si no tiene habilidades de diseño o no sabe cómo hacer esto, puede intentar generar un favicon usando Logaster.
Para hacer esto, siga las instrucciones paso a paso:
Paso 5. Crea un favicon
Ahora que tiene un logotipo, haga clic en "Crear un favicon con este logotipo" en la página del logotipo.
Paso 6. Seleccione el diseño de favicon deseado
Al igual que con el logotipo, Logaster generará docenas de favicons hermosos y listos para usar. Elige el diseño que más te guste. Una vista previa le permitirá ver cómo se verá su favicon en el sitio.
Si necesita cambiar el favicon, puede hacerlo mediante la edición del logotipo, ya que los favicons se crean en función del diseño del logotipo. Por lo tanto, si desea, por ejemplo, un color de favicon diferente, debe volver a la página del logotipo, cambiar su color y luego crear el favicon nuevamente.
Puede encontrar inspiración para un favicon en los sitios:
Paso 7. Descarga el favicon
Puede comprar el favicon por separado por $ 9.99 o comprar el paquete de diseño, que incluye no solo el favicon, sino también el logotipo, la tarjeta de presentación, el sobre y el membrete. Puede averiguar cómo comprar el paquete de diseño.
Después del pago, puede descargar el favicon en formatos ico y png.
¿Dónde puedo usar un favicon?
Puedes usar un favicon:
En línea;
Dispositivos móviles. El usuario puede agregar un favicon a la pantalla de inicio de su dispositivo (algo así como un marcador) - Android, IOS, Windows Phone, etc.;
Programas y aplicaciones para PC / Mac.
¿Cómo instalar un favicon en un sitio web?
Una vez que haya recibido el favicon, su instalación en el servidor no tardará más de un par de minutos y se realiza en dos etapas. Para hacer esto, necesitará acceso al directorio raíz de su sitio y un editor de texto para cambiar el HTML del sitio.
Paso 1. Debe cargar el archivo favicon.ico en el servidor. Para hacer esto, necesita descargar e instalar un cliente ftp como FileZilla. Luego ingrese su nombre de usuario y contraseña y cargue el archivo. Puede leer instrucciones más detalladas sobre cómo descargar el archivo favicon.
Paso 2. Ahora necesita editar la página HTML de su sitio para ayudar a los navegadores a encontrar su imagen de favicon. Con la ventana FTP abierta, busque y descargue el archivo index.html o header.php del servidor.
Abra el archivo index.html en un editor de texto: Bloc de notas, Bloc de notas ++, Sublime Text.
Si su sitio contiene HTML puro, pegue el código personalizado en el área HEAD del archivo index.html.
El código se puede copiar en la página de favicon del sitio web de Logaster.
Si está utilizando WordPress, pegue el código a continuación en el área HEAD de su archivo header.php.
Una vez hecho esto, suba el archivo a donde lo obtuvo. ¡Hecho! Vuelva a cargar la página de su sitio para ver el favicon.
La mayoría de los navegadores modernos son lo suficientemente inteligentes como para encontrar el archivo favicon incluso sin dicho código, pero solo si el favicon tiene una imagen de 16x16 píxeles, el nombre favicon.ico y está guardado en el directorio raíz de su sitio.
Esperamos que este artículo le haya brindado información útil para ayudarlo a crear un favicon que hará que su sitio sea más exitoso y atractivo.
El tema del artículo de hoy es cómo hacer un favicon en línea para un sitio web o blog en WordPress. Si por alguna razón aún no sabes qué es y por qué se necesita este archivo, te recomiendo leer los artículos que ya he escrito sobre este tema:
En general, todos los sitios deberían tener esta pequeña imagen.
Cómo crear un favicon.ico para un sitio web
Entonces, ahora intentaré decirte dónde, cómo y cómo hacer un favicon. Pero primero necesitas saber qué tamaño debe tener el favicon para el sitio.
Favicon Es una imagen en formatos ICO, JPEG, PNG, BMP y GIF, que puede tener diferentes tamaños, a partir de 16 × 16 píxeles. Se debe cargar un ícono de exactamente este tamaño en el sitio para que el robot Yandex lo indexe.
Otros tamaños son de importancia secundaria y no se muestran en la búsqueda de Yandex, pero se utilizan para mostrarse en navegadores, por ejemplo, en iPhone o iPad. Si desea que su sitio se destaque en los resultados de búsqueda, recuerde la siguiente regla.
Si hay varios favicons de diferentes tamaños, el primer lugar en el código de la página es la ruta a la imagen de 16x16 px, ya que el robot de favicon de Yandex lee solo la primera dirección.
La forma más sencilla de dibujar un favicon es en Photoshop o en cualquier otro editor de gráficos. Puede hacerlo aún más fácil y tomar una imagen o foto ya terminada y simplemente convertirla al formato y tamaño requeridos. Dado que dicho icono es muy pequeño, los pequeños detalles de la imagen serán poco visibles en él. Por lo tanto, es mejor hacer que su favicon sea lo más simple posible, pero al mismo tiempo atractivo y único. Después de todo, esta es una tarjeta de visita de su recurso web.
Si no es un gran experto en Photoshop, entonces no importa, hay muchos servicios generadores gratuitos en Internet para crear un favicon para un sitio web. Algunos de ellos solo pueden convertir imágenes al formato ICO, mientras que otros brindan la capacidad de editar o crear un favicon desde cero. Traigo a su atención una pequeña descripción general de estos generadores en línea.
Servicios generador de favicon en línea: cree un favicon en línea
Comenzaré con los servicios más simples y luego pasaré gradualmente a los más avanzados, donde puede crear íconos estáticos y animados desde cero y editar los ya preparados.
Cuando recién está lanzando su blog o el sitio web de su empresa y aún no tiene un logotipo, el servicio Logaster es una gran solución para usted. Con su ayuda, puede crear un logotipo y luego, basándose en este logotipo, el generador creará muchos favicons de su elección. La conveniencia radica en el hecho de que el logotipo y el favicon se crearán con el mismo estilo, por lo que su sitio se verá más profesional.
Generadores de favicon simples
Para empezar, hay varios sitios donde puede hacer fácilmente un icono para el sitio convirtiendo cualquier imagen en un archivo favicon.ico, sin la posibilidad de editarlo.
www.favicongenerator.com es quizás el servicio más minimalista. Nada superfluo: eligió una imagen, hizo clic en “¡Generar favicon! ”Y descargó el icono creado.
tools.dynamicdrive.com/favicon- un servicio simple y directo en el que puede hacer un favicon en tres tamaños. Para descargar los archivos recibidos, debe hacer clic en el botón "Descargar FavIcon" debajo de ellos.
www.cy-pr.com/tools/favicon y www.favicon.co.uk son servicios similares al anterior. En el primero, puedes hacer el tamaño del favicon 16 × 16 y 32 × 32, y en el segundo, adicionalmente 48 × 48 y 64 × 64.
www.genfavicon.com: todo el proceso de creación de un icono incluye tres pasos:
- Seleccione un archivo (JPEG, GIF, PNG) en su computadora o simplemente escriba la URL de la imagen y haga clic en " Cargar imagen“;
- Seleccione el tamaño (16 × 16, 32 × 32, 48 × 48, 64 × 64 o 128 × 128) y el área requerida del dibujo, si queremos generar solo una parte de la imagen haciendo clic en “ Captura e imagen“;
- Miramos el resultado y, si todo nos conviene, descargamos el archivo.
Creación de un favicon animado para un sitio web en generadores en línea
Ahora veamos varios servicios donde puede crear favicons animados, así como agregar texto en el alfabeto latino, que se desplazará junto con el ícono de la línea rastrera. Es cierto que la animación no es compatible con todos los navegadores.
www.favicon.by - servicio en ruso. Todo lo que se requiere es seleccionar un archivo, ingresar el texto en latín (si es necesario) y presionar el botón “Crear Favicon”. A continuación puede ver el resultado y descargar el archivo con los archivos.
www.favicon.com.mx es un servicio completamente idéntico al anterior, solo en inglés.
Dónde hacer un favicon desde cero - editores de favicon en línea
antifavicon.com: este servicio, por alguna razón con el prefijo anti, es interesante porque le permite crear un archivo favicon.ico usted mismo, pero no como una imagen, sino como texto sobre un fondo de color. Todo lo que se requiere es ingresar las letras apropiadas y seleccionar colores. Por cierto, hice mi favicon aquí mismo. Pensé que lo cambiaría más tarde, pero ahora estoy acostumbrado.
favicon-generator.org: aquí, además del convertidor, también hay un editor de iconos. Además, puede cargar el favicon creado a la galería pública, donde otros usuarios del sitio pueden descargarlo libremente.
favicon.ru es un popular generador ruso en línea donde puedes crear favicons a partir de imágenes y dibujarlos. Aquí también puede solicitar la creación de un favicon para especialistas por $ 20. Me pregunto si alguien está haciendo pedidos allí.
www.favicon.cc es otro generador popular similar al anterior. Una característica interesante de este servicio es que puede realizar animaciones fotograma a fotograma de hasta 20 segundos de duración.
Puede ver el favicon animado y descargarlo en la ventana de vista previa.
www.degraeve.com/favicon es otro generador de favicon en línea. Este editor, como los anteriores, permite hacer transparente el fondo del icono.
Quizás sea suficiente por hoy, aunque esto está lejos de todos los servicios en línea. Pero incluso estos son suficientes para crear un hermoso favicon para su sitio web o blog y ser visible en los resultados de búsqueda.
Y, sin embargo, guardé otro generador de iconos en línea para el sitio para más adelante. Este servicio merece una publicación separada, donde le diré cómo hacer un favicon para los navegadores iPhone, iPod Touch y iPad y hablaré con más detalle sobre la instalación de íconos animados en el sitio. Además, les presentaré el servicio Favicon Validator, donde pueden verificar y ver todos los íconos de favicon.ico si este archivo contiene más de una imagen .. ¡Adiós a todos!
¡Hola amigos! Recientemente instalé un favicon en uno de los blogs y pensé que todavía no tengo un artículo sobre este tema. Entonces, ¿por qué no escribir? Entiendo que el tema es trillado y muchos lo saben desde hace mucho tiempo. Muchos, pero no todos, según las estadísticas de wordstat.yandex.ru (vea la captura de pantalla a continuación). Todos hicimos un favicon por primera vez y buscamos información como esta. Deje que los aspirantes a webmasters lo encuentren en mi blog. Además, lo creé con este mismo propósito. Y el tráfico adicional de los motores de búsqueda para esta consulta no me perjudicará. Entonces vamos.
Que es favicon.ico
Primero, definamos qué es un favicon y por qué lo necesitamos. Esto es lo que Wikipedia responde a estas preguntas ().
Es más fácil para mí mostrar que explicar con palabras. En la captura de pantalla a continuación, mostré cómo se muestran los favicons en Google Chrome. La situación es similar en otros navegadores.
Generalmente, favicon para el sitio Es un icono o imagen especial de 16 × 16 píxeles en formato ICO. Por lo general, este archivo se llama favicon.ico y se encuentra en la carpeta raíz del sitio. También son posibles otros tamaños (24 × 24, 32 × 32, 48 × 48, etc.) y formatos (JPEG, BMP, PNG y GIF). En consecuencia, el formato PNG le permite crear un icono sobre un fondo transparente, GIF - animado.
¿Por qué necesitas un favicon?
El archivo ico favicon es muy importante para el sitio. Y no solo porque dicha imagen facilita la búsqueda del recurso web deseado entre una gran cantidad de marcadores del navegador. La característica y el beneficio principales se encuentran en otra parte.
El hecho es que Yandex muestra favicons en los resultados de búsqueda de cada sitio en el que está instalado. Un favicon único y hermoso atrae la atención y permite que su recurso se destaque de la competencia, lo que lo obliga a hacer clic en él y recopilar el tráfico de búsqueda. Además, un favicon memorable contribuye al reconocimiento del sitio en Internet como marca. Acepte que, en primer lugar, desea hacer clic en el enlace con la imagen.
Vale la pena decir que Yandex no recomienda que la imagen contenga translucidez, y la animación solo es compatible con el navegador FireFox. También debe comprender que con un aumento en el tamaño de la imagen, el peso del archivo y la carga en el alojamiento aumentan. Por lo tanto, es mejor utilizar un favicon para cualquier sitio (WordPress, Joomla, DLE, etc.) en formato .ico con un tamaño de 16 por 16 píxeles.
Para instalar un icono de este tipo en un sitio web, primero debe tenerlo. Aquí son posibles varias opciones:
- descargar favicons listos para usar;
- haz favicon.ico tú mismo usando Photoshop o generadores especiales en línea.
El primer método es mucho más simple, pero reduce la probabilidad de unicidad. Sin embargo, considérelo.
Dónde descargar favicon.ico. Colecciones confeccionadas de favicons para el sitio
Para descargar un favicon para un sitio, es suficiente ingresar tal o una consulta similar en un motor de búsqueda. Créame, no le faltarán resultados. A continuación, daré las direcciones de varios recursos donde puede descargar imágenes preparadas para el favicon. En algunos de ellos, es posible crear sus propios iconos utilizando generadores.
Galerías de iconos (favicon.ico) para el sitio:
- www.iconj.com/gallery.php - gran colección de imágenes y generador en línea;
- www.audit4web.ru/info/favicon/- hay más de 15.000 piezas aquí;
- www.favicon.cc/?action=icon_list&order_by_rating=1- generador y galería de iconos animados y estáticos;
- www.favicon.co.uk/gallery.php - generador de favicon y directorio de favicon para el sitio;
- thefavicongallery.com es otra galería de imágenes.
Pero quizás el mejor lugar para descargar varios iconos y logotipos para su sitio web es findicons.com.
Una pequeña descripción de este servicio:
Las imágenes se presentan en diferentes formatos y tamaños. Para buscar y descargar favicon.ico en el sitio findicons.com, debe seleccionar una imagen y hacer clic en el botón "Más". En la ventana que se abre, haga clic en la línea con el número de tamaños.
Espero que lo averigües.
Otro gran servicio con búsqueda de iconos es www.iconsearch.ru.
Aquí todo es sencillo. Ingrese en la barra de búsqueda el tema por el cual buscaremos una imagen o usaremos la nube de etiquetas. Es posible elegir el tamaño y el color del fondo (blanco, transparente, negro).
Para descargar el favicon seleccionado, haga clic en el icono de formato PNG o ICO. Al hacer clic en la inscripción "Más", puede ver este icono en otros tamaños y más iconos de este conjunto.
Terminaré con esto, o incluso así resultó un montón de bukkaf sobre eso, cómo descargar un favicon ico para un sitio web... Pero también lo iba a contar, y en el blog de WordPress. Ahora, para la próxima vez, no te lo pierdas. ¡Hasta que!