ファビコン・ウェブクリップアイコン | ぶぶりんのチュートリアルサイト

2015年2月10日

ファビコン(favicon)

パソコンにおいてのブックマークでのアイコンは、ファビコン(favicon)といい、ブラウザのタブに表示されているものです。

●作成方法
16x16と32x32と48x48の正方形でIllustrator・Photoshopで作り、 ファイル形式はPNG , GIF , JPG(JPEG)などで作成すること。
そして、この画像をファイル形式をiconに変換する。
利用させていただいた変換サイト:http://ao-system.net/favicon/
(参考:最近では変換前のファイル形式でもファビコン設定可能。ただ、対応問題からiconがおすすめ)

●設置方法
ファビコンは、アイコンの画像ファイルに任意のファイル名をつけて任意の場所にアップ後、head内に次の一行を追加します。
その詳細を下記に示します。

絶対パスでfavicon.icoを配置する場合:



        

相対パスでfavicon.icoを配置する場合:



参考にさせていただいたサイト:

http://ao-system.net/favicon/


(参考:最近では変換前のファイル形式でもファビコン設定可能。ただ、対応問題からiconがおすすめ)

ウェブクリップアイコン

スマートフォンにてブックマーク・ショートカットなどをした際のアイコンをウェブクリップアイコンというようです。

●作成方法
144×144以上の正方形でILLustrator・Photoshopで作る。これによって小さい場合でも縮小されるので問題ないです。 ファイル形式はPNGで作成すること。
(注意:アイコンの際に、角丸めされるので作成時注意)

●設置方法
ウェブクリップアイコンは、光沢のアリ・ナシを選ぶ事が出来ます(Androidは非対応)。 アイコンの画像ファイルに任意のファイル名をつけて任意の場所にアップ後、head内に次の一行を追加します。


光沢あり(アイコン上部に半透明の白い影あり)



光沢なし



参考にさせていただいたサイト:

http://liginc.co.jp/designer/archives/7300

© 2014-2015 ぶぶりん.