Saya sibuk di situs WordPress dan datang ke panggung untuk menambahkan sentuhan akhir, sebagai favicon. Saya terutama seorang pengembang sehingga gambar dan ikon bukan poin terkuat saya.

Apa praktik terbaik saat membuat favicon (dalam hal ukuran dll, saya sudah memiliki desain)? Saya ingin mengakomodasi untuk setiap perangkat yang mungkin, baik itu ponsel, tablet, retina display dll. Juga saya tidak ingin itu menjadi buram jadi saya perlu tahu apa kerapatan piksel untuk digunakan dan semuanya.

Jika ada beberapa aplikasi Mac atau alat daring yang akan melakukan ini untuk Anda (dan melakukannya dengan benar), itu akan bagus juga. Kalau tidak, saya tahu cara menemukan jalan di Illustrator dan Photoshop.

Dasar-dasar dari Favicons - Praktik terbaik untuk 2013 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

Ikon Apple Touch apple-touch-icon-precomposed.png (152x152)

Dan lembar contekan "obsesif yang menyakitkan" untuk ukuran / tipe favicon di GitHub.

Selalu patut dibaca: http://www.jonathantneal.com/blog/understand-the-favicon/

Apa yang harus dimasukkan?

Minimum

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Untuk yang Obsesif

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico adalah yang tertua dari favicons, sudah berfungsi sejak sebelum banyak orang yang membaca ini lahir dan masih berfungsi dengan baik hari ini.

Microsoft merekomendasikan untuk menyertakan gambar berukuran 16x16, 32x32 dan 48x48.

Cara standar untuk mendefinisikan favicon Anda:

<link rel="shortcut icon" href="/favicon.ico" />

Browser akan mencari direktori root situs web favicon.icoAnda sehingga Anda dapat menghilangkan tautannya. Beberapa browser lama akan default ke yang dideklarasikan favicon.icobahkan jika ada PNG berukuran lebih tepat dideklarasikan, sehingga meninggalkan ICO tidak dideklarasikan di root dan menyatakan PNG dengan ukuran berbeda mungkin merupakan ide yang baik.

favicon.png

HTML5 memperkenalkan sizesatribut untuk membantu mendeklarasikan beberapa ikon berukuran. Menggunakan PNG tertentu memberi Anda kontrol lebih besar atas ukuran yang digunakan dan berarti hanya gambar yang benar sedang dimuat.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - Jenis tautan "ikon"

Ukuran yang Anda nyatakan tergantung pada perangkat yang ingin Anda dukung. Beberapa ukuran umum dan tidak terlalu umum:

• 32x32
• 48x48
• 64x64
• 96x96
• 128x128 ikon Toko Web Chrome
• 160x160 Chrome untuk Android
• 192x192 Chrome untuk Android
• 195x195 ikon Panggilan Cepat Opera
• 196x196 Chrome untuk Android
• Ikon 228x228 Opera Coast

Ikon Apple Touch

Ikon klip web iOS hadir dalam sejumlah ukuran untuk berbagai perangkat dan resolusi. Anda dapat menentukan satu atau beberapa ikon berukuran, jika tidak ada ikon pada ukuran yang relevan ditemukan, ikon generik tanpa ukuran yang dideklarasikan akan digunakan.

Jika tidak ada ikon yang ditentukan menggunakan elemen tautan, iOS akan mencari ikon direktori root dengan apple-touch-iconawalan. Perangkat iOS bukan (anehnya) satu-satunya perangkat yang menggunakan ikon ini (Android Chrome, misalnya) sehingga menyatakannya adalah opsi yang lebih aman.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• Pedoman Antarmuka Manusia iOS - Ukuran Ikon

• Perpustakaan Pengembang iOS - Menentukan Ikon Halaman Web untuk Klip Web

Ubin Windows

Ubin digunakan saat Anda menyematkan situs web ke layar mulai di Windows atau Windows Phone dan tersedia dalam beberapa ukuran.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Ukuran gambar yang disarankan lebih besar dari nama yang disarankan gambar tersebut. Ini adalah ukuran yang disarankan dari microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Warna dan judul ubin

Perilaku standar ubin adalah untuk mengambil judul ubin dari <title>tag dan menghormati transparansi dalam gambar ubin, menunjukkan warna latar belakang. Anda dapat menyesuaikan warna dan judul menggunakan tag meta ini:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Semua msapplicationtag meta dapat dihapus dan diganti dengan file XML di folder root yang disebut browserconfig.xml. File XML akan terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Bacaan Lebih Lanjut & Sumber Daya

• Lembar Curang Favicon

• Favicons, Touch Icons, Tile Ikon, dll - Ditulis sebagai kuis tetapi berisi banyak informasi berguna (dan Anda bisa membacanya sebagai artikel, lupakan itu kuis)

