Favicon(ファビコン)とWeb Clip(アップルタッチアイコン apple touch icon)


公開日:2013年07月23日 火曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , | 閲覧数:210 | Leave a comment

地味だけど、割と目につくサイトファビコン。

今でこそ、サイト制作者は設定するのが当たり前になってますよね。

そーはいっても、まだまだデフォルトのIE(インターネットエクスプローラー)マークのサイトを見かけます。

 

別に、これがなきゃどーって言うことはない・・・

いやいや、大あり!

 

ブックマークが多くなってくると

せっかくのお気に入りのサイトを探すのが大変!

ブックマークした意味がない!なんてことに!!

 

ファビコン設定済みのサイトをブックマークすると・・・

ファビコンを設定しているサイトだと

ブックマークしてもわかりやすいし、

↓こんな風に沢山のタブを一度に開いていても一目でわかる!

一度にタブを沢山開いていても・・・

 

ファビコン設定済みのサイト(chrome) ファビコン設定済みのサイト(IE)

 

デスクトップにショートカットを作った時も・・・

デスクトップのショートカット

 

わかりやすい!!

そんなファビコンを簡単に作れるサイト様があります。

ファビコン(ファブアイコン)faviconを作ろう!

説明もわかりやすい♪

ここでは、16px*16px、32px*32px、48px*48pxと画像が3個含まれるマルチアイコンが作成できます。

ちなみに、16pxはブラウザ用、32pxはデスクトップ用、48pxはエクスプローラー用ですね。

 

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

 

表示される場所での様子も見ることができる親切設計v( ̄ー ̄)v

感謝でございます♪

 

実をいうと設置方法はとても簡単で

基本的にはWEBのルートにicoファイル(favicon.ico)を置けば認識されます。

良く見かける

は基本的には必要ありません。

ただ、ico形式でない画像を指定する場合、ルートに画像をアップロードできない時、

また、階層(ディレクトリ)ごとに違うアイコンを指定したい場合は上記で指定します。

 

ファビコンとおなじように

Appleデバイスでのブックマークアイコン(WebClip)も

↓のようにわかりやすい方がいーよねー。

アップルタッチアイコン

 

アメーバや楽天のサイトをブックマークすると

たとえ個人のブログでも一律で同じアイコンになってしまう。。。

おなじアイコンがずらずら・・・いただけません(しかたないけど)。

 

これもファビコンと同じことで、

サイトのルートディレクトリに”apple-touch-icon.png”という画像を置けば認識してくれます。

おまけに角丸やシャドーやハイライトも自動でつけてくれます。

よくあるアイコンジェネレーター(iPhone Style Icon Generatorなど)でハイライトやシャドーをつけたりガラスっぽい加工をしてる場合は、”apple-touch-icon-precomposed.png(優先されます)”というファイル名にしておきましょー

ファビコンと同じように、画像がルートに置けない人などは↓で置く場所を指定。

基本的には、アイコンをルートディレクトリに置くだけと言う手軽さ。

誰かにブックマークされる前に急いで設置してね!

参考:

複数サイズのサイトアイコン(ファビコン)を簡単作成 [ホームページ作成] All About
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | Web担当者Forum

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年07月23日 火曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , | 閲覧数:210 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA