基本的に、同一サイト内は同じウィンドウ（あるいはタブ）で開き、別サイトのものは違うウィンドウ（あるいはタブ）で開くのが望ましいと思います。こうすることにより、ユーザが迷子になる確率がかなり減るからです。

まあ、別ウィンドウ（あるいはタブ）で開くかどうかは、制作者が決めることではなく、ユーザが決めることであるという議論もありますけど。

意外にも、勝手にウィンドウが開いた場合、新しくウィンドウが開いたことに気づかないってことは多々あります。戻りたいのにブラウザのバックボタンが効かない、勝手にウィンドウが増えすぎるなど、見ている人に予想がつかないことをすると、ストレスになります。

ストレスを減らすには、予めユーザに予測させるとよいです。
「このリンク先は新しいウィンドウ（あるいはタブ）が開きますよ」ということをナビゲーションしておけば、ユーザは自分がどこにいるかを把握できます。

今回は、リンク先を別ウィンドウ（あるいはタブ）に表示することを前提にしていますが、もちろん、同一ウィンドウの表示でも外部リンク（自分のサイト以外へのリンク）として、このアイコンをつけるのもよいと思います。

サンプル

では、サンプルを示します。

別窓で開きます。

このようにリンクテキストの後ろ（あるいは前）に、別窓で開くことを示すアイコンを設置すれば、外部リンクであることが一目瞭然です。

設定方法

できれば、HTMLファイルにて、テキストの後ろにイメージ画像を指定するという方法よりは、スタイルシートによって制御したほうが良いと思います。なぜならば、イメージ画像自体にはあまり意味が無く、テキストを補足するものだからです。

スタイルシートで書く場合はいくつか方法があります。

１．target属性を利用して、属性セレクタを使う

以下(X)HTMLソースです。

<a href="http://www.sample.com" target="_blank">
外部リンク先
</a>

以下CSSソースです。

a[target="_blank"]{
   background:transparent url(icon.gif) center right no-repeat;
   padding-right:15px;
}

２．パスを利用して、属性セレクタを使う

１．の方法では、target="_blank"を利用しましたが、XHTML1.1からは非推奨とされています。そのため、target="_blank"を使用していない方もいると思います。
その場合は、http://～あるいはhttps://～から始まるリンクに対して、背景画像としてアイコンを表示します。
しかし、内部リンクもhttp://～から書く場合があると思いますので、自サイトのドメインの場合はCSSを上書きしてアイコンを表示しないようにします。

以下(X)HTMLソースです。

<a href="http://www.sample.com">
外部リンク先
</a>

以下CSSソースです。

a[href^="http://"],
a[href^="https://"]{
   background:transparent url(icon.gif) center right no-repeat;
   padding-right:15px;
}

a[href^="http://www.coolwebwindow.com"],
a[href^="https://www.coolwebwindow.com"]{
   background:transparent;
   padding-right:0;
}

３．属性セレクタ＋after擬似要素を使う

上述の２．の場合、アイコンを背景画像として、paddingで配置を調整していたのに対して、こちらはafter擬似要素をつかうことで自動的にテキストの後ろにアイコンを表示します。

以下(X)HTMLソースです。

<a href="http://www.sample.com">
外部リンク先
</a>

以下CSSソースです。

a[href^="http://"]:after,
a[href^="https://"]:after {
   content:url(icon.gif);
}

a[href^="http://www.coolwebwindow.com"]:after,
a[href^="https://www.coolwebwindow.com"]:after {
   content:"";
}

４．個別にclassを指定する。

この書き方なら、だいたいのブラウザで表示可能です。また、個別にリンクを別ウィンドウ（あるいはタブ）で開くかどうかを指定できます。
しかし、いちいちclass指定するのが面倒という欠点もあります。

以下(X)HTMLソースです。

<a href="http://www.sample.com" target="_blank" class="link">
外部リンク先
</a>

以下CSSソースです。

.link{
   background:transparent url(icon.gif) center right no-repeat;
   padding-right:15px;
}

WindowsXPでは、上記4つの方法に対して、Firefox2、Opera9.1、NN7.1は全て対応、IE6と7（IE7のみWindowsVistaで確認）は４．の方法のみ対応でした。
確か、IE7は属性セレクタに対応していたはずなのですが、うまく表示されなかったのはなぜでしょう。もう少し、調べてみます。
IEにも対応させたい方は４．の方法が望ましいと思いますが、「無駄なソースが増えてしまう、過去のものまで対応できない」と言う方は、４．以外の方法がよろしいかと思います。

外部リンク用アイコン

で、ようやく本題ですが、その外部リンク用のアイコンを作りましたので、ご自由にお使いください。サイズは12×12pxです。一部、横幅が12px以上のものもあります。
OSがWindowsの方はイメージ画像上で、右クリックで保存してください。
商用利用も可能です。
psdファイルも置いておきますので、ご自由にカスタマイズしてください。作成したPhotoshopのバージョンは6です。

psdファイルをダウンロードする（15KB)

psdファイルをダウンロードする（17KB)

psdファイルをダウンロードする（15KB)

psdファイルをダウンロードする（15KB)

psdファイルをダウンロードする（19KB)