Tôi đang bận rộn trên một trang web WordPress và đã đến giai đoạn để thêm phần hoàn thiện, là favicon. Tôi chủ yếu là một nhà phát triển nên đồ họa và biểu tượng không phải là điểm mạnh nhất của tôi.

Các thực tiễn tốt nhất khi tạo một favicon (về kích thước, v.v., tôi đã có thiết kế)? Tôi muốn phù hợp với mọi thiết bị có thể, có thể là thiết bị di động, máy tính bảng, màn hình võng mạc, v.v. Ngoài ra tôi không muốn nó bị mờ nên tôi cần biết mật độ pixel để sử dụng và mọi thứ.

Nếu có một số ứng dụng Mac hoặc công cụ trực tuyến sẽ làm điều này cho bạn (và thực hiện đúng cách) thì cũng sẽ rất tuyệt. Nếu không, tôi biết làm thế nào để tìm đường xung quanh Illustrator và Photoshop.

Những điều cơ bản từ Favicons - Thực tiễn tốt nhất cho năm 2013 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Biểu tượng Ngói gạchicon.png (144x144)

Biểu tượng Apple Touch apple-touch-icon-preomposes.png (152x152)

Và một mánh gian lận "ám ảnh đau đớn" đối với các kích cỡ / loại favicon trên GitHub.

Luôn luôn đáng đọc: http://www.jonathantneal.com/blog/understand-the-favicon/

Bao gồm những gì?

Mức tối thiểu

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Dành cho những người ám ảnh

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico là favicon lâu đời nhất, nó đã hoạt động từ trước khi rất nhiều người đọc nó ra đời và vẫn hoạt động hoàn hảo cho đến ngày nay.

Microsoft khuyến nghị bao gồm các hình ảnh có kích thước 16x16, 32x32 và 48x48.

Cách tiêu chuẩn để xác định favicon của bạn:

<link rel="shortcut icon" href="/favicon.ico" />

Trình duyệt sẽ tìm kiếm thư mục gốc của trang web của bạn favicon.icođể bạn có thể bỏ qua liên kết. Một số trình duyệt cũ hơn sẽ được mặc định khai báo favicon.icongay cả khi có khai báo PNG có kích thước phù hợp hơn, do đó, việc để ICO không được khai báo trong thư mục gốc và khai báo các PNG có kích thước khác nhau có thể là một ý tưởng hay.

favicon.png

HTML5 đã giới thiệu sizesthuộc tính để giúp khai báo nhiều biểu tượng có kích thước. Sử dụng các PNG cụ thể cho phép bạn kiểm soát tốt hơn các kích thước được sử dụng và có nghĩa là chỉ có hình ảnh chính xác được tải.

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

• www.w3.org - HTML5 - Loại "biểu tượng"

Kích thước bạn khai báo tùy thuộc vào thiết bị bạn muốn hỗ trợ. Một số kích thước phổ biến và không phổ biến:

• 32x32
• 48x48
• 64x64
• 96x96
• Biểu tượng Cửa hàng Chrome trực tuyến 128x128
• 160x160 Chrome cho Android
• Chrome 192x192 cho Android
• Biểu tượng quay số nhanh 195x195
• Chrome 196x196 cho Android
• Biểu tượng Opera 228x228

Biểu tượng Apple Touch

Biểu tượng clip web iOS có một số kích thước cho các thiết bị và độ phân giải khác nhau. Bạn có thể chỉ định một hoặc một số biểu tượng có kích thước, nếu không tìm thấy biểu tượng nào ở kích thước phù hợp, biểu tượng chung không có kích thước khai báo sẽ được sử dụng.

Nếu không có biểu tượng nào được chỉ định bằng phần tử liên kết, iOS sẽ tìm kiếm thư mục gốc để tìm các biểu tượng có apple-touch-icontiền tố. Các thiết bị iOS không phải là (đủ lạ) các thiết bị duy nhất sử dụng các biểu tượng này (ví dụ: Android Chrome), vì vậy, khai báo chúng là tùy chọn an toàn hơn.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• Nguyên tắc giao diện con người iOS - Kích thước biểu tượng

• Thư viện nhà phát triển iOS - Chỉ định biểu tượng trang web cho Clip trên web

Gạch Windows

Các ô được sử dụng khi bạn ghim một trang web vào màn hình bắt đầu trên Windows hoặc Windows Phone và có một số kích cỡ.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Kích thước hình ảnh được đề xuất lớn hơn tên của những hình ảnh được đề xuất. Đây là các kích thước được đề xuất từ microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Màu gạch và tiêu đề

Hành vi mặc định của ô là lấy tiêu đề của ô từ <title>thẻ và tôn trọng mọi độ trong suốt của hình ảnh ô, hiển thị màu nền. Bạn có thể tùy chỉnh màu sắc và tiêu đề bằng các thẻ meta này:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

lông mày

Tất cả các msapplicationthẻ meta có thể được xóa và thay thế bằng một tệp XML trong thư mục gốc được gọi browserconfig.xml. Tệp XML sẽ trông như thế này:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Đọc thêm & Tài nguyên

• Favicon Cheat Sheet

• Favicon, Biểu tượng cảm ứng, Biểu tượng Ngói, v.v ... Bạn cần gì? - Được viết dưới dạng bài kiểm tra nhưng chứa nhiều thông tin hữu ích (và bạn chỉ có thể đọc nó dưới dạng bài viết, quên nó là bài kiểm tra)

