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

先日ある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 ファイルに変換する必要があります。
以前

先日Webサイトを作っていたときに「画像で無くて写真からfaviconを作りたいなー」と思いました。以前はフリーソフトで作っていたのですが、大きなサイズは対応していないためさて

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



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

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

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

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

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

おまけ:ICOON MONO の素材はfaviconだけでなくパワーポイントなどの文書やHTMLに利用できます

今回は主にfaviconとして使いましたが、ICOON MONO の素材は

パワーポイントなどの文書や、こんなふうに↓

今年一番のおすすめアイテム!

HTMLにも利用するといい感じですね!

色も大きさも自由に変えられて加工もできるのでいろいろな用途に使えると思います(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る