05
June
PC用のfaviconとスマホ用のウェブクリップアイコンを作る ワードプレス
このサイトのかたは他の記事でも説明が丁寧でわかりやすいのでとても参考になります。
1枚の画像から一括で色んなサイズを書き出してくれるという
外国のサイトがエラー吐いて使えませんでした。
http://www.allthefavicons.com/
しょうがないので日本の有名なサイトを使います
http://ao-system.net/favicon/index.php
始めは1枚の作った大きなアイコン画像で全部のサイズに当てはめましたが、
やっぱり縮小で汚くなるので、写真とかじゃない限り各サイズ作ったほうが綺麗です。
16x16
32x32
48x48
150x150（スマホ）
を作りました。
16、32、48は上記サイトの「参照」ボタンのところへドラッグドロップでいけます。
favicon.icoが簡単に仕上がりました。
スマホウェブクリップアイコンは「任意の名前.png」で使います。
favicon.icoのアップロード場所ですが、通常のサイトの場合は「index.htmlと同じ階層に置く」、
とよく言われてます。今までもそういうふうに作ってきました。
しかしWPで検索すると「imagesフォルダに入れます」なんてのがたくさんでてきました。
どっちが正解なのかわからない･･･。
結局私は theme/自テーマ名/favicon.ico にしました。
なんか不具合起こったら theme/自テーマ名/images/favicon.ico にします。
ウェブクリップアイコンもルートさえあってればどこでもいいんじゃないでしょうか
私はテーマのimagesフォルダにいれました。
次にコードをheader.phpの<link rel=”～～”>が各種並んでるところに貼り付けます。
スマホサイトは別テーマでやってるため、スマホテーマheader.phpに
スマホウェブクリップアイコンコードを貼り付けました
PC用faviconコード
親テーマ使用
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
子テーマ使用
今まで <?php bloginfo( ‘stylesheet _url’ ); ?> を見てきて書いてました<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">
スマホ用ウェブクリップコード
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/任意のファイル名.png"><link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/任意のファイル名.png">アイコンに光沢あり rel="apple-touch-icon"
アイコンに光沢なし rel="apple-touch-icon-precomposed"
光沢ありだと色合いが薄くなるので、それ前提に作ってないのでナシにしてます
これ見てふと思いました。
http://mypacecreator.net/blog/archives/642/2
bloginfoは古い記述だそうです。WPのタグの変遷なんて知らなかったです･･･
htmlのタグレベルの長期間に渡る変遷ならともかく、WPは短期間でこういうふうに
非推奨に変わるから嫌です。
PR