Tạo biểu tượng yêu thích [đã đóng]

95

Làm cách nào để tạo biểu tượng yêu thích cho trang web của tôi?

html  favicon 
— Ry-
nguồn
1
— Michał Perłakowski
@Gothdo Đây không phải là một bản sao! Người bạn chỉ vào IS! Cái này trước cái kia một năm rưỡi!
— Dov Miller,
5
Tôi bỏ phiếu để đóng câu hỏi này là lạc đề vì đây không phải là về lập trình mà là thiết kế web.
— Kyll
@DovMiller Câu hỏi hay hơn với các câu trả lời tốt hơn là câu hỏi nên được bỏ ngỏ.
— mbomb007

Câu trả lời:

100

Tìm kiếm về biểu tượng yêu thích, tôi phát hiện ra mình cần hơn 10 loại tệp để hoạt động trên tất cả các trình duyệt và thiết bị :(

Tôi đã rất bực mình và đã tạo trình tạo favicon của riêng mình, tạo ra tất cả các tệp này và tiêu đề HTML chính xác cho từng tệp: faviconit.com

Hy vọng la bạn se thich no.

— Eduardo Russo
nguồn
14
Ứng dụng tuyệt vời. Đây là một trong những trang web tạo favicon tốt nhất mà tôi đã thấy.
— Chris Livdahl
1
Cảm ơn, Chris! Tôi rất vui được giúp đỡ!
— Eduardo Russo
3
@EduardoRusso điều này đơn giản là tuyệt vời - cảm ơn!
— davnicwil
4
Làm tốt lắm. Hoạt động như mong đợi.
— Dilshan
1
Hoạt động tốt hơn mong đợi! Lỗi nhỏ (?): Khi sử dụng nâng cao, đường dẫn và phiên bản không được bao gồm trong browserconfig.xml. Vẫn yêu nó, mặc dù. : D
— mrjink
42

Nếu bạn đã có một hình ảnh biểu trưng mà bạn muốn chuyển đổi thành biểu tượng yêu thích, thì bạn có thể chuyển đổi nó bằng cách sử dụng http://www.favicomatic.com/ . Nó tạo ra các biểu tượng yêu thích sắc nét và tôi không phải chỉnh sửa chúng sau khi tạo. Nó sẽ tạo ra các biểu tượng yêu thích ở 16x16 và 32x32 và trích dẫn chúng: "Mọi kích thước chết tiệt, thưa ông!". Trang web cũng hỗ trợ / duy trì độ trong suốt hiện có trong một số pngs. Ngoài ra, trang web của họ trông bắt mắt và dễ sử dụng.

Ví dụ đây là một biểu trưng stackoverflow: nhập mô tả hình ảnh ở đây

Dưới đây là một số biểu tượng yêu thích được tạo:

nhập mô tả hình ảnh ở đây nhập mô tả hình ảnh ở đây nhập mô tả hình ảnh ở đây nhập mô tả hình ảnh ở đây nhập mô tả hình ảnh ở đây

Họ cũng tạo ra html cần thiết:

<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" />

Tôi đã xem khoảng 20 kết quả đầu tiên trên google và đây là kết quả tốt nhất cho đến nay.

— Jared Menard
nguồn
1
Làm cách nào để cải thiện câu trả lời này để tránh tiếp tục phản đối?
— Jared Menard
3
Tôi không biết. Câu trả lời của bạn đã làm cho việc này trở thành công việc kéo dài năm phút đối với tôi. Cảm ơn.
— andyb
1
một số người chỉ thích phản đối mà không có lý do. VẬY cần phải có chính sách chống lại nó. Btw, chúng ta có thực sự cần nhiều kích thước khác nhau không hay chúng ta 16x16 và 32x32 là vừa đủ khi trang web tạo ra
— batmaci 12/02/18
Cá nhân tôi không biết cách thực hành tốt nhất ở đây là gì. Trên trang web của tôi, tôi nghĩ rằng chúng tôi chỉ sử dụng một. Những điều này có thể hữu ích cho các ứng dụng web tiến bộ của chrome khi được kết hợp với tệp kê khai.json.
— Jared Menard
Tôi đã tìm thấy tài nguyên này trên favicomatic.com , nó được gọi là "Favicon Cheat Sheet" github.com/audreyr/favicon-cheat-sheet
— Jared Menard
20

GIMP là một chương trình tốt cho điều đó. Chỉ cần lưu hình ảnh dưới dạng PNG, sau đó thêm

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

trên <HEAD>phần của trang của bạn.

— Stefano Borini
nguồn
7
Gimp cũng cung cấp tùy chọn lưu nó dưới dạng favicon.ico, điều này sẽ giúp giảm bớt rắc rối khi thêm liên kết.
4
Đáng tiếc là các MSIE cũ (vẫn còn khá phổ biến) sẽ không chấp nhận PNG thay cho tệp có định dạng ICO "thích hợp".
— Már Örlygsson
Để ghim các trang web vào thanh tác vụ, Windows cũng yêu cầu một ico.
— Necriis
8

Bạn tạo tệp biểu tượng có kích thước 16x16 hoặc 32x32 hoặc 64x64. Đặt tên nó là favicon.ico và đặt nó trong thư mục gốc của thư mục công khai trên trang web của bạn.

Có những trang web sẽ chuyển đổi các định dạng đồ họa khác sang .ico cho bạn. I E. http://tools.dynamicdrive.com/favicon/

— Jim
nguồn
4
Ngoài ra: bạn có thể lưu tệp biểu tượng yêu thích của mình ở bất kỳ đâu nếu bạn thêm tệp <link rel="shortcut icon" href="link/to/fav.ico" />vào <head>khối trang của mình.
— Már Örlygsson
1
tools.dynamicdrive.com/favicon cũng sẽ cho phép bạn kết hợp nhiều kích thước trong một favico đó là rất tốt
— hdorio
3

Nếu bạn muốn tạo tệp .ico, bạn cũng có thể sử dụng GIMP để tạo biểu tượng yêu thích. Các trình duyệt hiện đại có thể sử dụng các tệp hình ảnh bình thường, nhưng ban đầu tôi nghĩ đó chỉ là tệp .ico. Đó là một trình chỉnh sửa hình ảnh mã nguồn mở tương tự như Photoshop. Tạo và chỉnh sửa hình ảnh có kích thước phù hợp (giả sử 32 x 32), làm phẳng thành một lớp (Trừ khi bạn muốn nhiều biểu tượng trong cùng một tệp) và lưu dưới dạng .ico. Nó sẽ định dạng nó một cách chính xác, sau đó sử dụng Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">để sử dụng nó trong trang web của bạn.

— tên lửa
nguồn
3

Tôi sử dụng chương trình Paint.net mã nguồn mở cùng với plugin Icon .

Sau đó, bạn có thể tạo và lưu hình ảnh ở định dạng .ico với tất cả các kích thước khác nhau được nhúng vào tệp .ico.

— Khóa Matthew
nguồn
Hmm, paint.net.amihotornot.com.au làm máy chủ cho plugin Biểu tượng? Đó là hợp pháp?
— RonaldB
@RonaldB vâng, đó là trang chủ của plugin đó. Miền kỳ lạ phải không
— Matthew Lock
2

Khi tạo biểu tượng yêu thích, bạn cần tính đến các yếu tố sau:

  • Các nền tảng được hỗ trợ Mười năm trước, bạn chỉ muốn hỗ trợ các trình duyệt trên máy tính để bàn và giải pháp là tạo ra favicon.icohình ảnh cổ điển . Ngày nay, bạn muốn hỗ trợ iOS (và iOS Safari) và Android (và Android Chrome). Có thể cả Windows 10 (và Edge) và Mac Book Pro Touch Bar mới (macOS Safari). Bạn không thể chỉ sử dụng một hình ảnh "một kích thước phù hợp với tất cả" nữa.
  • Thiết kế Ngay khi bạn hỗ trợ nhiều nền tảng, bạn phải đối mặt với nhiều nguyên tắc thiết kế. Ví dụ: Google đang sử dụng các biểu tượng trong suốt cho các ứng dụng gốc của riêng mình trên Android, trong khi các biểu tượng iOS không thể trong suốt. Bạn không thể chỉ sử dụng cách tiếp cận "một thiết kế phù hợp với tất cả".
  • Các biểu tượng và mã HTML đã tạo Trong hai hoặc ba năm, tài liệu tham khảo đã tạo ra càng nhiều biểu tượng càng tốt để bao gồm tất cả các trường hợp. Tôi e rằng tôi đã tạo ra xu hướng này một mình: - / Vấn đề là bạn kết thúc với 20 dòng hoặc HTML, quá nhiều. Để có một giải pháp kỹ thuật đáp ứng, bạn cần cân bằng giữa số lượng biểu tượng / HTML được tạo và các nền tảng được hỗ trợ.

Như thường lệ, bạn có thể tạo tất cả các nội dung này theo cách thủ công. Trừ khi bạn có nhu cầu rất, rất cụ thể và ngân sách, đây chắc chắn không phải là cách để thực hiện.

Cách phù hợp với hầu hết mọi người là sử dụng trình tạo favicon cho phép bạn quyết định giao diện của tất cả các biểu tượng và chăm sóc tất cả các chi tiết. Cái duy nhất làm được điều này là Real Favicon Generator . Tiết lộ đầy đủ: Tôi là tác giả của trang web này.

— philippe_b
nguồn
1

Và nếu bạn đang sử dụng asp.net, hãy thử cách này để áp dụng favicon cho trang của bạn:

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

nhưng bạn có thể tìm thêm thông tin tại đây: http://doctype.com/

— Tarik
nguồn
1
Theo lưu ý, doctype.com đã đóng cửa kể từ ngày 15 tháng 2 năm 2013. Đọc thêm về nó .
— Krease
1

Tôi tạo các biểu tượng yêu thích của mình là 16 x 16 hoặc 32 x 32 bằng Photoshop. Sau đó, tôi lưu nó dưới dạng gif và tôi sử dụng IrfanView để chuyển đổi gif thành ico.

— Max
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.