Tabla de caracteres y símbolos HTML

Moneda

Símbolo	Entidad	Código HTML	Código CSS	Unicode	Nombre
$	$	$	\0024	U+0024	Dólar
¢	¢	¢	\00A2	U+00A2	Signo de centavo
£	£	£	\00A3	U+00A3	Signo de libra esterlina
¤	¤	¤	\00A4	U+00A4	Signo monetario
¥	¥	¥	\00A5	U+00A5	Signo del yen/yuan

Símbolos matemáticos

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

Símbolos de puntuación

Símbolo	Entidad	Código HTML	Código CSS	Unicode	Nombre
!	!	!	\0021	U+0021	Signo de exclamación
#	#	#	\0023	U+0023	Almohadilla
%	%	%	\0025	U+0025	Porcentaje
&	&	&	\0026	U+0026	Et
(	(	(	\0028	U+0028	Paréntesis izquierdo
)	)	)	\0029	U+0029	Paréntesis derecho
*	*	*	\002A	U+002A	Asterisco
,	,	,	\002C	U+002C	Coma
.	.	.	\002E	U+002E	Punto
/	/	/	\002F	U+002F	Barra
:	:	:	\003A	U+003A	Dos puntos
;	;	&#59;	\003B	U+003B	Punto y coma
?	?	?	\003F	U+003F	Signo de interrogación
[	[	[	\005B	U+005B	Corchete izquierdo
\	\	\	\005C	U+005C	Barra inversa
]	]	]	\005D	U+005D	Corchete derecho
^	^	^	\005E	U+005E	Acento circunflejo
_	_	_	\005F	U+005F	Guión bajo
`	`	`	\0060	U+0060	Acento grave
{	{	{	\007B	U+007B	Corchete izquierdo
|	|	|	\007C	U+007C	Pleca
}	}	}	\007D	U+007D	Corchete derecho
~	˜	~	\007E	U+007E	Virgulilla
ˆ	ˆ	ˆ	\02C6	U+02C6	Modificador letra acento circunflejo
	 	 	\00A0	U+00A0	Espacio de no separación
	 	 	\2002	U+2002	En el espacio
	 	 	\2003	U+2003	Espacio em
	 	 	\2009	U+2009	Espacio fino
‌	‌	‌	\200C	U+200C	Ancho Cero No-Joiner
‍	‍	‍	\200D	U+200D	Cero Ancho Joiner
‎	‎	‎	\200E	U+200E	Marca de izquierda a derecha
‏	‏	‏	\200F	U+200F	Marca de derecha a izquierda
¡	¡	¡	\00A1	U+00A1	Signo de exclamación invertido
¦	¦	¦	\00A6	U+00A6	Barra vertical partida
§	§	§	\00A7	U+00A7	Signo de sección
¨	¨	¨	\00A8	U+00A8	Diéresis
ª	ª	ª	\00AA	U+00AA	Indicador ordinal femenino
¬	¬	¬	\00AC	U+00AC	Signo de negación
­	­	­	\00AD	U+00AD	Guion separador de ­­sílabas
¯	¯	¯	\00AF	U+00AF	Macrón
²	²	²	\00B2	U+00B2	Superíndice dos
³	³	³	\00B3	U+00B3	Superíndice tres
´	´	´	\00B4	U+00B4	Acento agudo
µ	µ	µ	\00B5	U+00B5	Signo de micro
¶	¶	¶	\00B6	U+00B6	Signo de calderón
·	·	·	\00B7	U+00B7	Punto centrado
¸	¸	¸	\00B8	U+00B8	Cedilla
¹	¹	¹	\00B9	U+00B9	Superíndice 1
º	º	º	\00BA	U+00BA	Indicador ordinal masculino
¿	¿	¿	\00BF	U+00BF	Signo de interrogación abierta
‐	‐	‐	\2010	U+2010	Guión
–	–	–	\2013	U+2013	En Dash
—	—	—	\2014	U+2014	Guión largo
―	―	―	\2015	U+2015	Barra horizontal
‖	‖	‖	\2016	U+2016	Doble linea vertical
†	†	†	\2020	U+2020	Daga
‡	‡	‡	\2021	U+2021	Doble daga
•	•	•	\2022	U+2022	Bala
‥	‥	‥	\2025	U+2025	Líder de dos puntos
…	…	…	\2026	U+2026	Elipsis horizontal
‰	&;	‰	\2030	U+2030	Per Mille Sign
‱	‱	‱	\2031	U+2031	Por diez mil signo
′	′	′	\2032	U+2032	principal
″	″	″	\2033	U+2033	Doble Prime
‴	‴	‴	\2034	U+2034	Triple Prime
‵	‵	‵	\2035	U+2035	Prime Invertido
‾	‾	‾	\203E	U+203E	Overline
⁁	⁁	⁁	\2041	U+2041	Punto de inserción de caret
⁃	⁃	⁃	\2043	U+2043	Guión de guión
⁄	⁄	⁄	\2044	U+2044	Barra de fraccion
⁏	⁏	⁏	\204F	U+204F	Punto y coma invertido
⁗	⁗	⁗	\2057	U+2057	Cuadruple Prime

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