faviconが効かない時の対処法｜favicon作成に便利なウェブサービス

faviconが効かない時の対処法

faviconはサイトのルートドキュメント直下に置かないと、faviconのパスを正しく設定しても表示されない場合があります。一度ご確認ください。

また、faviconを作成するには次でご紹介するウェブサービスを使うと便利です。無料で利用できます。

favicon作成に便利なウェブサービス

favicon作成に便利なウェブサービスをご紹介します。

「Favicon Generator」というサイトです。

faviconだけでなく、Webクリップアイコンも自動生成してくれます。

使い方は簡単です。

まず、faviconにした画像を512px x 512px程度の大きさで用意します。

アイコンをスケッチで作成

「Favicon Generator」 へアクセスして「Select your Favicon image」から、作成した画像をアップロードします。

すると、次のようにプレビュー画面が表示されます。ブラウザのfaviconだけでなく、スマホのホーム画面に追加した時の様子もプレビューしてくれます。（素晴らしい！）

プレビュー画面

この時に気になる部分があれば、ラジオボタンやスライダーを動かして修正できます。背景色なんかも変更できちゃいます。

プレビュー画面

Safariのタブ用に、フラットデザインのアイコンも生成してくれてます。

プレビュー画面

プレビューに問題なければ次へ進んで、生成されたfavicon画像ファイルをダウンロードします。また、HTMLのヘッダー内に記述するmetaタグも生成してくれてます。そちらをご自身のサイトに埋め込みましょう。

faviconの生成

最近立ち上げました 「キッチンノート」 という料理サイトで、生成されたfaviconを実装してみました。

MacBookのSafariでサイトを確認すると、次の画像のようにタブにアイコンが反映されてます。

パソコンのSafariで確認

iPhoneのSafariからWebサイトを開きホーム画面へ追加すると、指定のWebクリップアイコンが反映されました。どうやら背景透過も効くみたいですね。

Webクリップアイコン

無料で使えるfavicon生成サイト「Favicon Generator」おすすめです！

• X
• LINE
• facebook