Edit in JSFiddle


              
<img src="" data-text="J" style="background-color: #AB4642;" />

<img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" />
@import url(https://fonts.googleapis.com/css?family=Roboto);

img {
	display: inline-block;
	width: 64px;
	height: 64px;
	position: relative;
    font-family: 'Roboto';
    border-radius: 50%;
}

img[src=""] {
    visibility: hidden;
}

img:before {
    content: attr(data-text);
    background-color: inherit;
    border-radius: inherit;
    position: absolute;
    font-size: 2.0rem;
    line-height: 64px;
    color: white;
    text-align: center;
    display: inline-block;
    width: 64px;
    visibility: visible;
}