【無料】ブログのサイトアイコン（ファビコン）を作ったのでやり方をまとめておく
スポンサードリンク
テキトーにしてたサイトアイコン。ブラウザのタブの端っこに出るやつです。
ファビコンとも言います。これを気分転換に作ってみました。
素人なのでイチからデザインとかしんどいですよね。
無料で使えるWEBサービスやアプリに手伝ってもらって、
お手軽にそれっぽいものを作りましょう。
今回の完成物と条件
完成物はこちらです。Yuruku Daradaraってことでアルファベットのイニシャルです。
ボーダー背景＋文字っていうタイプのサイトアイコンを作りましょう。
やってみるに当たって決めた条件は2点。
・有料ソフトを使わない
・知識がなくてもそれなりに見える
です。それではどうぞ！
①カッコよいボーダーを作ってもらう
背景は単色でもいいけど、ボーダーにしてみよう。
ということでボーダーを作ってくれるWEBサービスを探します。
ストライプジェネレーターなるサービスです。
好きな色とボーダーの幅を設定したらカッコよく仕上げてくれます。
今回は
- stripesize50
- apacing40
- stripe orientationは左から３つ目のデザイン
という組み合わせで作ってもらいました。
でも色が決まらんなぁ、ということで次は色探し。
②カッコよい配色を教えてもらう
色はかっこいい組み合わせがあるみたいなんですが、そんな知識ありません。
これもWEBサービスに頼りましょう。
「配色 組み合わせ」とか「カラーパターン」とかで検索したら出てきますよね、例えばこれとかいいですね。
好きな色ひとつを選んで「ハーモニー」を選べばいい塩梅のバランスが導き出されるやつです。
私が使ったのがこちら。
スイススタイルカラーピッカーです。
４色の配色がズラッと並んでて、クリックしたらカラーコード（#000000とかいうやつ）がコピーされます。
文字の色まで決めれるじゃん！というのが決め手です。
私はスクショの真ん中下段の組み合わせがイカすのでこれをチョイス。
それぞれカラーコードは
- オレンジっぽい#f67944
- 青っぽい#2677bb
- 白っぽい#fbfbfb
- ブラウンっぽい#c7943e
だそうです。コピペコピペ。
①のストライプジェネレーターのカラーコードを入れるとこにオレンジと青のコードを突っ込みます。
ボーダーができました。次は文字です。
③カッコよい文字を入れてもらう
スマホアプリのPhontoを使います。
日本語の方が見た感じゆるくなるかと思いましたので、実験。
ユルさを表現しましたがちょっとイマイチ…ボツです。
やっぱり英語だ！ってことで
こんな感じ。使った英語フォントはVINCENT-REGULAR。
カレッジスポーツっぽさがいい感じですね。これで行きましょう。完成！
ここの作業は以前紹介した画像編集アプリのAdobe Spark Postでもいいんじゃないでしょうか。
こんなフォントと色はどうよ？って提案してくれる「Suggestion Wheel 」機能は便利ですよ！日本語フォントが貧弱なのが弱点ですが。
脱線 Phontoのいいところ
Phontoにはいろんなフォントがいっぱい入ってるのがいい！ってのが
一番のオススメポイントで、スマホでここまでできるのは珍しいもんです。
これに加えて、今回の作業では「中央揃え機能」があったのがとても便利でした。
こんな風に適当に文字を配置しても
「レイアウト」から、ボタンを押すだけで、自動的に真ん中に調整して配置してくれるんです。
手作業で「中心はどこかな〜」ってこまごました操作やんなくてもいいのは楽チンです。
④【はてな向け】作ったら設定しよう
画像ができたら設定です！
- ダッシュボードの「設定」をクリック
- ブログアイコンの「ファイルを選択」をクリック
- 作った画像を選択しましょう
これでOK！
まとめ
テキトーに設定してたサイトアイコン（ファビコン）ですが、いざ変えてみると結構新鮮です。
ブラウザのタブに表示されるだけじゃなくて、お気に入りバーにも出て来ますし、スマホの「ホーム画面に追加」した時もサイトアイコンが使われます。
ブログを自分色に染めたい方は個性が出せるポイントですので、ちょっといじって見ませんか？
