WordPress

での

2015.2/8(sat) WordPressもくもく会vol.4

Presented by natsumiine

Favicon 設定と作り方

2

- 3 -

1. Favicon(ファビコン)とは

2. 普通(単一サイズ)のFavicon

3. マルチサイズのFavicon

4. Faviconのサイズ表

5. 画像1枚あればOK! ブラウザ上で簡単作成

6. 超簡単! プラグインを使ってWordPressにFavicon設定

7. まとめ

※本スライドには所々に甲州弁が入っています、ご了承ください。

目次

Favorite iconの略。

・ webサイトをお気に入りに登録した時や、ブラウザのタブに表示されるアイコン

・ サイトのロゴマークなどが使用される場合が多い

・ png・gif形式も使えるが、「.ico」形式が広く使われている

設定するメリット：

・ ブックマーク一覧等で見つけやすくなる

・ サイトのブランド感、完成度を上げてくれる

・ なんとなく自分のテンションが上がる

- 4 -

1. 　Favicon(ファビコン)とは

設定シナクテモOKダケド～

アッタホウガカックイイト～

Perryオモイマース！

一般的なFaviconは…

・ アドレスバーやブックマーク一覧に16×16pxで表示され、　それ以外の場所では自動的に拡大表示

・ Windowsでデスクトップにページのショートカットを置いた時にもこのFaviconが　使用される。

・ ショートカットアイコンは32×32pxのため、ジャギー(画像のフチのギザギザ)が　出てしまう。

- 5 -

2. 　普通(単一サイズ)のFavicon

Favicon内に含まれる画像は1枚だけ！

設定シナクテモOKダケド～

アッタホウガカックイイト～

Perryオモイマース！

普通のFavicon

- 6 -

てっ! Faviconって

これだけじゃねぇだけ?!

(えっ! Faviconってこれだけじゃないの？)

- 7 -

マルチサイズのFaviconっちゅーもんがあるっつこん…

(マルチサイズのFaviconっていうものがあるんですよ…)

マルチサイズのFaviconは…

・ 16×16pxの他、32×32pxや48×48pxなど複数サイズを1つにまとめたもの

・ はじめから複数サイズを用意しておけば、自動拡大・縮小を防げる

・ 自動拡大・縮小によるジャギーが出にくくなる

・ 複数サイズを1ファイルにまとめられる「.ico」形式を使う

- 8 -

3. 　マルチサイズのFavicon

Favicon内に含まれる画像は複数！

マルチサイズのFavicon

16×16 32×32 48×48

サイズ 使用箇所 サイズ 使用箇所

16×16 お気に入り、タブ、IEのアドレスバー・ピン留めサイトなど

96×96 GoogleTVのアイコン

24×24 ピン留めサイトのブラウザUI 114×114 RetinaディスプレイのiPhoneのアイコン

32×32 IEの新しいタブとタスクバーボタン 128×128 Chrome ウェブストアのアイコン

48×48 Windowsのサイトアイコン 144×144 IE10 Metroのピン留めサイトアイコン

64×64 高解像度デバイスでのWindowsのサイトアイコン

152×152 RetinaディスプレイのiPadのアイコン

57×57 iOSのホームアイコン 195×195 Operaスピードダイヤルのアイコン

72×72 iPadのホームアイコン 228×228 OperaのiPad向けブラウザ「Coast」のアイコン

引用：　スタイルブログ　 http://www.hp-stylelink.com/news/2014/02/20140213.php

- 9 -

4. 　Faviconのサイズ表

・ デバイスの多様化にともない、Faviconの用途やサイズもたくさん…

- 10 -

(っ°ﾛ°)╮-=ﾆ= 三≡’,;’;‘[Favicon]))’Д’)

こんねん大量にこせぇてられんじゃん!

(こんな大量に作ってられないよ!)

- 11 -

代表的なサイズにしぼってこせぇればいいさ♥

(代表的なサイズにしぼって作ればいいんですよ♥)

さ、ぼちっか実際にこせぇてみざぁ♥

(さ、そろそろ実際に作ってみましょう♥)

- 12 -

5. 　画像1枚あればOK!ブラウザ上で簡単作成

作成のポイント

・ 今回作るのは、「16×16」　「32×32」　「48×48」　の3サイズと、　「114×114」のRetinaディスプレイiPhone用タッチアイコン

・ 用意するのは、この中で最も大きい114×114px1枚

・ iconifier.netというサイトに画像をアップするだけでOK

http://iconifier.net/

Oh my God!!!!!!

簡単スギル…マーヴェラス !!!

- 13 -

Favicon作成の

デモでごいす

- 14 -

6. 　超簡単!プラグインを使ってWordPressにFavicon設定

設定の手順

・ まずは FaviconRotator というプラグインをインストール

・ 管理画面からアイコンをアップ…以上！

HaHaHa!!

A piece of cake!!

- 15 -

Favicon設定の

デモでごいす

・ Faviconとは、webサイトをお気に入りに登録した時や、ブラウザのタブに　表示されるアイコン

・ 単一サイズとマルチサイズのFaviconがある

・ デバイスの多様化にともない、Faviconにも色々なサイズがある

・ 代表的なサイズが含まれていればOK

・ iconifier.net のようなwebサービスを使えば簡単に作成することができる

・ WPの設定もプラグインを使えばとても簡単にできる

- 16 -

7. 　まとめ

- 17 -

下手な発表で悪かったじゃん、ご清聴おおきんよう♥

(下手な発表でごめんなさい、ご清聴ありがとうございました♥)