【プログラミング】ファビコン作るならFavicon Generator for perfect icons on all browsersがめちゃくちゃいいかも

HTMLのfavicon(タブの横に表示されるアイコン)の設定って、しょっちゅうやるわけではないのでいつも迷うんですよね。

シンプルにやるだけなら適当なサイズのpngファイルを用意して、favicon.icoを用意してHTMLに

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

と設定するだけなのですが、、、

どうしても、やるとなったらIOSやAndroidのホーム画面に設定したいし、Windowsもどうせなら設定できると嬉しい。

「safariもいつの間にかfaviconを表示できるようになったらしい、、、」

「ダークモードの対応もしないといけない」

といった過去にfaviconを設置した時から情報のアップデートされていますよね。

私はfaviconは必ずジェネレータを頼って実装するようにしています。

そして、最近知ったサイトで一番のおすすめは「Favicon Generator for perfect icons on all browsers」です。

以降では、簡単に使い方の説明をします。

realfaFavicon Generator for perfect icons on all browsersの使い方(2021年12月時点の情報です)

1. Select your Favicon Imageのボタンを押し画像を指定します。

ここで画像が小さいと大きいサイズにするようにエラーがでます。

128×128の画像を指定したら`use a picture of at least 260×260`って怒られました。

IEなど一部の対応を考慮したければ260より大きなサイズを選ぶ必要があるそうです。

このあたりを教えてくれるのもありがたいですね。

2.パラメータを調整

ここでは、アイコンの背景色、角丸の大きさなどを指定します。

また、対応ブラウザのバージョンなども指定できます。

3. Generate your Favicons and HTML codeでfaviconを生成

ボタンを押すと、favicon画像の生成とmetaタグの生成をしてくれます。

生成されたコードは入れるサイトのheadタグの中にいれましょう。

ちなみに、ブラウザやデバイスで設定したfaviconがどのように表示されるかもわかります。

Check your faviconでURLを指定しましょう。

WindowsやIOSでどのようにfaviconが表示されるかがわかるはずです。

もし、faviconの設定に困ったらFavicon Generator for perfect icons on all browsersがおすすめです！