Dimensi favicon, format file, dan tag meta / tautan apa yang harus digunakan mulai tahun 2020? Ini termasuk ikon apel, windows, android dan perangkat lain yang digunakan orang saat ini.

Saya menggunakan Opera dan saya melihatnya mendukung format svg. Apakah ini solusi terbaik untuk menggunakan svg saat ini? Apakah ada opsi "satu file cocok untuk semua"?

Saya telah menjelajahi banyak situs web dan memeriksa "generator favicon" yang berbeda. Semuanya berumur bertahun-tahun dan sebagian besar bekerja dengan file png.

Misalnya: Kode apa yang harus digunakan untuk ico dan svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

atau haruskah dimensi ditentukan jika ico berisi lebih banyak ukuran? Saya tidak menemukan satu jawaban yang bagus.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Berikan dimensi, format file, dan tag meta / tautan dari favicons apa yang harus digunakan.

Penafian: Saya adalah penulis RealFaviconGenerator, yang saya harap akan selalu mutakhir (kebanyakan, lihat di bawah). Jadi jangan heran jika jawaban ini cocok dengan apa yang dihasilkan RFG.

Mitos satu ukuran untuk semua

Tidak ada ikon "satu ukuran cocok untuk semua". Anda tidak dapat membuat satu ikon SVG dan mengharapkannya berfungsi di mana saja.

Dari sudut pandang teknis, satu ikon SVG akan menjadi hal yang baik. Tapi dari sudut pandang UI dan UX, ini bukanlah hasil yang diinginkan. Bandingkan iOS dan Android. Di iOS, semua ikon layar beranda berbentuk kotak dengan sudut membulat ( iOS mengisi bidang transparan ikon Sentuh dengan warna hitam ). Di Android, ikon layar beranda sering kali menggunakan bentuk non-persegi dan transparansi (termasuk ikon aplikasi Google). Kirimkan ikon satu sentuhan dan Android Chrome akan menggunakannya. Tetapi Anda tidak akan dapat mencocokkan pedoman ikon Android , sedangkan ikon khusus bisa.

Jadi saya menyarankan untuk sengaja menghindari penggunaan satu ikon. Lebih baik targetkan setiap platform secara individual, jika memungkinkan (ini tidak selalu terjadi).

Ikon, platform per platform

iOS Safari

iOS Safari mengharapkan ikon sentuh . Saat ini, ini adalah gambar PNG 180x180. Gambar ini tidak boleh menggunakan transparansi dan sudutnya akan secara otomatis dibulatkan saat ditambahkan ke layar beranda. Dinyatakan dengan:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Selama bertahun-tahun, ikon ini telah menjadi "ikon resolusi tinggi default" untuk banyak browser. Jadi, Anda akan menemukannya di tempat lain, saat menambahkan ke bookmark, dll.

Android Chrome

Android Chrome mengandalkan Manifes Aplikasi Web . Meskipun manifes ini tidak didedikasikan untuk Android Chrome, saat ini manifes tersebut adalah pendukung utamanya. Jadi untuk saat ini, masih cukup aman untuk mempertimbangkan ikon dari Manifes Aplikasi Web untuk Android Chrome.

Seperti namanya, Manifes Aplikasi Web adalah untuk aplikasi web. Tetapi situs web mana pun dapat menggunakannya sebagai cara untuk mereferensikan beberapa ikon.

Android mengharapkan ikon PNG 192x192, transparansi diperbolehkan dan didorong.

Manifes dideklarasikan dengan:

<link rel="manifest" href="/icons/site.webmanifest">

Edge dan IE 12

Microsoft memperkenalkan browserconfig , dokumen XML yang mencantumkan berbagai ikon yang sesuai dengan Metro UI.

File dan warna latar belakang dideklarasikan dengan:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Browser desktop klasik

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Ini adalah hal-hal yang sedikit lebih kabur. Secara historis, ada satu favicon.icofile, masih didukung. Namun, browser terbaru lebih memilih ikon PNG, yang lebih ringan. Selain itu, beberapa browser tidak dapat memilih ikon yang sesuai di file ICO (format ini dapat menyematkan beberapa versi ikon), menyebabkan ikon resolusi rendah digunakan secara tidak benar.

Seseorang dapat tergoda untuk favicon.icosepenuhnya melepaskan yang lama . Meskipun saya ingin melakukan lompatan ini di RFG, saya tidak menjalankan tes yang diperlukan untuk mengevaluasi dampaknya pada browser lama.

Jadi, kombo yang masih saya rekomendasikan hari ini, dengan favicon.icomenyematkan ikon 16x16, 32x32, dan 48x48:

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

Browser lain

Peramban lain mungkin memiliki ikon khusus. Misalnya Coast by Opera sedang mencari ikon 228x228 . Kebutuhan untuk fokus pada browser ini tidak jelas. Mereka biasanya menggunakan ikon sentuh atau ikon lainnya jika tidak dapat menemukan ikon "mereka".

Kesimpulan

Seperti yang diumumkan di awal, inilah yang sebenarnya dibuat oleh RealFaviconGenerator .

Perlu juga disebutkan bahwa bersama dengan favicon, beberapa tag lain harus ditambahkan seperti tag OG, kartu Twitter atau aplikasi MS. Semuanya memiliki tujuan yang sama - identifikasi visual merek Anda dan juga harus disertakan.

Kartu Twitter dapat ditemukan DI SINI

Saya menambahkan tag berikut

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Saya menemukan bahwa banyak pengguna membuat gambar 1300px kali 650px dan format jpg / png.

Setelah menambahkan semua tag, mereka harus divalidasi DI SINI

Facebook OG memiliki lebih banyak opsi tetapi secara umum adalah sebagai berikut:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook merekomendasikan rasio gambar tertentu dan ukuran file dibatasi hingga 8Mb. Untuk menyimpan gambar yang mirip dengan kartu twitter saya merekomendasikan dimensi 1240px kali 650px dan format jpg / png. Facebook dan twitter tidak menerima svg ...

Saya menemukan bahwa beberapa merek global menggunakan tag ini di situs web mereka. Satu memiliki dimensi 150x150 piksel dan format png. Gambar ini dapat digunakan oleh browser untuk ditampilkan di hasil pencarian.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator juga mencakup favicon Microsoft. Ada banyak meta tag lain untuk aplikasi MS untuk mengoptimalkan halaman dan info lain seperti gambar yang ditampilkan. Topik ini juga layak dibaca.

Semoga ini bermanfaat bagi seseorang dan memperluas topik branding website Anda.