Name of display name (fallback) if Image can not be found using the Web


How to display avatar taking letters from name like Google when actual image is not found.


I would prefer a solution creating fallback image using canvas.

HTML and CSS only. Add what ever way you want to detect the img.

    background: #D770AD;
    padding: 10px;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    margin-right: 5px;
    color: #FFFFFF;
<div class="avatar">FL</div>