Standar Favicon - 2020 - svg, ico, png dan dimensi?


113

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.



3
@Sphinxxx Sebagai penulis RFG, saya perlu berterima kasih di sini :-)
philippe_b


7
Secara pribadi saya hanya akan menggunakan satu gambar PNG besar : pada 2019 semua browser modern mendukung PNG dan dapat mengubah ukurannya. Kita harus benar-benar menghentikan penyebaran favicon dan browser boikot yang tidak memenuhi standar ini. Di masa mendatang, gambar SVG tunggal juga akan baik-baik saja, tetapi saat ini tidak didukung secara luas.
collimarco

Jawaban:


185

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 .


3
@Akan ada perubahan baru-baru ini. Ini karena twist: jika Anda menempatkan ikon Anda di direktori root (mis. /favicon.ico), IE akan menemukannya sesuai kesepakatan. Dengan demikian, tidak ada deklarasi dalam kasus khusus ini. Buat favicon lagi dengan /path/to/iconssebagai jalur dan kali ini deklarasi akan ditampilkan.
philippe_b

1
@philippe_b Ah, benar, itu masuk akal! Terima kasih telah menjelaskan.
Akan

2
@Robertaker Itu benar. Ini masih di bawah dev jadi untuk saat ini browserconfig masih merupakan cara yang tepat.
philippe_b

2
Maksud Anda kemungkinan penghapusan favicon.ico? Saya perlu satu hari untuk mendapatkan dan menginstal Win XP dan Vista sehingga saya dapat menguji berbagai paket ... Musim panas ini?
philippe_b

4
orang seperti Anda tidak mendapatkan cinta yang pantas mereka dapatkan. Saya di sini untuk memberi Anda nenek yang basah, ceroboh, dengan terlalu banyak ciuman lipstik di dahi Anda. Digunakan generator Anda, pesona saya orang baik, pesona. JADI polisi terkutuk, saya mengucapkan terima kasih!
Michael Tranchida

11

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.