ホームページにファビコンを設定しよう

公開: 2015-02-17 09:20
更新: 2016-04-29 06:02

どうもこんにちは。あっきぃです。

最近また身長が伸びた気がします。小三から成長期が続いてます。

毎分0.000001cmくらい伸びてます。すごいです。誰かほめてください。

(ってことは...って計算したそこの君は理系だ!)



さてファビコンを設定したいと思います。

ブラウザのタブのタイトルの横とかに出てくる小さな画像です。




1.ファビコンの画像を用意

今はブラウザが進化しているので「.ico」なんて形式の画像は用意しないで、PNGで行きましょう。

(※IEはIE11からPNGをサポート。でもIEは滅びればいいので無視しましょう。)

ホームページにファビコンを設定しよう

サイズも勝手にリサイズしてくれるはずなので
256px*256pxくらいの大きめのを用意しました。


設定する前はこんな感じ。

なんだか味気ないですね。

ホームページにファビコンを設定しよう



2.ファビコンの記述

百聞は一見にしかず。ってな感じで、次の記述をhead内に書きます。

<link rel="shortcut icon" href="http://appstars.jp/img/icon.png">

相対パスでも大丈夫そうですが、

絶対パス(http://〜)の方がミスが少なそうです。


えいやっ

ホームページにファビコンを設定しよう

どうでしょう。
味が出ましたね。(何味だろう...)




3.Web Appのアイコンも設定

iPhoneなどでホーム画面に
Webページを追加した時に表示されるアイコンを指定出来ます。

ホームページにファビコンを設定しよう

何も設定していないとこんな感じ。

ホームページにファビコンを設定しよう

ちょっとダサいですね。



そこでこんな記述をhead内に書きましょう。

<link rel="apple-touch-icon" href="http://appstars.jp/img/icon.png">
<meta name="apple-mobile-web-app-title" content="あぷすた">

そいやっ

ホームページにファビコンを設定しよう

素敵ーっ



画像を256pxにしたのはこのためなのです。

(iPadAirで152px*152pxだからちょっと無駄にデカいかも。でもAppleが「大きいことはいいことだ」って言ってた。)



参考にしてくださいましー



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。