When you are viewing your blogger site in web browser as a logged-in user, you can see a little pencil icon near every blog post to edit them (to display this icon, you need to enable "Show Quick Editing" option in Blogger Post Page Options). This quick edit button is useful, because you do not need to go to Blogger back-end and click on edit links of your posts.
But Blogger default post quick edit icon image is not look very nice, so you can change it using below steps.
First go to "Edit HTML" of your blog.
Now find this in "Edit HTML":
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
Now replace "http://img2.blogblog.com/img/icon18_edit_allbkg.gif" with your new post quick edit image URL.
Example:
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://4.bp.blogspot.com/-byQl1ya0Kgs/U_WCCjcqmUI/AAAAAAAANLc/k3n71fxwhGs/s1600/edit.png' width='18'/>
</a>
</span>
</b:if>
</b:includable>
Note: default image size of post quick edit button is 18px width and 18px height. Change it from the code if you need.
Save your template. Final result will look like this:
File Under : change template, post