• Ikon Handbook

• ImageMagick - Alat baris perintah yang berguna untuk mengonversi gambar.

• RealFaviconGenerator.net - Generator favicon yang komprehensif.

• FAVIC-O-MATIC - Generator favicon komprehensif dengan format output yang mudah disesuaikan.

Alat ini adalah penghemat waktu super. Cobalah! Ini mengurus segalanya untuk Anda.

Unggah gambar Anda sekitar 800px x 800px sehingga bagus dan segar.

http://realfavicongenerator.net/

Juga tambahkan tag meta ini sehingga Anda dapat memberi nama ikon Anda jika ada yang menyimpan perangkat iOS di sana.

<meta name="apple-mobile-web-app-title" content="Website Name">

Semoga itu bisa membantu!

Gunakan tugas GRUNT ini untuk menghasilkan semua varian yang mungkin:

https://github.com/gleero/grunt-favicons

Menghasilkan semua jenis dan ukuran ikon yang diketahui dari gambar PNG. Menggunakan ImageMagick.

Input: logo kotak di png. Anda juga dapat menyimpan dekat file sumber dengan awalan resolusi mis. Source.16x16.png.

Keluaran:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Menambahkan perubahan ke file html.

http://faviconit.com

akan membuat sekitar 15 ukuran ikon yang berbeda untuk semua perangkat dari satu PNG resolusi tinggi.

Saya juga sedang mencari solusi favicon dan tidak ingin bergantung pada layanan web pihak ketiga. Saya tidak dapat menemukan solusi generik yang akan berfungsi sebagai langkah build sederhana jadi saya membuat faviconbuild . Itu bergantung pada ImageMagick sehingga Anda dapat mengunduh versi terbaru itu untuk sistem Anda atau menggunakan beberapa yang telah saya berikan dalam rilis saya .

Saya telah merilisnya di bawah lisensi MIT sehingga siapa pun bebas untuk menggunakannya untuk penggunaan komersial atau pribadi, atau hanya mendapatkan beberapa inspirasi darinya. Jika Anda menemukan bug atau ingin memperpanjangnya, jangan ragu untuk terlibat .

Saya akan memperbarui halaman proyek dengan informasi lebih rinci, tetapi sudah memiliki menu bantuan yang sangat praktis dan standar dan berfungsi pada Unix, Mac, dan Windows.

Anda cukup menjalankan skrip .bat atau .sh di terminal Anda.

ex untuk Windows:

faviconbuild.bat -h

atau untuk Unix / Mac (atau Windows jika menggunakan Cygwin):

faviconbuild.sh -h

Ini akan memberi Anda informasi versi beserta opsi yang tersedia. Script dirancang untuk mengambil gambar input dan output semua berbagai gambar yang diperlukan bersama dengan markup html yang diperlukan untuk disertakan di situs web Anda.

Ini adalah contoh bagaimana saya menggunakannya di salah satu proyek saya saat ini:

./faviconbuild/faviconbuild.sh -i ./source.png

Saya hanya menempatkan folder faviconbuild ke folder spesifik proyek sehingga saya tidak perlu menyentuh file proyek yang sebenarnya dan di samping itu saya menempatkan source.png saya. Perilaku default skrip adalah untuk meletakkan semuanya ke folder build bersarang yang gitignored sehingga tidak berbenturan dengan proyek jika Anda menggunakan git.

Jika saya kehilangan sesuatu, harap kirimkan permintaan fitur.

Saya juga punya posting blog dengan informasi lebih lanjut.

Saya harap Anda menemukan ini berguna.

Ada banyak informasi berguna di sini mengenai ukuran dan generator favicon.

Saya dapat menambah diskusi dengan menjelaskan kebutuhan desain berbagai ukuran.

Ya ukuran favicon, ikon, simbol dan logo dapat didasarkan pada seni yang sama tetapi masing-masing harus diberikan secara khusus untuk ukuran itu agar tampak paling akurat (saya katakan bahwa generator otomatis tidak akan menangani aliasing dan gradien dengan baik di Ukuran 16 piksel dan gambar yang dibuat secara otomatis tidak akan dioptimalkan untuk ukuran 128 px jika Anda mulai lebih kecil.

Gambarlah seni Anda di 128 pix atau format persegi ukuran besar apa pun, menggunakan semua trik 3d yang Anda inginkan. Ekspor ikon ukuran yang berbeda satu per satu, periksa hasilnya dan sesuaikan master agar bekerja dengan baik pada ukuran itu.

Untuk 16 x 16 saya akan membuat kotak 16x16 kotak dan warna secara individual untuk memiliki kontrol output yang paling besar.