プログラミング学習備忘録

favicon用の素材を無料ダウンロード / サイズや色も変更して思い通りの画像に【プログラミング学習備忘録④】

こんにちは。まつもとです(^^)/ (Twitter: @matsumoto_54111

私はここ数日間、テンプレートを使ったポートフォリオの作成を行っています。
その中でfaviconの無料素材をダウンロードして使用したので、その方法を書いていこうと思います。

また、今回私が利用したサイトではダウンロードの前に画像素材の色を自分好みに変更したり、サイズを変更したりもできます。

下の順番で書いていきますので、よろしければご覧ください。(^^)

  • 無料素材をダウンロードできるサイト
  • このサイト便利機能(色変更・サイズ変更・画像ファイルの容量削減)
  • ダウンロード後にしたこと(ICOファイルの作成・HTMLにlinkタグを追加)

 

無料素材をダウンロードできるサイト

無料素材がダウンロードできるサイトはいくつもありますが、今回私が利用したのは
”CMAN”というサイトです。

こちらのサイトを選んだ理由は以下の通り。
・商用利用可能
・無料でダウンロードできる
・色、サイズなどが簡単に変更できる

今回私はシンプルな画像をfaviconにしたいと思っていました。
(イニシャルの”m”に少し色を付けたくらいが理想)

ただ、思い通りのものが他のサイトで見つからなかったり、見つけたとしても利用する際には画像サイトのリンクをWebページすべてに貼らなければならなかったりしました。

その点CMANでは上記のようなことは必要ないので大変助かりました。

 

このサイトの便利機能(色変更・サイズ変更・画像ファイルの容量削減)

さて、前述したとおり”CMAN”では自分の好みに合わせて色やサイズを変更できます。
私は今回、”m”の文字を画像素材として選択し、まずは文字の色と背景色を変更しました。

上の画像のように簡単に色を指定することが出来ます。
初めは白の背景に黒の”m”というとてもシンプルなものでしたが、色を変更するだけでおしゃれに見えますね。

現在作成中のポートフォリオで使っている色に合わせて、文字は#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の設定は案外簡単だったので驚きました。それでも結構手順があるので、自分自身も復習に使えるように備忘録に書いてみました。
少しでも誰かの役に立てれば幸いです(*^^*)

デイトラでの学習も少し進んだので、今度は進捗状況についても書こうと思います。

最後まで読んでいただいて、ありがとうございました!