サイトを形作る要素はたくさんありますが、今回はサイトの顔でもある「ファビコン」の導入方法について紹介します。
ファビコンの作成・設置方法
自分のサイトにファビコンを設置する方法は超簡単です。
favicon generatorを使います。
favicon generatorは一枚の画像だけで数十個のファビコンを一括して生成してくれる、便利なサイトです。世の中には数多くのデバイスがあり、それぞれで必要なファビコンの大きさが違います。そのほぼ全てに適応したサイズのファビコンを瞬時に作成してくれます。作成した後は、デバイス毎にどのサイズのファビコンを表示させるかを書いたコードをheadタグ内にコピペするだけ。これだけで実装完了です。
1、700px × 700pxのファビコン用画像を準備
512px × 512px～700px × 700pxの画像が推薦サイズですが、大きい方が画質が良くなるので700px × 700pxで作成しましょう。また、画像タイプはPNG、JPG、GIFです。
2、一括生成してダウンロード
ファイルを指定して「ファビコン一括生成」を押し、生成されたら「ファビコンダウンロード」する。
3、コードをコピペ
<meta name〜>から全てのコードを選択してコピーし、<head>と</head>の間にペーストする。
これだけでファビコンを実装することができます。
ですが、ここでパス問題が発生します。
ダウンロードされたファビコンの画像は、「favicons」というフォルダに入っていますが、用意されたコードのパスは/favicons/〜となっていません、、。このままでは全てのパスの先頭にわざわざ/favicons/を書き足さないといけません。このめんどくさい問題を解決する方法がありますので紹介します。
Dreamweaverを使ってパスを一括変更する方法
解決するにはDreamweaverの自動変換機能を利用します。Dreamweaverがない場合は、面倒ですが１つ１つ書き足しましょう。
Step1、まずデスクトップにtestという名前のフォルダを作成しておきます。
Dreamweaverを起動します。
Step2、サイト→新規サイト→保存
サイト名：テスト
ローカルサイトフォルダー：「test」フォルダを指定
※ポップアップが出てもOKで進みましょう。
Step3、ファイル→新規→htmlファイル作成
タイトル：テスト
Step4、<Title>タグの上にコードをコピペして保存
名前：index.htmlで保存。
Step5、faviconsの中の画像全てをtestフォルダに移す
こんな状況↑
ファイルウィンドウの左下にある更新マークで更新すると反映されます。
Step6、サイトフォルダの上で右クリックし、新規フォルダーを作成
faviconsフォルダを作成したら更新する。
Step7、ファビコンの画像をfaviconsフォルダに入れる
ポップアップが出るので、「更新」すると、、コードが自動で書き換わります。
Step8、変更後のコードを自分のサイトにコピペ
Step9、完了
これでパスの一括変更ができました。
もちろん最初からサイトのディレクトリで行うと早いです。ここではわかりやすいように新しいディレクトリを使って説明しました。
ドリームウィーバーのめちゃくちゃ便利な機能なので、大量のパスを変更しなければいけない時は是非使ってみてください！
まとめ
ファビコンを実装するには、
・favicon generatorを使う。
・画像の保存先パスを変更したい場合はDreamweaverの自動変換機能を使うと早い。
いかがでしたでしょうか？これであなたもすぐにファビコンを実装できると思います。
頑張ってみてください！！
