03 noviembre 2021

Tabla de caracteres y símbolos HTML

Moneda

SímboloEntidadCódigo HTMLCódigo CSSUnicodeNombre
$$\0024U+0024Dólar
¢¢¢\00A2U+00A2Signo de centavo
££\00A3U+00A3Signo de libra esterlina
¤¤\00A4U+00A4Signo monetario
¥¥¥\00A5U+00A5Signo del yen/yuan


Símbolos matemáticos

SímboloEntidadCódigo HTMLCódigo CSSUnicodeNombre
Signo de derechos de copia
©©\00A9U+00A9Signo de derechos de copia
Signo de marca registrada
®®\00AEU+00AESigno de marca registrada
Signo de marca
™™\2122U+2122Signo de marca
@@@\0040U+0040Arroba
ℂℂ\2102U+2102Doble-Struck Capital C
℅℅\2105U+2105Cuidado de
ℊℊ\210AU+210AScript Small G
ℋℋ\210BU+210BScript Capital H
ℌℌ\210CU+210CLetra mayúscula negra h
ℍℍ\210DU+210DDoble H de Capital
ℎℎ\210EU+210EConstante de planck
ℏℏ\210FU+210FPlanck constante sobre dos pi
ℐℐ\2110U+2110Script Capital I
ℑℑ\2111U+2111Letra mayúscula negra
ℒℒ\2112U+2112Script Capital L
ℓℓ\2113U+2113Script Small L
ℕℕ\2115U+2115Doble-Struck Capital N
№№\2116U+2116Numero Signo
℗℗\2117U+2117Derechos de autor de grabación de sonido
℘℘\2118U+2118Script Capital P
ℙℙ\2119U+2119Doble-Struck Capital P
ℚℚ\211AU+211AQ doble capital
ℛℛ\211BU+211BScript Capital R
ℜℜ\211CU+211CLetra mayúscula R negra
ℝℝ\211DU+211DDoble-Struck Capital R
℞℞\211EU+211EToma de prescripción
ℤℤ\2124U+2124Double-Struck Capital Z
℧℧\2127U+2127Signo de ohmio invertido
ℨℨ\2128U+2128Letra mayúscula negra z
℩℩\2129U+2129Se volvió griega letra minúscula Iota
ℬℬ\212CU+212CScript Capital B
ℭℭ\212DU+212DMayúscula C mayúscula
ℯℯ\212FU+212FScript Pequeño E
ℰℰ\2130U+2130Script Capital E
ℱℱ\2131U+2131Script Capital F
ℳℳ\2133U+2133Script Capital M
ℴℴ\2134U+2134Script Pequeño O
ℵℵ\2135U+2135Símbolo de Alef
ℶℶ\2136U+2136Símbolo de apuesta
ℷℷ\2137U+2137Simbolo de gimel
ℸℸ\2138U+2138Símbolo dalet
ⅅⅅ\2145U+2145Doble-Italic Italic Capital D
ⅆⅆ\2146U+2146Doble-cursiva cursiva pequeña D
ⅇⅇ\2147U+2147Doble-cursiva cursiva pequeña E
ⅈⅈ\2148U+2148Doble cursiva cursiva pequeña I
★★\2605U+2605Estrella negra
☆☆\2606U+2606estrella blanca
Telefono negro
☎☎\260EU+260ETelefono negro
Signo femenino
♀♀\2640U+2640Signo femenino
Signo masculino
♂♂\2642U+2642Signo masculino
Traje de pala negro
♠♠\2660U+2660Traje de pala negro
Traje de club negro
♣♣\2663U+2663Traje de club negro
Traje de corazon negro
♥♥\2665U+2665Traje de corazon negro
Traje de diamante negro
♦♦\2666U+2666Traje de diamante negro
◊◊\25CAU+25CAPastilla
♪♪\266AU+266AOctava nota
♭♭\266DU+266DLetrero plano de musica
♮♮\266EU+266EMusica Signo Natural
♯♯\266FU+266FMusica Sharp Sign
✓✓\2713U+2713Marca de verificación
✗✗\2717U+2717Papeleta X
✠✠\2720U+2720Cruz de Malta
✶✶\2736U+2736Seis puntas de estrella negra
❘❘\2758U+2758Barra vertical de luz
❲❲\2772U+2772Ornamento de soporte de concha de tortuga izquierda ligera
❳❳\2773U+2773Ornamento de corchete derecho tortuga derecha


