こんにちは。まつもとです(^^)/ （Twitter: @matsumoto_54111）
私はここ数日間、テンプレートを使ったポートフォリオの作成を行っています。
その中でfaviconの無料素材をダウンロードして使用したので、その方法を書いていこうと思います。
また、今回私が利用したサイトではダウンロードの前に画像素材の色を自分好みに変更したり、サイズを変更したりもできます。
下の順番で書いていきますので、よろしければご覧ください。(^^)
- 無料素材をダウンロードできるサイト
- このサイト便利機能（色変更・サイズ変更・画像ファイルの容量削減）
- ダウンロード後にしたこと（ICOファイルの作成・HTMLにlinkタグを追加）
無料素材をダウンロードできるサイト
無料素材がダウンロードできるサイトはいくつもありますが、今回私が利用したのは
”CMAN”というサイトです。
こちらのサイトを選んだ理由は以下の通り。
・商用利用可能
・無料でダウンロードできる
・色、サイズなどが簡単に変更できる
今回私はシンプルな画像をfaviconにしたいと思っていました。
（イニシャルの”ｍ”に少し色を付けたくらいが理想）
ただ、思い通りのものが他のサイトで見つからなかったり、見つけたとしても利用する際には画像サイトのリンクをWebページすべてに貼らなければならなかったりしました。
その点CMANでは上記のようなことは必要ないので大変助かりました。
このサイトの便利機能（色変更・サイズ変更・画像ファイルの容量削減）
さて、前述したとおり”CMAN”では自分の好みに合わせて色やサイズを変更できます。
私は今回、”ｍ”の文字を画像素材として選択し、まずは文字の色と背景色を変更しました。
上の画像のように簡単に色を指定することが出来ます。
初めは白の背景に黒の”ｍ”というとてもシンプルなものでしたが、色を変更するだけでおしゃれに見えますね。
現在作成中のポートフォリオで使っている色に合わせて、文字は#dc8ba7、背景色は#a0bbc4に設定しました。
このようにカラーコードで色を指定できるので、自分の好みに完璧に合わせることができます。
次に変更したのは画像のサイズと画像ファイルの容量です。
先ほどの画面の少し下に、「画像の加工サイトへ」というボタンがあるのでそこをおします。
するとCMANと同じ会社が運営している画像加工サイトへ移動できます。（CMAN無料画像加工サービス：https://image-convert.cman.jp/cnvComp/）
私はサイズを 100px × 100px に変更しました。
そして画像ファイルの容量もボタン1つで変更できるので、やってみました。
その後無事に画像素材をダウンロードできました。
ダウンロード後にすること（ICOファイルの作成・HTMLにlinkタグを追加）
さて、ここからは以前ブログで紹介した書籍「HTML&CSSをWebデザインが1冊できちんと身につく本（技術評論社）」で学んだことをもとに
ICOファイルを作成し、HTMLにlinkタグを追加してfaviconの設定は完了です。
ICOファイルの作成のために利用したサイトはこちらです。
FavIcon Generator
やり方は簡単でした！
①「ファイルを選択」をクリックして先ほどダウンロードした画像素材を選択
②Optionalの2つにチェックマークを入れて、「Create Icon」をクリック
③「Download FavIcon」をクリックしてダウンロード完了。作成中のポートフォリオのファイルに保存しました。
これが終わったら、最後にHTMLにlinkタグを以下のように追加します。
<link href=”./images/favicon/favicon.ico” rel=”shortcut icon“>
以上です！
ブラウザで確認したところ、きちんとfaviconが表示されていました(^^♪
おわりに
faviconの設定は案外簡単だったので驚きました。それでも結構手順があるので、自分自身も復習に使えるように備忘録に書いてみました。
少しでも誰かの役に立てれば幸いです(*^^*)
デイトラでの学習も少し進んだので、今度は進捗状況についても書こうと思います。
最後まで読んでいただいて、ありがとうございました！
