A menudo preferimos hacer un logotipo con photoshop (u otra herramienta de diseño) en vez de colocar el texto del mismo con código (X)HTML+CSS.

Un ejemplo de ello es este blog que, como muestro en la imagen a continuación, tiene por cabecera un logotipo hecho con photoshop.

El problema viene cuando queremos que el título de nuestra web sea relevante para los buscadores, por lo que en esta entrada le daremos el toque SEO que necesitamos para que sea así.

Como se trata del título de la web lo colocaremos dentro de las etiquetas H1 para que tenga máxima relevancia, quedando el código de la siguiente forma:

Dario BF Diseño y desarrollo web, GNU/Linux, mac, nuevas tecnologías y más

Como veis, le asignamos un ID (logo) a la etiqueta H1, y el resto lo insertamos normalmente: un span para el titulo del blog y un small para el tagline.

El truco de esto reside en el CSS, que será el siguiente:

#header h1 small,#header h1 a span{
display:none;
}
Como veis, lo que hacemos es decir, a través de CSS, que no muestre (display:none) el contenido de las etiquetas span y small (titulo y tagline respectivamente)