サイトの一覧を文字だけじゃなくて
・[アイコン] サイト名１
・[アイコン] サイト名２
…
のように表示したいと思いました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(function()
{
// id 用
var count = 0 ;
// class : list の値を全取得して、反復
$("a.list").each(function()
{
// リンクをとってきて、http～最初のスラッシュまでを切り取る($1 = http, $2 = //＋最初のスラッシュ
var fav = $(this).attr("href").replace(/^(http:{1}|https:{1})(\/\/{1}[^\/]+)(.*)$/, '$1$2') + '/favicon.ico' ;
// ↑を加工してイメージとして記述していく
$("#id" + count).html("<img src=\"" + fav + "\" style=\"height:20px;width:20px;margin:0px 3px 0px 0px;\" />") ;
count++ ;
}) ;
}) ;
</script>
<title>タイトル</title>
</head>
<body>
<header id="header_area"></header>
<div id="main_contents">
<ul style="list-style-type: none;">
<!-- ここにサイトを記述してく -->
<li><span id="id0"></span><a class="list" href="https://www.google.co.jp/">google</a></li>
<li><span id="id1"></span><a class="list" href="http://www.yahoo.co.jp/">yahoo! japan</a></li>
<li><span id="id2"></span><a class="list" href="https://hacknote.jp/">hacknote</a></li>
</ul>
</div>
<footer id="footer_area"></footer>
</body>
</html>
