5
7

More than 5 years have passed since last update.

ファビコンまとめ

Posted at

参考wikipedia

ファビコンって?

 favorite + icon = favicon。もともとはIEの「お気に入りに追加l」で表示される用のアイコンだった。最近のブラウザとかでは、お気に入りだけじゃなく、ページのタブとかにファビコンを読み込むがスタンダードになってきてるんで、お気に入り専用アイコンっていうもともとの意味は消えつつある。

サイトへの導入

サイト共通で使うならルートにfavicon.icoという名前で設置すればOK

ページごとに指定したいなら以下のコードを.

<link rel="shortcut icon" href="./favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico”>

準ファビコン

Webclipアイコン

<link rel="apple-touch-icon" href="webclip.png" />

※ コードの見やすさのために各アイコンは相対パスで記述していますが、万全を期すならiconのURLはドメインを含む絶対パスでの記述をおすすめします。

ファビコンファイルの作り方

サイズについて

サイズは環境によって諸々ある。面倒であれば32pxで作っとけ、みたいな感じ。

32pxで作る中で具体的に問題が出てきたら、マルチアイコンを検討。

フォーマットはicoがオススメみたい。

icoの作り方

お手軽に済ませるなら、Macの人はプレビューアプリを使ってなんとかなるようです(ちゃんと最後まで読む)。
http://www.msng.info/archives/2011/12/how-to-create-favicon-with-mac.php

参考:
http://goalist.hatenablog.jp/entry/2014/06/10/092452
http://liginc.co.jp/web/design/material/16853

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7