Membuat favicon [ditutup]

Question 1

Bagaimana cara membuat favicon untuk situs web saya?

Question 2

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.

Question 3

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.

Question 4

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.

Question 5

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/

Question 6

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

Question 7

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.

Question 8

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.

Question 9

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.

Question 10

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/

Question 11

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.

Answer 1 · 22-12-2016 01:47: 31Z

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

Answer 2

1

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

Michał Perłakowski

Answer 3

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

Dov Miller

Answer 4

5

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

Kyll

Answer 5

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

mbomb007

Answer 6

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

Answer 7

14

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

Chris Livdahl

Answer 8

1

Terima kasih, Chris! Saya senang membantu!

Eduardo Russo

Answer 9

3

@EduardoRusso ini sangat luar biasa - terima kasih!

davnicwil

Answer 10

4

Kerja bagus. Bekerja seperti yang diharapkan.

Dilshan

Answer 11

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

Answer 12

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.

Answer 13

1

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

Jared Menard

Answer 14

3

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

andyb

Answer 15

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

Answer 16

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

Answer 17

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

Jared Menard

Answer 18

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

Answer 19

7

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

Answer 20

4

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

Már Örlygsson

Answer 21

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

Necriis

Answer 22

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

Answer 23

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

Answer 24

1

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

hdorio

Answer 25

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

Answer 26

1

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

Matt

Answer 27

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.

Answer 28

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

Answer 29

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

RonaldB

Answer 30

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

Matthew Lock

Answer 31

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.

Answer 32

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

Answer 33

1

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

Krease

Answer 34

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

Membuat favicon [ditutup]

Jawaban: