Logo Garden と Favicon Generator を使って最速で favicon を設定する！
こんにちは、junwatanabe72 です。
web ページを作成したらオリジナルのロゴを使って favicon を設定したいですよね。
というわけで、ロゴの新規作成から favicon の設定までをやってみました。
今回は、無料で使える「Logo Garden」と「Favicon Generator」を使用して、最速かつローコストで設定を終わらせたいと思います。
やること
- Logo Garden を使ってオリジナルのロゴを作成する。
- Favicon Generator を使用して Logo Garden で作成したロゴから favicon を生成する。
- html の head タグ内で favicon の設定をする。
実装
1.Logo Garden でオリジナルのロゴを作成する
Logo Garden とは
Web ブラウザ上で簡単にスタイリッシュなロゴが作成できるサービスです。
無料で作成でき、ライセンスフリーです。
私はアプリを作成するたびに、ここでロゴを作っています。
今まで作ってきたロゴの一覧です。全て無料で作成しました。
作り方も至って簡単。
ページ中央の「Get Started」 をクリック。
すると、ロゴ作成ページに遷移します。
画面左手の「Search Symbol」や「select a category」を使ってロゴのイメージに合うテーマを探します。
今回は、親しみやすいロゴにしたかったので「cute」で検索しました。
色の変更や文字の挿入もできますが、今回はシンプルにロゴのみとします。
メールアドレスを登録すれば、ロゴの画像をダウンロードできるようになります。
ページ中央上部にある「Edit Your Logo」をクリックすれば再編集も可能です。
2.Favicon Generator で作成したロゴの各画像データを自動生成する
Favicon Generator とは
元画像から favicon を自動生成してくれるサービスです。
各デバイスで表示できるように様々なサイズで作成してくれます。
こちらも使い方は非常にシンプルです。
画面右手にある「Select your favicon image」をクリックして favicon にしたい画像を選択します。
画像が選択されると preview ページに遷移して、作成後のイメージを作ってくれます。
画像が整形じゃない場合は、自動調整してくれるのもグットです。
問題なければページ下部の「Generate your Favicons and HTML code」をクリックしましょう。
インストールページに遷移します。
このページの「Favicon Package」ボタンを押せば、zip された画像データをインストールできます。
生成された favicon の設定タグは後ほど、head タグ内にコピペします。
3.html の head タグ内で画像データを設定する
html でページを作っている場合は、html の head タグ内に Favicon Generator で生成された favicon の設定タグをコピペすれば完了ですが、 Stackbit で作ったブログの場合、head タグの設定は「Layout.js」で行います。 また、Favicon Generator で作成した画像データは head ディレクトリに格納します。
編集するファイル：「src/components/Layout.js」
新規作成ファイル： 「public/images/head/*」
3.1 layout.js の編集
Favicon Generator で生成された favicon の設定タグをコピペして href の path だけ調整します。
完成品
まとめ
ロゴの作成から favicon 設定まで小一時間でできてしまいました！
皆さんも「Logo Garden」と「Favicon Generator」をどんどん使っていきましょう！
