[B! favicon] asa_ca3のブックマーク

様々なファビコンを一括生成

favicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。 favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、site-tile*、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。PWAのアイコン作成にも。 <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"> <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"> <

asa_ca3 2017/11/09

リンク

半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。

PNG32bit(24bitアルファ付き)画像では、8ビット(256階調)の透明度が各ピクセルに割り当てられていますので、ドロップシャドウの部分も綺麗に再現されます。 GIFやPNG8ではアルファ値は1ビットですのでONまたはOFFの2階調しかありません。よって、透過を活かしたアイコンが作りにくく、どうしても汚い画像になってしまいます。アイコンには 16x16 , 32x32 , 48x48 , 96x96 , 128x128 等の複数の画像を含めるようにしましょう。表示環境によって、より適した画像が表示されます。ファビコンを作成の方へ： 16x16の画像を含ませて、ファイル名をfavicon.icoに変更すれば完成です(任意のファイル名でもOK)。 favicon(ファビコン)とはウェブサイトやウェブページに関連付けられたアイコンのことです。 faviconは日本では「ファビコン」と

asa_ca3 2015/06/12

リンク

WEBサービスを利用して透過・マルチなファビコンを作成する方法

中の人5です。こんにちは。ごくたまにfavicon（ファビコン）の作成を依頼されるのですが、作成する度に調べ直しているので今回は備忘録を兼ねてファビコン（マルチアイコン）について記載したいと思います。 1つのサイズでファビコンを作成する方法はいくつも紹介されているのですが、今回は透過で且つ複数のサイズ対応したマルチアイコンが作成出来るWEBサービスに絞ってご紹介していきます。 favicon（ファビコン）とは画像はIE11 ブラウザに表示されるURLの前またはタブに付いているアイコンがfavicon（Favorite iconの略）になります。その他「お気に入り」に入れた際にも表示される等様々な場所で表示され、WEBサイトの識別に役立ちます。最近ではGIFやPNGもサポートされているブラウザが増えていますがIEではICO形式のみが対応となっている為、「ICO形式」で作成するのが一般的

asa_ca3 2015/06/12

リンク

ファビコン（favicon）とは？代表的なサイズと基本の作成方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

ファビコンはサイト閲覧時のタブ以外にも、多くの場所で使われていることがわかります。また、上記以外にも検索結果画面にも表示されるため、そのサイトを表す適切なアイコンを設定するようにしましょう。作成時のサイズは512px × 512pxのみでOK これだけサイズがあると、全て用意するのかと不安になってしまいますが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました。複数作成する必要はないので安心してください。 WordPress以外の場合 WordPressを利用しておらず上記のような自動適用の機能がない場合、またはWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。各ブラウザのファビコン表示サイズは先ほどの表の通り16px × 16px が一般的です

asa_ca3 2015/06/12

リンク

Webサイトに必要なfaviconが21個になっていた - IT探検の追憶

久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。その数、何と21個！そんなに増えていたとは。一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31