Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ファビコンまとめ

More than 5 years have passed since last update.

参考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

mikakane
PHPerです。がんばります。
http://chatbox-inc.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away