Photo by
lazy_planet
プログラミング備忘録【CSS編④】
ホームページを作ろうと思った時に始めにフロント実装をすると思いますが
タイトルのアイコンってどうやって設定するんだ？
head内の<title>にimg貼り付けるのかな？
調べてみたら結構簡単に出来ました。
作成するフォルダ内に挿入したい画像を配置する。
まずは挿入したいファイルの名前を変更します。
名前はなんでもいいみたいなんですが、予期せぬエラーを防ぐためにも
こだわりが無ければ「favicon.ico」に変更しましょう。
配置するとこのように左側に星マークがつくと思います。
これで準備は完了です。
<head>内に記述を追加する
<title>sample</title>
<link rel="icon" href="favicon.ico">これでOKです。すごく簡単に表示させることができるので
是非やってみてください。
hamlでの記述方法
ちなみにhamlで記述する場合はもう少し簡単に書けます。
= favicon_link_tag 'favicon.ico’これでOKです。
作業内容をまとめると
１．imgをimagesフォルダ内に配置する
２．imgの名前を「favicon.ico」に変更
３．linkを設定する
こんな感じですね。
ホームページを作る時にいつもの地球マークでは味気ないと思います。
こんな小さな事でも
自分で設定できる箇所が増えるとワクワクしませんか？
学習すればするほど自分の引き出しが増えていくので
プログラミングは本当に面白いと思います。
ここまで読んでいただき、ありがとうございました( ´∀｀)
Twitterでもプログラミング学習での学びや気付きを発信しています。
フォローしていただけると励みになります！