Favicon là một thành phần quan trọng của tiếp thị kỹ thuật số. Chúng hỗ trợ xác định trực quan công ty của bạn trong không gian internet rộng lớn. Trải nghiệm người dùng trên trang web của bạn có thể được nâng cao và nhận diện thương hiệu có thể được nâng cao nhờ những yếu tố nhỏ nhưng mạnh mẽ này. Trong bài đăng này, bạn sẽ tìm hiểu thêm về biểu tượng hình ảnh favicon là gì, bao gồm kích thước của chúng, cách tạo biểu tượng cho trang web của bạn bằng trình tạo, cách chúng ảnh hưởng đến SEO và cách thêm một biểu tượng bằng HTML.
Favicon là gì?
Favicon là một biểu tượng hình ảnh nhỏ có kích thước 16×16 pixel dùng làm thương hiệu cho trang web của bạn. Mục tiêu chính của nó là giúp người dùng dễ dàng tìm thấy trang của bạn hơn khi họ mở nhiều tab.
Favicon hoạt động tốt nhất dưới dạng hình ảnh đơn giản hoặc từ một đến ba ký tự văn bản do kích thước nhỏ của nó. Favicon và logo đôi khi giống nhau nhưng không nên nhầm lẫn. Biểu tượng yêu thích có thể cần phải nhỏ hơn nữa hoặc là một phần của biểu trưng ban đầu của công ty do kích thước nhỏ và độ phân giải thấp.
Bạn có thể xem biểu tượng hình ảnh Favicon ở đâu?
Biểu tượng yêu thích cho trang web của bạn có thể được đặt bên cạnh bất kỳ yếu tố nhận dạng nào. Điều này bao gồm các thanh tìm kiếm, kết quả lịch sử, ứng dụng thanh công cụ, dấu trang và tab.
Favicon có thể được tìm thấy trên:
- Thanh tìm kiếm.
- Lịch sử tìm kiếm.
- Ứng dụng thanh công cụ.
- Dấu trang.
- Đề xuất cho thanh tìm kiếm của bạn.
- Trình đơn thả xuống của dấu trang của bạn.
Bằng cách sử dụng một, bạn có thể đảm bảo rằng mọi người có thể nhanh chóng nhận ra trang web của bạn. Các biểu tượng yêu thích này có thể giúp khách truy cập trực tuyến xác định ngay các trang họ đã truy cập.
Tại sao Biểu tượng Favicon lại quan trọng?
Một bước đơn giản nhưng quan trọng trong việc thiết lập trang web của công ty là tạo một biểu tượng yêu thích. Nó mang lại cho trang web của bạn nhiều thẩm quyền hơn và nâng cao cả danh tiếng trên internet và sự tin tưởng của khách hàng tiềm năng.
Chúng phục vụ như một gợi ý trực quan ban đầu cho trang web, cho phép người dùng web nhận dạng nhanh chóng và dễ dàng, đồng thời tập hợp tất cả các yếu tố khác nhau của trình duyệt để tạo ra trải nghiệm lướt web thống nhất, có thương hiệu tốt.
Tạo Favicon
Khi tạo và thiết kế biểu tượng yêu thích cho trang web của bạn, có một số yếu tố cần xem xét. Mặc dù nhỏ bé và đơn giản, nhưng nó có thể (và phải) có tác động đáng kể. Vì khách truy cập sẽ liên kết thương hiệu của bạn với biểu tượng yêu thích của bạn, điều quan trọng là phải tạo phiên bản đẹp nhất của hình ảnh này. Để tạo biểu tượng hình ảnh yêu thích của bạn, hãy ghi nhớ những điều sau:
#1. Sử dụng không gian một cách khôn ngoan
Đôi khi, biểu tượng yêu thích không thể chỉ là bản sao thu nhỏ của logo công ty bạn. Toàn bộ kích thước của favicon của bạn phải được tính đến. Bạn nên sử dụng 16px vì tất cả các trình duyệt đều cho phép.
# 2. Sự đơn giản
Mặc dù biểu tượng yêu thích của thương hiệu đóng vai trò là biểu trưng nhưng bạn nên cố gắng giữ cho thiết kế của mình đơn giản nhất có thể. Các favicon đơn giản nhất hoạt động tốt nhất. Do kích thước nhỏ của biểu tượng yêu thích và việc sử dụng các thiết kế đơn giản, nên màu sắc rất cần thiết để thu hút sự chú ý từ khách hàng tiềm năng và tạo sự nổi bật. Biểu tượng yêu thích sẽ chỉ xuất hiện lộn xộn và vô tổ chức nếu có quá nhiều chi tiết.
#3. nhận diện thương hiệu
Biểu tượng yêu thích của bạn phải truyền đạt một cách trực quan tới người dùng những gì công ty của bạn đại diện vì đó là hình ảnh đại diện cho thương hiệu của bạn. Điều này ngay lập tức giải thích cho họ biết thương hiệu của bạn là gì và nó đạt được những gì.
Hãy cố gắng sáng tạo, mặc dù rất khó để làm điều đó với một thiết kế đơn giản và nhỏ bé như vậy.
#4. viết tắt
Tìm kiếm hình ảnh lý tưởng có thể không khả thi đối với những gì công ty của bạn làm. Sử dụng chữ cái đầu tiên trong tên công ty của bạn hoặc từ viết tắt là cách khắc phục điển hình cho việc này. Bạn cũng có thể quyết định rút ngắn tên doanh nghiệp của mình. Hãy thử một vài biến thể khác nhau và chọn một biến thể phù hợp nhất với nhu cầu của bạn.
#5. phối màu
Việc lựa chọn màu sắc cũng cần được quan tâm. Màu sắc tương phản giúp mắt dễ dàng phân biệt giữa các hình dạng và đặc điểm chính của biểu tượng yêu thích của bạn. Vì có quá ít biểu tượng yêu thích nên bạn phải đại diện cho doanh nghiệp của mình với người dùng và việc lựa chọn màu sắc có thể quan trọng. Hãy nhớ rằng mọi trình duyệt đều khác nhau một chút. Ví dụ: một số có phông nền màu xám, đen hoặc trắng sẽ được bao phủ bởi biểu tượng yêu thích của bạn.
Máy phát điện favicon
Các trình tạo favicon hàng đầu trên internet được liệt kê bên dưới. Bạn chỉ cần tải lên hình ảnh biểu tượng yêu thích của mình bằng các tính năng có sẵn cho trình tạo biểu tượng yêu thích. Sau đó, hình ảnh được phần mềm tạo chuyển đổi thành các định dạng favicon thích hợp và có thể truy cập được để tải xuống. Sẽ không mất nhiều thời gian cho quá trình này.
ICO và PNG là các định dạng tệp được chấp nhận cho favicon.
- Tất cả các trình duyệt, kể cả Internet Explorer, đều tương thích với ICO.
- Một định dạng phổ biến khác là PNG. Hạn chế chính là tệp PNG sẽ không được Internet Explorer hỗ trợ.
Lý tưởng nhất là bạn có thể lấy biểu tượng yêu thích của mình ở cả hai định dạng từ trình tạo mà bạn chọn.
#1. Favikon
Thật đơn giản để tạo một favicon trong Favikon. Để tạo một biểu tượng, chỉ cần tải lên một hình ảnh, cắt nó và lấy nó ở định dạng ICO hoặc PNG. Favikon chỉ cho phép một kích thước là 16 × 16 pixel, đây là một nhược điểm.
#2. Favicon.io
Bạn có thể tạo một favicon với Favicon.io từ đầu, một hình ảnh, một logo hoặc một biểu tượng cảm xúc. Trước khi tải xuống, bạn có thể xem nó ở ba kích cỡ khác nhau. Kết quả có sẵn để tải xuống ở định dạng ICO và PNG với nhiều kích cỡ khác nhau.
#3. Favicon.ico & Trình tạo biểu tượng ứng dụng
Bạn có thể tải lên hình ảnh PNG hoặc JPG và sử dụng ứng dụng miễn phí này để chuyển đổi nó sang định dạng ICO và PNG với nhiều kích cỡ khác nhau. Bạn sẽ lưu biểu tượng yêu thích của mình trong thư mục gốc của trang web sau khi bạn đã tạo biểu tượng yêu thích đó ở định dạng bạn muốn. Sau đó, biểu tượng yêu thích có thể được thêm vào trang web của bạn bằng cách tạo liên kết HTML trỏ đến tệp.
Điều này áp dụng cho chủ sở hữu trang web cho dù họ đã sử dụng khung phát triển như Bootstrap CSS hay đã phát triển trang web của họ từ đầu, đây là điều quan trọng cần lưu ý. Quy trình sẽ khác biệt đáng kể cho dù bạn sử dụng trình tạo trang web hay CMS như WordPress hay các lựa chọn thay thế WordPress.
Kích thước biểu tượng yêu thích
Một favicon phải có kích thước 16 × 16 pixel. Chúng hiển thị theo cách đó trong thanh địa chỉ, danh sách dấu trang và tab trình duyệt. Lý tưởng nhất là tạo favicon của bạn ở nhiều kích thước. Trên màn hình lớn hơn, bạn sẽ thấy các phiên bản được chia tỷ lệ phù hợp thay vì phiên bản 16×16 kéo dài.
Các kích thước favicon phổ biến nhất và cách sử dụng đặc biệt của chúng được hiển thị bên dưới.
- 16×16: Kích thước của favicon trình duyệt.
- 32×32: Kích thước của các biểu tượng lối tắt trên thanh tác vụ.
- 96×96: Kích thước của các biểu tượng lối tắt trên màn hình.
- 180×180: Kích thước của các biểu tượng cảm ứng của Apple.
- 300×300: Kích thước mà Squarespace yêu cầu.
- 512×512: Kích thước mà WordPress yêu cầu.
Favicon có quan trọng đối với SEO không?
Mặc dù favicon không chịu trách nhiệm trực tiếp về SEO của bạn, nhưng chúng chịu trách nhiệm gián tiếp và là một kỹ thuật quan trọng để nâng cao vị trí công cụ tìm kiếm của bạn. Dưới đây là một số ví dụ về cách sử dụng biểu tượng yêu thích có thể cải thiện SEO của bạn:
#1. Các trang web thân thiện với người dùng dẫn đến việc sử dụng tăng lên
Khả năng sử dụng trang web của bạn gián tiếp nâng cao xếp hạng công cụ tìm kiếm của nó. Bằng cách làm cho trang web của bạn dễ dàng xác định và điều hướng, một biểu tượng yêu thích trên tab trình duyệt, dấu trang, lưu trữ lịch sử và những nơi khác giúp tiết kiệm thời gian cho người dùng của bạn và tăng khả năng họ sẽ tương tác với trang web của bạn.
Do đó, nhiều người sẽ truy cập trang web của bạn trong thời gian dài hơn, điều này sẽ làm tăng lưu lượng truy cập và thúc đẩy SEO của bạn.
#2. Dấu trang
Bạn có lợi thế hơn các trang web không có favicon. Đối với các trang web đã được đánh dấu trang trực tuyến, trình duyệt Google Chrome sẽ tính đến các yếu tố xếp hạng tìm kiếm nhất định. Nếu không có biểu tượng yêu thích, trang web của bạn có thể không được đánh dấu trang trên trình duyệt Chrome, đây sẽ là một trong nhiều tín hiệu gián tiếp được sử dụng để xác định xếp hạng tìm kiếm.
Ngoài ra, việc trang web của bạn được đánh dấu trang và sau đó nổi bật một cách trực quan trong danh sách dấu trang đó nhờ biểu tượng yêu thích của bạn sẽ tăng khả năng người dùng quay lại trang web đó. Tất cả điều này cải thiện SEO và khách truy cập vào trang web của bạn.
#3. Thương hiệu và khả năng hiển thị
Người dùng sẽ liên kết thương hiệu của bạn với biểu tượng yêu thích của bạn vì nó là hình ảnh đại diện cho trang web và công ty của bạn. SEO là tất cả về tiếp thị và xây dựng thương hiệu, và càng nhiều khách truy cập có thể xem trang web của bạn và nhớ đến bạn, thì càng có nhiều khả năng họ sẽ nhấp vào trang web đó.
Cách thêm Favicon trong HTML
Khi favicon của bạn đã được tạo, bạn phải hướng dẫn trình duyệt và các ứng dụng dựa trên web khác tìm thấy nó ở đâu. Bạn phải đạt được điều này bằng cách bao gồm một dòng mã trong khu vực có liên quan của tệp HTML của bạn.
Ví dụ: giả sử bạn đã lưu tệp PNG của mình dưới dạng “favicon.ico”. Sau đó, chèn đoạn mã sau vào giữa mỗi r </head> thẻ:
Xin lưu ý rằng mặc dù theo thông lệ, biểu tượng yêu thích của bạn không nhất thiết phải nằm trong thư mục gốc của trang web. Chỉ cần đảm bảo rằng thuộc tính href là chính xác nếu bạn đã lưu nó ở nơi khác. Bạn sẽ gõ vào nếu bạn đã lưu nó vào thư mục con “hình ảnh”.
Hãy tưởng tượng rằng bạn đã tạo ra nhiều kích thước favicon khác nhau. Bằng cách bao gồm một dòng mã cho mỗi kích thước trong khu vực có liên quan của tệp HTML của bạn, bạn có thể tải tất cả chúng trên trang web của mình.
Chẳng hạn, bạn sẽ thêm dòng mã sau để tạo phiên bản 16×16, 32×32, 48×48 và 180×180:
Tôi sử dụng định dạng nào cho Favicon?
Hiện tại có một số tùy chọn định dạng khác, trái ngược với tùy chọn trước đó khi biểu tượng yêu thích phải ở định dạng Windows ICO. Dưới đây là một cái nhìn sâu hơn về từng người trong số họ:
- Windows ICO: ICO cho đến nay là loại tệp được hỗ trợ phổ biến nhất. Ưu điểm của ICO là nó có thể hỗ trợ các độ phân giải và độ sâu bit khác nhau, hoạt động xuất sắc và đặc biệt hữu ích cho Windows. Ngoài ra, ICO cung cấp biểu tượng 32 pixel cho thanh tác vụ Windows 7 hoạt động với Internet Explorer. Ngoài ra, đây là định dạng duy nhất bỏ qua phần tử.
- PNG: Có một số cách sử dụng định dạng PNG. Tệp PNG có thể được tạo mà không cần phần mềm bổ sung, làm cho nó cực kỳ thân thiện với người dùng. Kích thước tệp ngắn nhất được cung cấp và độ trong suốt alpha được hỗ trợ. Tuy nhiên, một nhược điểm đáng kể của thiết kế này là Internet Explorer chỉ hỗ trợ các tệp ICO và sẽ không mở các tệp PNG.
- SVG: Định dạng này có thể được sử dụng và được hỗ trợ bởi các trình duyệt Opera.
- GIF: Ngoài khả năng tương thích với các trình duyệt cũ hơn, định dạng này không có lợi thế. Mặc dù chúng sẽ khiến người dùng chú ý hơn, nhưng chúng cũng có xu hướng gây khó chịu và niềm tin áp đảo là chúng không có lợi chút nào.
- JPG: Mặc dù JPG có thể được sử dụng, nhưng nó ít phổ biến hơn và không cung cấp cùng mức chất lượng độ phân giải như PNG. JPEG cũng mất hết lợi thế do kích thước khiêm tốn của favicon.
- APNG: Đây là một biến thể hoạt hình của PNG và mặc dù Firefox và Opera có thể hỗ trợ nó, nhưng nó có nhược điểm giống như GIF động về việc làm người xem mất tập trung vào giao diện của chúng.
Làm thế nào để tôi có được một Favicon?
Để thêm biểu tượng yêu thích vào trang web của bạn, hãy lưu hình ảnh trong thư mục gốc của máy chủ web của bạn hoặc trong một thư mục mới có tên là ảnh mà bạn tạo trong thư mục gốc. “favicon.ico” là tên điển hình cho hình ảnh favicon.
Favicon được sử dụng để làm gì?
Nâng cao trải nghiệm người dùng. Chức năng chính của favicon là giúp người dùng dễ dàng nhận ra ngay một trang khi họ mở nhiều tab trong cùng một cửa sổ trình duyệt. Người dùng có thể nhanh chóng nhận ra và truy cập trang web của bạn nếu bạn tạo một trang có biểu tượng yêu thích.
Favicon có giống với logo không?
So với logo, favicon về cơ bản rất nhỏ. Là favicon, một số công ty sử dụng phiên bản thu nhỏ của logo của họ, tuy nhiên, điều này không phải lúc nào cũng hiệu quả. Phần lớn các logo sử dụng hình ảnh và văn bản, nhưng favicon quá nhỏ để chứa chúng.
một ví dụ về một favicon là gì?
Biểu tượng yêu thích của chúng tôi là chữ P ưa thích có thể được nhìn thấy trên tab ở bên trái của thanh URL trên trang web ProCreator.
Tôi có thể sử dụng logo của mình làm biểu tượng yêu thích không?
Đúng. Là favicon, hầu hết các trang web thường sử dụng logo của họ. Bạn có thể dễ dàng tạo logo cho trang web của mình bằng trình tạo logo miễn phí nếu trang web chưa có.
Các quy tắc cho favicon là gì?
Hướng dẫn tạo Favicon tuyệt vời:
- Đảm bảo tính đơn giản.
- Giữ sự quen thuộc.
- Sử dụng càng ít văn bản hoặc chữ càng tốt.
- Xem xét màu sắc.
Kết luận
Mặc dù có kích thước nhỏ nhưng favicon có tác động lớn. Favicon rất quan trọng đối với sự thành công của công ty bạn trong thế giới kỹ thuật số có nhịp độ nhanh ngày nay vì chúng cung cấp cho trang web của bạn một bản sắc trực quan trực tuyến và giúp tạo ra trải nghiệm người dùng tốt nhất có thể. Phần hay là việc tạo favicon rất đơn giản.
Bài viết liên quan
- CÁCH ĐÁNH DẤU: Cách nhanh chóng và đơn giản nhất để đánh dấu bất kỳ trang nào
- 2 cách nhanh chóng để cập nhật tệp PDF cũ của bạn
- QUẢNG CÁO BANNER: Cách hoạt động với các ví dụ
- LIÊN KẾT LOGO: Ý nghĩa, Lịch sử, Phông chữ và Ảnh hưởng Thiết kế
dự án
