*

ファビコン(favicon.ico)の作り方と設置のメモ

公開日: : Wordpress, 未分類 ,

small__4860902802

WEBサイト用のファビコン(favicon.ico)の作成と設置方法のメモ。
iPhoneやAndroidにも対応。

3つのサイズのPNG画像を準備

favicon1
PNG24で3つのサイズのアイコン画像を作成しておく。

  • 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」を作成。
※透過はできるが、アルファ値は白くなるので、準備する画像をドットで用意。

サーバーへファビコンを設置、適用

  1. ファビコン(favicon.icon)をWEBサイトのルートに設置。
  2. <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に対応させる

apple-touch-icon

  1. 144x144pxのサイズで、 apple-touch-icon.png をファイル名とした画像を作成
  2. <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

関連記事

バックアップ機能付きのレンタルサーバーを検討してみた

レンタルサーバーでバックアップ機能のあるサービスを探してみました。 独自SSLも付けたいの

記事を読む

まだかな~ TBSラジオクラウド 2017年にアプリ配信?

ポッドキャストでの配信をやめて始めたTBSラジオクラウド。 日々楽しみにして、愛聴しています。

記事を読む

コロリポおじさんから誕生日のお祝いメッセージが届いた

コロリポおじさんからお祝いのメッセージが届いた。 メール内のURLへアクセスするとメッセー

記事を読む

【ヤフオク、ツーリング、お引越し】バイクを輸送するならどこが安い? 料金を比較してみました。

引っ越しやツーリング、またヤフオクなどのオークションで個人売買する場合に利用したいバイクの輸送サ

記事を読む

WordPressで「google-code-prettify」を使いたい

google-code-prettifyはGoogleから提供されるソースコードハイライター

記事を読む

wordpressに「Social Icons Widget」でソーシャルアイコンを表示

ワードプレスにSNSのリンクアイコンを表示するため、「Social Icons Widget」のプラ

記事を読む

【どや顔☆ペット選手権】のネコちゃん&ワンちゃんがめちゃかわいい。

photo by petorigoto.jp リクルートが運営するペットSNSの「ぺとりごと」

記事を読む

自転車を輸送するならどこが安い? 

自転車輸送の料金を比較。 オークションでの売買にも利用できるサービスで、東京~大阪間での税

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 9badge @9badge
    WEB関連の情報を更新しています。ランニングやサイクリングのスポーツやアウトドアなど興味のあることも書いています。
    メール:contact[at]9gadge.com


Copyright© 9badge.com ,2014 All Rights Reserved.
WordPress-Theme STINGER3

PAGE TOP ↑