Membuat favicon [ditutup]

95

Bagaimana cara membuat favicon untuk situs web saya?

html favicon

— Ry-
sumber

1

Kemungkinan duplikat dari Bagaimana cara menambahkan ikon tab browser (favicon) untuk situs web?

— Michał Perłakowski

@Gothdo Ini bukan duplikat! Yang Anda tunjuk IS! Yang ini mendahului itu satu setengah tahun!

— Dov Miller

5

Saya memilih untuk menutup pertanyaan ini sebagai di luar topik karena ini bukan tentang pemrograman tetapi desain web.

— Kyll

@DovMiller Pertanyaan yang lebih baik dengan jawaban yang lebih baik adalah pertanyaan yang harus tetap terbuka.

— mbomb007

100

Saat mencari tentang favicon, saya menemukan bahwa saya membutuhkan lebih dari 10 jenis file untuk bekerja di semua browser dan perangkat :(

Saya kesal dan membuat generator favicon saya sendiri, yang membuat semua file ini dan header HTML yang benar untuk masing-masing file : faviconit.com

Berharap kamu menikmatinya.

— Eduardo Russo
sumber

14

Aplikasi luar biasa. Ini adalah salah satu situs pembuat favicon terbaik yang pernah saya lihat.

— Chris Livdahl

1

Terima kasih, Chris! Saya senang membantu!

— Eduardo Russo

3

@EduardoRusso ini sangat luar biasa - terima kasih!

— davnicwil

4

Kerja bagus. Bekerja seperti yang diharapkan.

— Dilshan

1

Bekerja lebih baik dari yang diharapkan! Bug kecil (?): Saat menggunakan lanjutan, jalur dan versinya tidak disertakan dalam browserconfig.xml. Tapi tetap menyukainya. : D

— mrjink

42

Jika Anda sudah memiliki gambar logo yang ingin diubah menjadi favicon, maka Anda bisa mengubahnya menggunakan http://www.favicomatic.com/ . Ini menciptakan favicon yang tajam, dan saya tidak perlu mengeditnya setelah membuatnya. Ini akan menghasilkan favicon pada 16x16 dan 32x32 dan mengutipnya: "Setiap ukuran sialan, Pak!". Situs ini juga mendukung / menjaga transparansi yang ada di beberapa pngs. Selain itu, situs mereka terlihat keren dan mudah digunakan.

Misalnya di sini adalah logo stackoverflow: masukkan deskripsi gambar di sini

Berikut beberapa favicon yang dihasilkan:

masukkan deskripsi gambar di sini

Mereka juga menghasilkan html yang dibutuhkan:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Saya melihat 20 atau lebih hasil Google pertama, dan sejauh ini yang terbaik.

— Jared Menard
sumber

1

Bagaimana saya dapat meningkatkan jawaban ini untuk menghindari suara negatif lebih lanjut?

— Jared Menard

3

Saya tidak tahu. Jawaban Anda menjadikan ini pekerjaan lima menit bagi saya. Terima kasih.

— andyb

1

beberapa orang suka tidak suka tanpa alasan. SO perlu memiliki kebijakan yang menentangnya. Btw, apakah kita benar-benar membutuhkan banyak ukuran yang berbeda atau kita 16x16 dan 32x32 sudah cukup seperti yang dihasilkan situs web

— batmaci

Saya pribadi tidak tahu apa praktik terbaik di sini. Di situs saya, saya pikir kami hanya menggunakan satu. Ini dapat berguna untuk aplikasi web progresif chrome jika digabungkan dengan manifest.json.

— Jared Menard

Saya menemukan sumber daya ini di favicomatic.com , ini disebut "Favicon Cheat Sheet" github.com/audreyr/favicon-cheat-sheet

— Jared Menard

20

GIMP adalah program yang bagus untuk itu. Cukup simpan gambar sebagai PNG, lalu tambahkan

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

di <HEAD>bagian halaman Anda.

— Stefano Borini
sumber

7

Gimp juga menawarkan opsi untuk menyimpannya sebagai favicon.ico, yang akan menghemat masalah dalam menambahkan tautan.

4

Sayangnya, MSIE lama (yang masih cukup populer) tidak menerima PNG sebagai pengganti file berformat ICO yang "tepat".

— Már Örlygsson

Untuk menyematkan situs web ke bilah tugas, Windows juga membutuhkan ico.

— Necriis

8

Anda membuat file ikon berukuran 16x16 atau 32x32 atau 64x64. Beri nama favicon.ico dan letakkan di root folder publik situs web Anda.

Ada situs web yang akan mengonversi format grafik lain ke .ico untuk Anda. yaitu. http://tools.dynamicdrive.com/favicon/

— Jim
sumber

4

Juga: Anda dapat menyimpan file favicon Anda di mana saja jika Anda menambahkan a <link rel="shortcut icon" href="link/to/fav.ico" />ke <head>blok halaman Anda.

— Már Örlygsson

1

tools.dynamicdrive.com/favicon juga akan memungkinkan Anda untuk menggabungkan beberapa ukuran dalam satu favico yang sangat bagus

— hdorio

5

Salah satu alat favicon online terbaik adalah FaviconGenerator.com . Cepat, desain modern, tanpa bulu halus.

— Mengetuk X
sumber

1

FaviconGenerator.com juga menyediakan akses ke API mereka dari node / grunt / gulp.

— Matt

3

Jika Anda ingin membuat file .ico, Anda juga dapat menggunakan GIMP untuk membuat favicon. Browser modern dapat menggunakan file gambar normal, tetapi awalnya saya pikir itu hanya file .ico. Ini adalah editor gambar open source yang mirip dengan Photoshop. Buat dan edit gambar dengan ukuran yang tepat (katakanlah 32 x 32), ratakan ke satu lapisan (Kecuali jika Anda ingin beberapa ikon dalam file yang sama), dan simpan sebagai .ico. Ini akan memformatnya dengan benar, lalu gunakan Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">untuk menggunakannya di halaman web Anda.

— rocketmonkeys
sumber

3

Saya menggunakan program Paint.net open source bersama dengan plugin Ikon .

Anda kemudian dapat membuat dan menyimpan gambar dalam format .ico dengan semua ukuran berbeda yang disematkan ke dalam file .ico.

— Matthew Lock
sumber

Hmm, paint.net.amihotornot.com.au sebagai host untuk plugin Ikon? Apakah itu sah?

— RonaldB

@RonaldB ya itu rumah dari plugin itu. Domain aneh bukan

— Matthew Lock

2

Saat membuat favicon, Anda perlu mempertimbangkan faktor-faktor berikut:

Platform yang didukung Sepuluh tahun yang lalu, Anda hanya ingin mendukung browser desktop dan solusinya adalah membuat favicon.icogambaran klasik . Saat ini, Anda ingin mendukung iOS (dan iOS Safari) dan Android (dan Android Chrome). Mungkin juga Windows 10 (dan Edge) dan Touch Bar Mac Book Pro baru (macOS Safari). Anda tidak bisa hanya menggunakan satu gambar "satu ukuran cocok untuk semua" lagi.
Desain Segera setelah Anda mendukung banyak platform, Anda menghadapi beberapa pedoman desain. Misalnya, Google menggunakan ikon transparan untuk aplikasi aslinya sendiri di Android, sedangkan ikon iOS tidak bisa transparan sama sekali. Anda tidak bisa hanya menggunakan pendekatan "satu desain cocok untuk semua".
Ikon yang dihasilkan dan kode HTML Selama dua atau tiga tahun, referensi telah menghasilkan ikon sebanyak mungkin untuk mencakup semua kasus. Saya khawatir saya membuat tren ini sendirian: - / Masalahnya adalah Anda berakhir dengan 20-an baris atau HTML, yang terlalu banyak. Untuk mendapatkan solusi teknis yang memuaskan, Anda perlu menyeimbangkan jumlah ikon / HTML yang dihasilkan dan platform yang didukung.

Seperti biasa, Anda dapat membuat semua aset ini secara manual. Kecuali Anda memiliki kebutuhan dan anggaran yang sangat, sangat spesifik, ini jelas bukan cara yang tepat.

Cara yang tepat bagi kebanyakan orang adalah menggunakan generator favicon yang memungkinkan Anda menentukan tampilan semua ikon dan menangani semua detail. Satu-satunya yang melakukan ini adalah Real Favicon Generator . Pengungkapan penuh: Saya adalah penulis situs ini.

— philippe_b
sumber

1

Dan jika Anda menggunakan asp.net, coba cara ini untuk menerapkan favicon ke halaman Anda:

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

tetapi Anda dapat menemukan informasi lebih lanjut di sini: http://doctype.com/

— Tarik
sumber

1

Sebagai catatan, doctype.com ditutup pada 15 Februari 2013. Baca lebih lanjut tentang itu .

— Krease

1

Saya membuat favicon saya 16 x 16 atau 32 x 32 menggunakan Photoshop. Saya menyimpannya sebagai gif dan saya menggunakan IrfanView untuk mengonversi gif ke ico.

— Max
sumber