Làm thế nào để sử dụng logo để tạo Favicon cho Website?

Logo đóng vai trò rất quan trọng đối với mọi công ty, nhưng liệu bạn có sử dụng nó một cách hiệu quả nhất để tự khẳng định thương hiệu của mình trên mạng hay không?

Một cơ hội mà nhiều công ty hay bỏ lỡ là họ thường không sử dụng favicon cho trang web. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách sử dụng logo để tạo ra một favicon phù hợp để tăng sự nhận biết thương hiệu và phát triển doanh nghiệp của bạn.

Favicon là gì?

Từ "favicon" là sự kết hợp của hai từ favorite (fav) và icon (icon). Đây là biểu tượng nhỏ hoặc biểu tượng hiển thị trong thanh điều hướng của trình duyệt web khi có ai đó truy cập vào trang web.

 

 

Favicons lần đầu tiên được hỗ trợ bởi Windows 5 và được phát hành bởi Microsoft vào năm 1999. Ban đầu, chúng chỉ xuất hiện khi người dùng đánh dấu trang web và lợi ích phụ là chủ trang web có thể biết bao nhiêu người đã đánh dấu chúng bằng cách xem số yêu cầu favicon.

Hôm nay, favicon tải tự động vì vậy không có cách nào để đếm số người dùng đánh dấu trang web của bạn. Tuy nhiên, favicon còn làm tăng sự công nhận thương hiệu và giúp bạn trình bày một hình ảnh trực tuyến nhất quán.

Ví dụ về Favicon.

Bây giờ chúng ta hãy nhìn vào một vài ví dụ về favicon để xem một ý tưởng về cách họ có thể giúp bạn. Đầu tiên là favicon cho Google:

 

Favicon của Google

Favicon của Google. Nguồn internet.

 

Lưu ý rằng favicon trong trường hợp này chỉ có chữ G trong một mảng các màu cầu vồng. Favicon này có nguồn gốc từ logo của Google.

Favicon của YouTube sử dụng biểu tượng phát video xuất hiện trên tất cả các video trên YouTube dưới dạng favicon:

 

Favicon trên YouTube

Favicon trên YouTube. Nguồn internet.

 

Cả hai ví dụ này minh hoạ cách bắt đầu với một biểu tượng và tinh chỉnh nó để tạo ra một favicon. Trừ khi công ty của bạn có một biểu tượng đơn giản và ngay lập tức có thể nhận biết được như Nike, có thể bạn cần phải có được một chút sáng tạo với favicon của mình.

Làm thế nào để tạo một Favicon

Bây giờ hãy nói về cách tạo favicon cho trang web. Quá trình này khá đơn giản và chúng tôi sẽ hướng dẫn bạn từng bước.

Chọn đúng kích thước cho favicon

Bước đầu tiên là chọn kích thước cho tập tin favicon và điều đó phụ thuộc vào nơi bạn sử dụng nó. Kích thước chuẩn là 16 pixel, bạn có thể sử dụng trong hầu hết các trình duyệt. Tuy nhiên, có một số lựa chọn thay thế.

Ví dụ: 57 pixel là kích thước cho biểu tượng iPod Touch và hệ thống iOS thế hệ đầu tiên. Các hệ thống mới đòi hỏi 114 pixel và 96 pixel là kích thước chuẩn cho Google TV.

Bạn có cần tất cả các kích cỡ này? Chắc là không. Chúng tôi khuyên dùng là hai kích cỡ, tiêu chuẩn 16 pixel và kích thước 128 pixel cho Google Chrome Store và những nơi khác mà bạn cần một biểu tượng lớn. Nếu bạn có kế hoạch tiếp thị ứng dụng cho người dùng iPhone, bạn cũng cần phải tạo các tệp favicon thích hợp cho những mục đích sử dụng đó.

Chọn đúng định dạng

Định dạng tệp của favicon là điều tiếp theo cần xem xét. Vì không có định dạng tiêu chuẩn duy nhất, bạn sẽ phải tạo ra hai định dạng tối thiểu:

Đầu tiên là định dạng ICO, là định dạng duy nhất được hỗ trợ bởi Internet Explorer. Nó có thể hỗ trợ nhiều kích cỡ khác nhau.

Định dạng thứ hai là định dạng PNG. Đây là một định dạng khá chuẩn cho hình ảnh và nó có thể lưu trữ favicon ở một tập tin rất nhỏ để đảm bảo thời gian tải nhanh nhất.

 

Biểu tượng con trỏ PNG.

 

Tạo một hình ảnh

