ファビコン(favicon.ico)の作り方と設置のメモ
WEBサイト用のファビコン(favicon.ico)の作成と設置方法のメモ。
iPhoneやAndroidにも対応。
3つのサイズのPNG画像を準備
- 48×48 px
- 32×32 px
- 16×16 px
3つの画像を統合して「favicon.ico」を作成
「半透過マルチアイコン、favicon.icoを作ろう!」http://ao-system.net/alphaicon/
ここのサイトを利用して3つの画像を統合。
PNG8の場合は、http://ao-system.net/favicon/ で「favicon.ico」を作成。
※透過はできるが、アルファ値は白くなるので、準備する画像をドットで用意。
サーバーへファビコンを設置、適用
- ファビコン(favicon.icon)をWEBサイトのルートに設置。
- <header>内に
<link rel=”shortcut icon” href=”http://XXXXXXX/favicon.ico” />
を追加(http~から始まるフルパスで記述)
wordpressの場合は[テーマ編集]ページへ進んで、header.phpを編集。
「shortcut icon」の記述された箇所を探して編集する。
<link rel="shortcut icon" href="<?php echo bloginfo('url'); ?>/favicon.ico" />
iphone、Androidに対応させる
- 144x144pxのサイズで、 apple-touch-icon.png をファイル名とした画像を作成
- <header>内に
<link rel=”apple-touch-icon” href=”http://XXXXX/apple-touch-icon.png” />
を追加(http~から始まるフルパスで記述)
wordpressの場合は[テーマ編集]ページへ進んで、header.phpを編集。
「apple-touch-icon」の記述された箇所を探して編集する。
<link rel="apple-touch-icon" href="<?php echo bloginfo('url'); ?>/apple-touch-icon.png" />
iphoneでアイコンの光沢効果を避けたい場合
<link rel=”apple-touch-icon” href=”http://XXX/apple-touch-icon.png” />
ではなく、
<link rel=”apple-touch-icon-precomposed” href=”http://XXX/apple-touch-icon.png” />
photo credit: pasukaru76 via photopin cc
関連記事
-
wordpressに「Social Icons Widget」でソーシャルアイコンを表示
ワードプレスにSNSのリンクアイコンを表示するため、「Social Icons Widget」のプラ
-
【どや顔☆ペット選手権】のネコちゃん&ワンちゃんがめちゃかわいい。
photo by petorigoto.jp リクルートが運営するペットSNSの「ぺとりごと」
-
バックアップ機能付きのレンタルサーバーを検討してみた
レンタルサーバーでバックアップ機能のあるサービスを探してみました。 独自SSLも付けたいの
-
まだかな~ TBSラジオクラウド 2017年にアプリ配信?
ポッドキャストでの配信をやめて始めたTBSラジオクラウド。 日々楽しみにして、愛聴しています。
-
WordPressで「google-code-prettify」を使いたい
google-code-prettifyはGoogleから提供されるソースコードハイライター
-
【ヤフオク、ツーリング、お引越し】バイクを輸送するならどこが安い? 料金を比較してみました。
引っ越しやツーリング、またヤフオクなどのオークションで個人売買する場合に利用したいバイクの輸送サ
-
自転車を輸送するならどこが安い?
自転車輸送の料金を比較。 オークションでの売買にも利用できるサービスで、東京~大阪間での税
-
コロリポおじさんから誕生日のお祝いメッセージが届いた
コロリポおじさんからお祝いのメッセージが届いた。 メール内のURLへアクセスするとメッセー