Favicon 自動作成サービスサイト

Geeklog
投稿者: 表示回数2,647

写真や画像から簡単に各種faviconを作成してくれるWebサービスはこちら。

Favicon Generator

256ピクセル以上の正方形の画像をアップロードして作成します。

iPhoneやiPad、Androidで使われるWebクリップ用のアイコンもこれで一度で作成できて大変便利です。

zip形式でダウンロードしたファイルをサーバーにアップロード。header部分に同梱しているhtml形式のソースを張り付けるだけです。Geeklogの場合は、テーマのheader.thtmlに以下のように、{site_url}{xhtml}タグを追加します。

{# Favicons Generated with favicon.il.ly #}
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="{site_url}/favicon.ico"{xhtml}>
<!--[if IE]>
<link rel="shortcut icon" href="{site_url}/favicon.ico"{xhtml}>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-152.png"{xhtml}>
{# Optional: IE10 Tile. #}
<meta name="msapplication-TileColor" content="#FFFFFF"{xhtml}>
<meta name="msapplication-TileImage" content="{site_url}/favicon-144.png"{xhtml}>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{site_url}/favicon-152.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{site_url}/favicon-144.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{site_url}/favicon-120.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{site_url}/favicon-114.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{site_url}/favicon-72.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-57.png"{xhtml}>

なお、favicon.icoの作成だけは、以下のサイトのほうがきれいに作成できるようです。favicon.icoだけはこれに差し替えます

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