Bước tiếp theo là tạo một hình ảnh. Nhìn vào logo của bạn và tự hỏi mình những yếu tố quan trọng nhất là gì? Những gì sẽ làm cho mọi người dễ nhận ra ngay lập tức?

Bởi vì favicon quá nhỏ nên bạn không thể đưa vào văn bản. Nó phải là một hình ảnh duy nhất, nổi bật và hiệu quả. Hãy xem xét từ những gì mà Google đã làm. Sử dụng một yếu tố hình ảnh dễ nhận biết và có thể tinh chỉnh màu sắc để kết hợp các màu khác từ biểu trưng của bạn.

Cách khác là đơn giản hóa hình ảnh từ trang web của bạn. Ví dụ: một công ty bất động sản có thể sử dụng một phiên bản đơn giản của ngôi nhà xuất hiện trong favicon của họ.

Tránh những sai lầm của favicon

Bây giờ chúng ta hãy nói về cách tránh một số cạm bẫy phổ biến mà các công ty thường gặp khi thiết kế favicon. Thách thức tiềm ẩn đầu tiên không phải là đơn giản hóa logo của bạn đủ để làm một favicon. Một logo quá phức tạp có thể sẽ không thể chuyển sang dạng favicon. Bạn có thể giải quyết vấn đề này bằng cách chọn phần tử hình ảnh dễ nhận biết nhất của biểu trưng làm favicon của bạn.

Bạn có thể cần phải tinh chỉnh màu sắc để đảm bảo rằng mọi người có thể nhìn thấy favicon của bạn khi nó xuất hiện.

Xuất favicon của bạn ở kích thước thích hợp để đảm bảo rằng nó đã không chuyển đổi thành một cái gì đó không thể nhận ra.

Sử dụng favicon

Một khi favicon của bạn đã được thiết kế, bước tiếp theo là sử dụng nó trên trang web của bạn. Quá trình này có hai bước: xuất favicon và dùng đoạn mã để thêm nó vào trang web của bạn.

Xuất file favicon

Xuất file favicon của bạn trong một định dạng PNG và một định dạng ICO. Tuy nhiên, có một công cụ dễ sử dụng có thể giúp bạn xuất ra cả hai dễ dàng ngay cả khi bạn không phải là người chuyên về kỹ thuật.

Để tạo tệp ICO, điều dễ dàng nhất để làm là tải phần mở rộng Iconbuilder có sẵn cho cả Photoshop và Fireworks.
Iconbuilder đi kèm với một khuôn mẫu Windows mà bạn có thể sử dụng để làm các tập tin ICO bạn cần. Bạn chỉ cần xóa các kích thước mà bạn không cần. Bạn không cần phải có bất kỳ bí quyết kỹ thuật nào để làm điều đó. Bạn có thể xem trước từng kích thước của favicon trước khi lưu nó.

Iconbuilder có khả năng tạo ra một bộ PNG cho mỗi độ phân giải bạn tạo, giúp đơn giản hóa quá trình xuất file.

Thêm Favicon mới vào trang web của bạn

Bước cuối cùng trong quá trình tạo mẫu favicon là thêm favicon mới vào trang web của bạn. Điều này có thể được thực hiện bằng cách tạo ra một đoạn mã nhúng.

Bạn nên sử dụng phần tử liên kết ở đầu mỗi trang bao gồm các thuộc tính rel="icon" và type thích hợp. Đây là một ví dụ:

Mã để chèn favicon
Mã để chèn favicon. Nguồn internet.

Cấu trúc này sẽ cho phép bạn thay đổi favicon ngay cả trên các trang web mà bạn không lưu trữ, chẳng hạn như Tumblr. Lợi ích của việc này là bạn có thể kiểm soát việc xây dựng thương hiệu của mình bất cứ nơi đâu trên website, đảm bảo rằng hình ảnh thương hiệu của bạn luôn nhất quán.

Bạn không cần phải tuân thủ bất kỳ cấu trúc đặt tên tập tin cụ thể nào khi tạo favicon cho mình, nhưng hãy chắc chắn sử dụng phần tử liên kết để ngăn trình duyệt của người dùng không phải thực hiện nhiều yêu cầu.

Một khi bạn đã thêm đường dẫn favicon vào trang web của bạn, hãy lưu các thay đổi đó tránh bị mất. Lần tiếp theo khi người dùng ghé thăm trang web của bạn là favicon mới của bạn sẽ xuất hiện trong thanh hiển thị trình duyệt của họ. Nó cũng sẽ hiện lên bên cạnh tên của trang web mỗi khi ai gõ tên miền đó.

Tạo favicon cho trang web của bạn là cách hiệu quả để củng cố thương hiệu và duy trì một hình ảnh trực tuyến nhất quán.