The "Edit post" button already exists in the WordPress admin bar, but you may not like the admin bar taking up screen space. Here's how to make your life a bit easier by adding the post edit button to the front end.

I think a good place for it is next to the heading of the article.

<h2><?php the_title(); edit_post_link(' ✎', '', ''); ?></h2>

I’m using a Unicode pen ✎ as the icon, but a real icon would of course be better.

Taking it a bit further

On this site, the edit button is the doughnut-shaped bullet in front of the post header. It works only for logged-in users. Here's how to do that:

<?php
if (is_user_logged_in()) {
  edit_post_link('', '', '');
} else {
  echo '<span class="post-edit-link"></span>';
} ?>
 
<?php the_title(); ?>](<?php the_permalink(); ?)

And the CSS for it:

.post-edit-link {
  background: url(images/sprite.png) no-repeat left top;
  display: inline-block;
  position: relative;
  top: 4px;
  width: 15px;
  height: 15px;
}
 
/* Take advantage of the body class and display the hover effect only for
logged in users */
.logged-in h1 .post-edit-link:hover {
  background-position: left -50px;
}

We need to use display: inline-block; cause we want to specify width and height for the element and we want it to be inline next to the heading. inline-block works quite well these days, see the browser support here. If you want to be really cross-browser, you can display it as block and float it and the heading text to left.