Símbolos de puntuación


SímboloEntidadCódigo HTMLCódigo CSSUnicodeNombre
!!\0021U+0021Signo de exclamación
###\0023U+0023Almohadilla
%%%\0025U+0025Porcentaje
&&&\0026U+0026Et
(((\0028U+0028Paréntesis izquierdo
)))\0029U+0029Paréntesis derecho
***\002AU+002AAsterisco
,,,\002CU+002CComa
...\002EU+002EPunto
///\002FU+002FBarra
:::\003AU+003ADos puntos
;;&#59;\003BU+003BPunto y coma
???\003FU+003FSigno de interrogación
[[[\005BU+005BCorchete izquierdo
\\\\005CU+005CBarra inversa
]]]\005DU+005DCorchete derecho
^^^\005EU+005EAcento circunflejo
___\005FU+005FGuión bajo
```\0060U+0060Acento grave
{{{\007BU+007BCorchete izquierdo
|||\007CU+007CPleca
}}}\007DU+007DCorchete derecho
~˜~\007EU+007EVirgulilla
ˆˆˆ\02C6U+02C6Modificador letra acento circunflejo
   \00A0U+00A0Espacio de no separación
  \2002U+2002En el espacio
  \2003U+2003Espacio em
  \2009U+2009Espacio fino
‌‌\200CU+200CAncho Cero No-Joiner
‍‍\200DU+200DCero Ancho Joiner
‎‎\200EU+200EMarca de izquierda a derecha
‏‏\200FU+200FMarca de derecha a izquierda
¡¡¡\00A1U+00A1Signo de exclamación invertido
¦¦¦\00A6U+00A6Barra vertical partida
§§§\00A7U+00A7Signo de sección
¨¨¨\00A8U+00A8Diéresis
ªªª\00AAU+00AAIndicador ordinal femenino
¬¬¬\00ACU+00ACSigno de negación
­­­\00ADU+00ADGuion separador de ­­sílabas
¯¯¯\00AFU+00AFMacrón
²²²\00B2U+00B2Superíndice dos
³³³\00B3U+00B3Superíndice tres
´´´\00B4U+00B4Acento agudo
µµµ\00B5U+00B5Signo de micro
¶¶\00B6U+00B6Signo de calderón
···\00B7U+00B7Punto centrado
¸¸¸\00B8U+00B8Cedilla
¹¹¹\00B9U+00B9Superíndice 1
ººº\00BAU+00BAIndicador ordinal masculino
¿¿¿\00BFU+00BFSigno de interrogación abierta
‐‐\2010U+2010Guión
––\2013U+2013En Dash
——\2014U+2014Guión largo
――\2015U+2015Barra horizontal
‖‖\2016U+2016Doble linea vertical
††\2020U+2020Daga
‡‡\2021U+2021Doble daga
••\2022U+2022Bala
‥‥\2025U+2025Líder de dos puntos
……\2026U+2026Elipsis horizontal
&;‰\2030U+2030Per Mille Sign
‱‱\2031U+2031Por diez mil signo
′′\2032U+2032principal
″″\2033U+2033Doble Prime
‴‴\2034U+2034Triple Prime
‵‵\2035U+2035Prime Invertido
‾‾\203EU+203EOverline
⁁⁁\2041U+2041Punto de inserción de caret
⁃⁃\2043U+2043Guión de guión
⁄⁄\2044U+2044Barra de fraccion
⁏⁏\204FU+204FPunto y coma invertido
⁗⁗\2057U+2057Cuadruple Prime

22 octubre 2021

Cómo crear un favicon perfecto para tu marca

Descubre cómo crear y utilizar el favicon de tu marca



Generar un favicon con plantilla de Illustrator

Los favicon son una parte integral de una marca y aseguran que un sitio web, sea inmediatamente reconocible en los navegadores y aplicaciones de cualquier dispositivo.

Los consumidores tienen un concepto sobre los productos o servicios de una empresa que identifican y diferencian, de otros iguales o parecidos, gracias a la identidad de marca, representada visualmente por un logotipo.
Dicho esto, un logotipo es algo más que un punto de referencia visual en la esquina superior izquierda de un sitio web.

Los favicon son logotipos miniaturizados que establecen la identidad de una marca fuera de su sitio web y permiten mantener una presencia visual constante en lugares como:

  • Pestañas de navegadores
  • Barras de direcciones URL
  • Marcadores del navegador
  • Historiales de búsqueda en Internet
  • RSS Feeds
  • Pantallas de inicio móviles y de escritorio
  • Iconos de aplicaciones

A diferencia de las imágenes destacadas que Google, las redes sociales o los agregadores de RSS pueden seleccionar y usar en las publicaciones, no se puede seleccionar un favicon. Si no diseña y carga un favicon, aparecerá un marcador de posición genérico. 

¿Qué es un favicon?

Favicon es la abreviatura del inglés "Favorite Icon" (icono favorito). El favicon fue introducido
en Internet Explorer a finales de la década de 1990. Su propósito es ayudar a los usuarios a encontrar y distinguir rápidamente los distintos sitios web abiertos en las pestañas del navegador.


¿Por qué es importante tener un favicon en un sitio web?

Reforzar la identidad de marca

Los sitios web que no tienen favicon mostrarán un icono genérico en las pestañas del navegador, historiales de búsqueda, feeds RSS y demás: (Firefox, Google, Microsoft Edge)



Es un icono de globo genérico. Y los usuarios de Internet puede que no conozcan el término "favicon", pero entenderán que falta algo si ven esto. 
Puede que no parezca gran cosa pero los usuarios notarán este nivel de atención al detalle.


Ahora, si miras en la pestaña de tu navegador arriba, verás un ejemplo del favicon de este blog que es el icono del logotipo. Los favicon son una pieza valiosa para un sitio web y su marca.

Los sitios web que no tienen favicon se considerarán poco profesionales.

Mejorar la navegabilidad por Internet 

El ejemplo anterior muestra la diferencia en el aspecto de una pestaña con o sin favicon. 
Pero no se trata solo de marcar una pestaña. Así es como los usuarios de Internet pueden navegar rápidamente de regreso a un sitio web, gracias a la referencia visual de un favicon. 
Cada pestaña abierta (Facebook, Gmail, Blogger, etc) tiene su favicon fácilmente reconocible.





El favicon evita que los usuarios tengan que leer los metatítulos en las pestañas del navegador. Como otros iconos y logotipos que usamos en los sitios web, el favicon le dice visualmente a los usuarios qué sitio web es cada ventana abierta del navegador. Muy útil, sencillo y efectivo.


Incrementar el reconocimiento de la marca

Crear un favicon fortalecerá el reconocimiento de marca de la audiencia. 

Por ejemplo, el favicon de Google es una "G" con los colores de su marca.

El favicon tiene un fondo de relleno sólido (a diferencia de uno transparente), por lo que la "G" de colores con fondo blanco es estético y además rápido y fácil de reconocer.

Las personas familiarizadas con la marca Google, reconocerán al instante este favicon en cualquier lugar donde lo encuentren. 
Por ejemplo, aparece en las lista de lector de Feeds, en los marcadores de favoritos del navegador, en 
el historial de Internet y no sólo en el navegador de escritorio, el favicon se muestra en las listas de marcadores de los Smartphone. 

Además, desde mayo de 2019, Google muestra un favicon en la página de resultados de búsqueda móvil (SERP). Al implementar un Favicon en su sitio web, sus resultados de búsqueda móvil serán más visibles, lo que puede resultar en una tasa de clics más alta.


Consejos para crear el favicon perfecto para tu marca

Se puede creer que con una versión redimensionada del logotipo ya es suficiente, esto no resultaría bien para un favicon, hay unos detalles a tener en cuenta.

1. Elegir un elemento destacable y reconocible de la marca.

Para algunas marcas, se podría utilizar el diseño del logotipo tal cual. 

ej. Apple con su manzana: 


Para las marcas que incluyen un texto con el nombre comercial y/o un eslogan, tienen que simplificarlo y diseñar algo especifico para el favicon. 

Gmail, por ejemplo, usa el icono M: 


2. Mantener una marca coherente pero simplificada

Obviamente, quieres que tu favicon sea reconocido y relacionado con tu marca. Debes usar tipografía, iconos y colores coherentes con tu identidad de marca.

Dicho esto, no querrás exagerar. Tu favicon cabe en un espacio muy pequeño, por lo que hay que tener cuidado con recargar el diseño.

Mira los favicon de otras marcas que te gustan y toma inspiración de ellas.



3. Decidir usar fondo transparente o relleno de color

Los favicons transparentes suelen ser para diseños basados ​​en iconos como el de Asana:


Uno de los beneficios de esto es que el icono se destaca claramente sobre el color de su fondo. 

El ejemplo anterior está en Chrome. Este ejemplo es de Safari:


Si se hubiera olvidado de guardar su favicon con un fondo transparente, habría un cuadro blanco antiestético a su alrededor en esta pestaña del navegador. 

Los favicons de relleno sólido son los mejores para los favicons basados ​​en letras como los de Stripe:



4. Diseña el favicon en varios tamaños estándar

Los favicon aparecen en distintos tamaños según la plataforma. Pueden ser tan pequeños como 16×16 píxeles, como 64×64 píxeles y más... En WordPress el editor recomienda un tamaño de 512×512px. 



El tamaño medio de los favicon de aplicaciones o accesos directos es de 152×152 px, pero puede llegar a 192×192 píxeles si desea ajustarlos exactamente para tabletas Android. 

Esta es, además, otra razón por la que un diseño más simple es mejor. Nunca se sabe cuánto necesitará aumentar o reducir su favicon.


5. Guardar el icono en varios formatos

Aunque los navegadores más populares han comenzado a aceptar favicon en otros formatos además de ICO, no todos tienen soporte universal. 

ICO y PNG disfrutan de soporte universal en las últimas versiones de cada navegador. Si bien GIF también lo hace, en realidad no es la opción ideal para un favicon. 

Criterios de diseño nos dice que hay que diseñar primero para el usuario y su experiencia libre de distracciones. Un favicon de navegador animado no es recomendable.

Si bien es posible que esté pensando en usar PNG, ya que es un formato más común, ICO es su mejor opción. Eso es porque puede guardar una o más imágenes, en diferentes tamaños y diferentes resoluciones, dentro de un solo archivo que es la forma más fácil de generar todas las instancias de favicon a la vez.

Para esto lo mejor es un archivo de plantilla para editar, aquí dejo un enlace a una plantilla para generar el icono en distintos tamaños cómodamente. Editando el diseño de la mesa principal se modifica el diseño en las demás mesas de trabajo preparadas para exportar el archivo automáticamente en varios tamaños.

Descargar plantilla generador de favicon para Illustrator





Post Labels

WordPress macOS Linux diseño gráfico Error color plantilla CentOS 7 Plesk PHP RGB SSH Servidor Windows XAMPP aplicación web colores gratis logo pantone sitio web video Edición de Vídeo Plugin Recursos Solución SysAdmin acceso diseño diseño web edición editar imagen mac nube página web sistema software software libre tamaño 2020 Audiovisuales CMS CentOS 6.9 Google HEX HTML PHP.INI Puertos URL actualización actualizar ai aplicaciones aplicación aspecto básicos certificado comercio electrónico conexión corazón desarrollo web emails emotiva flores footer fotografía frase functions.php gratuito iMac illustrator imagenes login mantenimiento mapas motivación online optimización página rendimiento tema texto velocidad verano web $cfg .new 1 TB 1&1 2021 2022 21.5 22 2D 3D 500GB 6.4.3 A0 A1 A2 A3 A4 A5 A6 A7 A8 Abierto AfterEffects Alexa Amazon COVID-19 Captura Videojuegos Capturar Pantalla Capturar Vídeo y Audio Cheat Sheet Classic Blue CleanMyPC Cloud Cloud Server Coronavirus Código Código Abierto DIN Daylimotion Developer ELRepo ETIMEDOUT Grabación de Vídeo Guía H1 Herramientas Hoja de Referencia Homebrew Huawei I+D Illuminating Javascript Kernel LMS Live Streaming MIME Mail MySql NPM Núcleo OPPO Onyx PEAR PH Permisos Productos SEM SSL Terminal Tutoriales UX Ultimate Grey Videotutoriales Web Services WooCommerce Xiaomi abuelos accesibilidad activado admin adminiración adolfo agencia agua almacenamiento alt altura amor ampliar ancho animacionlogo app apple apps aprende archivo archivos arranque arte ataque ataques atico auriculares axioma año banco banners barcos basic 2 becquer beneficios bing bitcoin blog bodas booteable buscadores calendario caminando cancion captura de pantalla cara carpeta casa chmod cliper comandos conexion configuración contacto contraseña control convertir copywriter corazones correo cortar crear cuenta curso cámara reflex código libre das depurado derrotas desarrollo aplicaciones descargar deseo desintalar dibujo direccion disco SSD distro dns domina dominio don quijote dos mil doubleclick duda editor email encriptar esfuerzo español esquema de colores estudio estándar examina exposición familia favicon fecha filezilla formación formato formulario fracasos ftp fuentes fuerza bruta funcion función git golosina googleads grado gratuita gráficos guerrero gustavo h2 hacemos herramienta hijos hotel http https humano humanos icono iconos ideas inaccesible incertidumbre indispensables inspiración instagram instalar internet invalid inversión j balvin jeff bezos jscomposer karol g keyworks largo plazo launchpad libre liderazgo limpieza lirios living coral logoanimation límite lógica manual manzanita mar marinero marketing online medidas mejorar memoria metaetiquetas mi miel migrar miro modificar modificar.cambiar modo moscas motivadora mover mp3 mp4 mueren mujer mundo musical más móviles neón ni contigo ni sin ti nicky jam nietos node.js nulled oficina olas omnivus opensource optimista optimizar padres palabras clave paleta panal pantallas pantallazo panza papel pareado particion partición pastel pc pegar penthouse perfecto personalización personalizado personalizar personas pesca petunia photoshop phpMyAdmin pie de página planos poblado poderoso poesía posible posicionamiento preferido prestaciones prisiones privacidad privada privado programas proporcional protocolo publisites quijote rechazado redactium redactor de contenidos reflexión reggaeton relacion relación remitente remix resolución restablecer resurgir rosas rápido samsung sancho screenshot sea seguridad seguro sentimientos seo ser servicios simulador sistemas slider revolution smartphone smtp snapshot spam subida tablets temp dir tendencia terabox titulo tmp trabajo txt título ubuntu unidad usb utilidad vacío vectoriales vencer ventas veo versiones verso very peri vicio videologo videos webp www youtube éxitos