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」オススメです！
デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。
ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。
▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。
▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説しています。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。
