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

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

faviconが効かない時の対処法

faviconはサイトのルートドキュメント直下に置かないと、faviconのパスを正しく設定しても表示されない場合があります。一度ご確認ください。 また、faviconを作成するには次でご紹介するウェブサービスを使うと便利です。無料で利用できます。

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

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

「Favicon Generator」というサイトです。 Favicon Generator for perfect icons on all browsers

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

使い方は簡単です。

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

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

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

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

プレビュー画面
プレビュー画面

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

プレビュー画面
プレビュー画面

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

プレビュー画面
プレビュー画面

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

faviconの生成
faviconの生成

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

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

パソコンのSafariで確認
パソコンのSafariで確認

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

Webクリップアイコン
Webクリップアイコン

無料で使えるfavicon生成サイト「Favicon Generator」おすすめです! Favicon Generator for perfect icons on all browsers

関連記事

最後までご覧いただきありがとうございます!

▼ 記事に関するご質問やお仕事のご相談は以下よりお願いいたします。
お問い合わせフォーム

オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。 ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説してます。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

SEO関連のオススメ書籍