• Cẩm nang Biểu tượng

• ImageMagick - Công cụ dòng lệnh hữu ích để chuyển đổi hình ảnh.

• RealFaviconGenerator.net - Trình tạo favicon toàn diện.

• FAVIC-O-MATIC - Trình tạo favicon toàn diện với các định dạng đầu ra dễ dàng tùy chỉnh.

Công cụ này là một siêu tiết kiệm thời gian. Hãy thử nó! Nó chăm sóc tất cả mọi thứ cho bạn.

Tải lên hình ảnh của bạn ở một cái gì đó khoảng 800px x 800px để nó đẹp và sắc nét.

http://realfavicongenerator.net/

Đồng thời thêm thẻ meta này để bạn có thể đặt tên cho biểu tượng của mình nếu một số lưu vào thiết bị iOS.

<meta name="apple-mobile-web-app-title" content="Website Name">

Mong rằng sẽ giúp!

Sử dụng tác vụ GRUNT này để tạo tất cả các biến thể có thể:

https://github.com/gleero/grunt-favicons

Tạo tất cả các biểu tượng loại và kích thước đã biết từ hình ảnh PNG. Sử dụng ImageMagick.

Đầu vào: logo vuông bằng png. Bạn cũng có thể giữ gần các tệp nguồn có tiền tố độ phân giải, ví dụ source.16x16.png.

Đầu ra:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Thêm thay đổi vào tệp html.

http://faviconit.com

sẽ tạo khoảng 15 kích thước biểu tượng khác nhau cho tất cả các thiết bị từ một PNG độ phân giải cao.

Tôi cũng đang tìm kiếm một giải pháp favicon và không muốn dựa vào bất kỳ dịch vụ web của bên thứ ba nào. Tôi không thể tìm thấy bất kỳ giải pháp chung nào có thể hoạt động như một bước xây dựng đơn giản vì vậy tôi đã tạo faviconbuild . Nó dựa trên ImageMagick để bạn có thể tải xuống phiên bản mới nhất cho hệ thống của bạn hoặc sử dụng một số bản tôi đã cung cấp trong các bản phát hành của mình .

Tôi đã phát hành nó theo giấy phép MIT để bất kỳ ai cũng có thể sử dụng nó cho mục đích thương mại hoặc cá nhân, hoặc đơn giản là lấy cảm hứng từ nó. Nếu bạn tìm thấy bất kỳ lỗi hoặc muốn gia hạn, hãy tham gia .

Tôi sẽ cập nhật trang dự án với thông tin chi tiết hơn, nhưng nó đã có một menu trợ giúp thực sự tiện dụng và tiêu chuẩn và hoạt động trên Unix, Mac và Windows.

Bạn chỉ cần chạy tập lệnh .bat hoặc .sh trong thiết bị đầu cuối của mình.

ví dụ cho Windows:

faviconbuild.bat -h

hoặc cho Unix / Mac (hoặc Windows nếu sử dụng Cygwin):

faviconbuild.sh -h

Điều này sẽ cung cấp cho bạn thông tin phiên bản cùng với các tùy chọn có sẵn. Kịch bản được thiết kế để lấy một hình ảnh đầu vào và xuất ra tất cả các hình ảnh khác nhau được yêu cầu cùng với đánh dấu html được yêu cầu để đưa vào trang web của bạn.

Đây là một ví dụ về cách tôi đang sử dụng nó trong một dự án của tôi hiện tại:

./faviconbuild/faviconbuild.sh -i ./source.png

Tôi chỉ đơn giản đặt thư mục faviconbuild vào một thư mục cụ thể của dự án để tôi không phải chạm vào các tệp dự án thực tế và dọc theo bên cạnh mà tôi đã đặt source.png. Hành vi mặc định của tập lệnh là đặt mọi thứ vào một thư mục xây dựng lồng nhau được gitignored để nó không xung đột với dự án nếu bạn đang sử dụng git.

Nếu tôi thiếu bất cứ điều gì xin vui lòng gửi một yêu cầu tính năng.

Tôi cũng có một bài viết trên blog với nhiều thông tin hơn.

Tôi hy vọng bạn thấy nó hữu dụng.

Có rất nhiều thông tin hữu ích ở đây liên quan đến kích thước favicon và máy phát điện.

Tôi có thể thêm vào cuộc thảo luận bằng cách giải thích nhu cầu thiết kế của các kích cỡ khác nhau.

Có, kích thước favicon, biểu tượng, biểu tượng và logo có thể dựa trên cùng một nghệ thuật nhưng mỗi kích thước phải được hiển thị cụ thể theo kích thước đó để xuất hiện chính xác nhất (Tôi đang nói rằng các trình tạo tự động sẽ không xử lý tốt các răng cưa và độ dốc Kích thước 16 pixel và hình ảnh được tạo tự động sẽ không được tối ưu hóa cho kích thước 128 px nếu bạn bắt đầu nhỏ hơn.

Vẽ nghệ thuật của bạn ở 128 pix hoặc bất kỳ định dạng hình vuông kích thước lớn, sử dụng tất cả các thủ thuật 3d bạn muốn. Xuất từng biểu tượng kích thước khác nhau, kiểm tra kết quả và điều chỉnh tổng thể để hoạt động tốt nhất ở kích thước đó.

Đối với 16 x 16, tôi sẽ tạo một lưới hình vuông 16x16 và tô màu chúng riêng lẻ để có quyền kiểm soát đầu ra nhiều nhất.