Replacing H1 text with a logo image: best method for SEO and accessibility?

Question

It seems like there are a few different techniques out there, so I was hoping to get a \"definitive\" answer on this...

On a website, it\'s common practice to create

Answer 1

After reading through the above solutions, I used a CSS Grid solution.

1. Create a div containing the h1 text and the image.
2. Position the two items in the same cell and make them both relatively positioned.
3. Use the old zeldman.com technique to hide the text using text-indent, white-space, and overflow properties.

    
StackOverflow
    
        
    

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}