faviconにするのにちょうど良さそうな画像がたくさんあるフリー素材サイトICOON MONO

2016年9月5日

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

先日あるWebサイトを作っていて「Webサイトに合ったfaviconがないのはさみしい」と思いました。かといって、faviconぐらいの大きさの適当な画像を作れるわけもないので、ググってみました。
そして見つけたのが商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトICOON MONOです。すっきりとしたデザインのアイコン素材がたくさんあるのでちょうどいい感じのfaviconを作ることができました。ICOON MONOの素材をダウンロードして使う方法について書きます。

記事をざっと見る

商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトICOON MONO

ICOON MONO のWebサイトはこちらになります。

http://icooon-mono.com/

6000以上のアイコンがあり、使用条件に違反しない限り無料で WEBやDTPデザイン、ビジネス資料などで利用することができます。詳しい利用条件についてはこちらに書いてあります。素材を再配布とかしない限りは自由に使えそうです。

上部に並んでいるアイコンは、カテゴリーとなっているのでクリックすると、

そのカテゴリーのアイコンが一覧されます。

アイコンのダウンロード方法

アイコンをダウンロードするにはいくつかの方法があります

大きさ、色、ファイル形式を指定して保存する

使いたいアイコンをクリックして

1.サイズを指定
2.色を指定
3.ダウンロードする形式を指定

します。たとえばサイズを指定した後に

colorの数字のあたりをクリックすると

色パレットが出るので

好きな色に変更したあとに

好きな形式をクリックして、保存します。

この場合は サラリーマン.png というファイルが保存されるのでPCで開いて

素材として利用することができます。

ai や EPS などベクター素材としてダウンロードする

アイコン画面の下の方に

illustratr Ai と photoshop EPS のダウンロードボタンがあります。illustratr Ai をクリックすると、

このような画面がポップアップされます。illustratr Ai をクリックします。この場合、icon_11324ai.zip というファイルがダウンロードされました。このファイルをすべて解凍してみると icon_11324ai というフォルダに icon_11324.ai というファイルができていました。このファイルをFireWorksで開いてみると

このようにベクター素材の状態でダウンロードできるので自分で線を書き足して、

このようにすることもできます。

faviconとして使うには

WordPressでfaviconとして使う場合

WordPressでfaviconとして使う場合は画像をアップロードするだけで利用することができます。

ダッシュボード 外観＞カスタマイズ をクリックして

サイト基本情報 をクリック

サイトアイコン の 画像を選択 をクリックして

先ほどダウンロードしたサラリーマンの画像をアップします。なぜか名前が サラリーマン.png のままだとアップできなかったので sman.png に変更してからアップしました。選択をクリック。

アップされるとサイトアイコンのところにこのようにfaviconとして利用されるイメージが表示されます。

保存して公開 をクリック。

このようにfaviconとして利用されるようになりました！

WordPress以外のHTMLなどの場合

HTMLなどで、このダウンロードしてきたアイコンをfaviconとして使うには ico ファイルに変換する必要があります。
以前

[ryus_blogcard url=”https://usortblog.com//faviconmaker/”]

このブログで記事を書いた Favicon Generator でfaviconに変換してみます。

UPLOAD IMAGE の部分にダウンロードした画像を ドラッグ＆ドロップ します。（クリックしてファイルを指定してもOKです）

変換が終わると zipファイルを保存する画面になるので、保存します。zipファイルを解凍すると

このようにいろいろな大きさの画像と　.ico ファイル、HTMLファイルが入っています。HTMLファイルをブラウザで表示すると

このようにfaviconとして指定されていることがわかります。HTMLのソースを見ると、

<!-- Favicons Generated with favicon.il.ly -->
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico"/>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico"/>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="favicon-152.png"/>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="favicon-144.png"/>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon-152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon-120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png"/>
<link rel="apple-touch-icon-precomposed" href="favicon-57.png"/>

このようにいろいろなパターンでのfaviconの指定がされているのでこれをコピーするだけでOKなので便利です(^^)/