今回はジェネレータを使って、簡単にファビコンを作る方法です。
インターネットでいろいろ調べていると、たくさんのジェネレータが見つかります。
無料で使えるものが多いので、知っているととっても便利。
これからこちらのブログでも、ジェネレータを使って簡単に○○出来る方法～を
記事にしていきますので、必要な方はブックマークしてみてください♪
ファビコンってなに???
ファビコン、聞いたコトがない方のために、まずは「ファビコンとは」というところから◎
ファビコンはFAVorite ICONの略だそうです。
(ブログ記事を書くようになって、自分も情報や整理できるので日々勉強になります♪)
ファビコンの具体的な例をあげると、
タブの前についていたり、
お気に入りに登録したサイトの頭についているコレをファビコンといいます。
とってもちいさなマークですが、
企業サイトや個人的なサイトでもクリエイターさんのサイトは
ファビコンまでちゃんと作ってあるものが多いので、
まだ設置していない、という方はチェックしてみてください。
ということで今回はとってもちいさなアイコン、“ファビコン”を作ってみます。
ジェネレータってなに???
ジェネレーターとは、
特別なソフトなどを使わなくても、目的の仕様に合わせて変換してくれる便利なツール
です。
今回はファビコンに特化したジェネレーター。
http://tools.dynamicdrive.com/favicon/
画像(JPG,PNG,gifなど)をアップロードすると、
ファビコン用に書き出してくれます。
さっそく、Faviconをつくってみる
1.まず素材を用意します。
SOHO-College用なのでお家のアイコンにしてみました。
私はillustrator(イラストレータ)を使ってアイコンにしてみました。
※ソフトない！という方は次回記事に書きますのでご覧下さい◎
素材を作るときのポイントは、
・単純なカタチにする（とっても小さく表示されるので）
・ビビッドな色でつくる→視認性がよくなるので◎
・16px×16pxなので、正方形にはまるようにつくる。→縦長、横長は不向きです
2.コチラにアクセス
3.「Image to create icon from:」の下のファイルを選択ボタンをクリックして、
作った素材をアップロード。
4.画面左下のCreate icon ボタンをクリック
5.すると、プレビュー画面が表示されます。
6.プレビューの下に現れる「Download Favicon」ボタンをクリック
※初めはこのボタンが隠れている時があります。画面下にスクロールしてください。
7.ファビコン用フォーマット(拡張子:ico)でダウンロードされます。
ダウンロードしたアイコンはもちろんリサイズ済み。
あとはアップロードして使うだけです◎
お好きなデザインのファビコンはできましたか？？
今回記事では割愛してしまった、
1.まず素材を用意します。
の部分。
イラストレーターやフォトショップ、ペイントソフトなどでつくってもOKですが、
ソフトを持っていない方もいらっしゃるかと思います。
このデザイン部分もジェネレータを使ってできてしまいます。
次回は、「ソフトがなくても大丈夫○Faviconをデザインする方法」を書きたいと思います
