Favicon ngày càng trở lên quan trọng, hầu hết các thiết kế website lớn đề có favicon. Vậy Favicon là gì? Làm sao để tạo favicon cho website? Hãy cùng Mdigital tìm hiểu về Favicon và cách tạo Favicon cho website đơn giản nhất.
Những điều cần viết về favicon website
Favicon là gì?
Favorite Icon, hay gọi tắt là Favicon. Đây là một hình ảnh thu nhỏ nằm trước tiêu đề website. Khi bạn truy cập vào một trang web nào đó, nếu để ý một chút bạn sẽ thấy biểu tượng này nằm ở góc trái thanh Tabar của trình duyệt web.
Có thể nói, favicon giống như một logo thu nhỏ giúp người dùng nhận ra thương hiệu của bạn giữa một rừng website.
Ví dụ về Favicon hay nhất
Có rất nhiều biểu tượng favicon đẹp, trong nội dung này thì mình sẽ lấy ví dụ về các biểu tượng thuộc về các dịch vụ khác nhau của Google. Bạn có thể thắc mắc tại sao cụ thể là Google? Họ sử dụng phong cách favicon tương tự cho tất cả các dịch vụ. Và mình muốn nhấn mạnh sự đơn giản trang nhã của hình thức và màu sắc của họ.
Favicon của Google có thể được coi là một trong những ví dụ điển hình về cách bộ favicon có thể tuân theo cùng một phong cách và khái niệm, kết hợp các yếu tố tương tự nhưng vẫn có đủ các tính năng cụ thể để phân biệt từng dấu hiệu. Nó không chỉ là một tập hợp các yếu tố phụ mà là một bố cục rõ ràng.
Mọi người có nhiều khả năng hiểu ý tưởng và thông điệp mà thương hiệu muốn chia sẻ với sự trợ giúp của favicon khi cấu trúc rõ ràng và đơn giản. Trong ví dụ về favicon dưới đây, bạn không chỉ thấy một biểu tượng mà còn thấy một thành phần có cấu trúc. Khi bạn tạo favicon tuân theo một số quy tắc, bạn có thể thiết kế một hình ảnh dễ cảm nhận và ghi nhớ.
Tác dụng của Favicon đối với website và doanh nghiệp
Favicon chính là biểu tượng nhận diện cho website hoặc một thương hiệu nào đó. Giữa thời đại nhà nhà đều có website như hiện nay thì biểu tượng này sẽ giúp người dùng phân biệt các trang web với nhau. Như vậy, người dùng dễ dàng nhận biết được trang web mình đang là gì, tránh nhầm lẫn.
Ngoài ra, favicon còn là một trong những yếu tố giúp Google đánh giá cao website của bạn. Đây cũng chính là một tiêu chí đánh giá SEO của SEOquake. Google sẽ đánh giá cao những trang web có favicon và đánh giá thấp những trang không có favicon.
Facvicon còn có tác dụng tăng nhận diện thương hiệu, truyền thông quảng bá cho doanh nghiệp khi bạn phát triển nhiều website có cùng một favicon.
Mẹo thiết kế Favicon
Bạn đang băn khoăn về cách tạo favicon độc đáo phù hợp với thiết kế trang web của mình? Favicon là hình ảnh đầu tiên mà người dùng nhìn thấy khi truy cập vào trang web của bạn. Sau đây là các mẹo thiết kế giúp bạn dễ dàng tạo được một favicon hoàn hảo.
Giữ cho nó đơn giản và sử dụng đúng canvas
Một biểu tượng nhỏ có nhiều yếu tố có thể trông lộn xộn và gây khó chịu cho khách truy cập. Do đó, sự đơn giản chính là một trong những cách tiếp cận tốt nhất. Tuy nhiên, nếu bạn sử dụng logo, hãy lưu ý rằng canvas của nó có dạng hình vuông.
Chọn màu sắc phù hợp
Chọn màu cho favicon, hãy chú ý đến những màu tương phản như màu vàng và xanh lam, đen và trắng và các màu khác. Favicon có độ phân giải nhỏ và người dùng sẽ dễ dàng cảm nhận các hình dạng và màu sắc đơn giản hơn.
Sử dụng các từ viết tắt
Khi thiết kế hình ảnh favicon, nhiều chủ doanh nghiệp thích sử dụng chữ viết tắt hoặc chữ viết hoa của tên công ty. Ở đây mục đích là làm cho tất cả các chữ cái dễ đọc. Không phải là một ý kiến hay khi sử dụng các phông chữ phức tạp phức tạp – sự đơn giản là chìa khóa. Giữ cho chữ viết tắt ngắn gọn và dễ hiểu.
Tạo hai phiên bản favicon
Tại sao bạn cần hai biến thể của favicon? Các trình duyệt khác nhau có các màu nền tab khác nhau – trắng, xám, đen và các màu khác và điều này cần được tính đến khi bạn thiết kế hình ảnh. Để đảm bảo rằng tất cả đều hoạt động tốt, hãy tạo biểu trưng trên nền màu trong suốt và đồng nhất. Favicon có nền trong suốt được sử dụng trong dòng URL, các tab trình duyệt và những nơi khác gần tên trang web của bạn. Trong khi favicon có nền màu đồng nhất phù hợp với dấu trang và menu ngữ cảnh. Sau khi favicon đã sẵn sàng, bạn nên kiểm tra giao diện của nó trong các trình duyệt khác nhau.
Chọn kích thước thích hợp
Kích thước biểu tượng favicon tiêu chuẩn là 16×16, đơn vị đo là pixel. Nó được sử dụng bởi phần lớn các trình duyệt trên máy tính để bàn và có thể được xem trên thanh địa chỉ, tab và dấu trang. Tuy nhiên, kích thước favicon này có thể quá nhỏ so với những nơi khác. Bạn hoàn toàn có thể cho kích thước lớn hơn hoặc bé hơn như 32×32, 48×48 hoặc 64×64…
Xem xét định dạng file phù hợp
Windows ICO là một định dạng favicon ban đầu và hiện đang được sử dụng bởi phần lớn các trình duyệt. Ưu điểm của ICO là nó có thể chứa một số bit và độ phân giải hữu ích cho Windows. ICO cũng cung cấp một biểu tượng 32px hoạt động tốt nhất cho thanh tác vụ Windows 7 và Internet Explorer. Nó cũng là định dạng duy nhất không có phần tử.
- PNG là một trong những định dạng tốt nhất để sử dụng. Nó thân thiện với người dùng vì bạn không cần bất kỳ công cụ cụ thể nào để tạo hình ảnh PNG. Nó hỗ trợ độ trong suốt alpha và bạn nhận được tệp có kích thước nhỏ nhất có thể. Tuy nhiên, bạn không thể sử dụng PNG cho Internet Explorer vì trình duyệt không hỗ trợ định dạng này. Internet Explorer chỉ hỗ trợ các tệp ICO nhưng trình duyệt này không được sử dụng rộng rãi như các trình duyệt khác.
- SVG là định dạng chỉ được sử dụng và hỗ trợ bởi các trình duyệt Opera.
- Các tệp GIF được hỗ trợ bởi các trình duyệt lỗi thời. Những tệp như vậy thường thu hút sự chú ý của người dùng do hoạt ảnh. Nhưng thường thì chúng lại gây khó chịu cho người dùng sau một thời gian. Nó khó có thể được gọi là một lợi thế.
- JPG không phải là định dạng phổ biến rộng rãi và không có độ phân giải cao như PNG. Nó cũng có kích thước biểu tượng nhỏ dẫn đến mất đi các lợi ích JPEG gốc.
- APNG là một PNG động được trình duyệt Firefox và Opera sử dụng và hỗ trợ. Nhưng nó cũng có những vấn đề tương tự như tệp GIF – chúng đánh lạc hướng sự chú ý của người dùng và có thể gây ảnh hưởng tiêu cực đến họ.
Cách tạo favicon cho website đơn giản
Bạn có thể sử dụng nhiều phần mềm khác như như Photoshop, Corel Draw, Gimp,… hoặc với Paint “thần thánh” trên Windows. Trong phần này mình sẽ giới thiệu đến các bạn cách tạo Favicon bằng phần mềm Photoshop.
Tạo Favicon cho website bằng phần mềm đồ họa
Nếu bạn biết cách sử dụng photoshop thì việc tạo favicon cho website thật đơn giản. Bạn chỉ cần tạo một file favicon đơn giản theo ý thích hoặc theo brand guideline với kích thước tối thiểu là 512*512px. Nếu muốn hình nền trong suốt thì bạn cần lưu với định dạng PNG hoặc GIF.
Tạo Favicon cho website trực tuyến
Nếu không có khả năng design, bạn có thể sử dụng một vài website hỗ trợ tạo Favicon trực tuyến. Trong bài viết này mình muốn giới thiệu với các bạn website www.favicon.cc. Khi truy cập vào trang web này, bạn sẽ thấy giao diện khá đơn giản. Ngay lập tức, bạn có thể thiết kế Favicon với các ý tưởng đã có trong đầu.
Các bạn có thể lựa chọn màu sắc tùy thích, muốn tạo nền trong suốt thì chọn công cụ transparent. Sau đó kéo xuống dưới và chọn Download Favicon. Như vậy là bạn đã có ngay một file Favicon để upload lên website rồi. Thật đơn giản phải không nào!
Trường hợp bạn có một file ảnh dạng jpg, gif, png… và bạn muốn chuyển nó thành .ico để làm ảnh Favicon, bạn có thể vào trang icoconvert.com. Chọn ảnh và upload lên, điều chỉnh kích thước phù hợp, ở mục Apply Styles. Nếu các bạn muốn ảnh Favicon có hình tam giác, hình tròn, hình trái tim,… thì cứ chọn, không thì bỏ qua bước này nhé.
Ở bước Select the icon format, vì là đang làm Favicon nên bạn chọn ICO for Windows 7, Windows 8, Vista and XP => chọn Convert và tải về thôi.
Nhúng Favicon vào trong website
Sau khi tạo xong, bạn copy file favicon.ico vào thư mục gốc website của bạn. Sau đó chèn đoạn code sau vào phần <header>:
<link href=”http://yoursite.com/favicon.ico” rel=”shortcut icon” />
Kết luận: Như vậy, mình vừa chia sẻ với bạn lợi ích của favicon và cách tạo favicon cho website. Favicon tuy nhỏ nhưng có võ, giúp nhận diện thương hiệu của bạn trong hàng trăm ngàn website khác. Chúc các bạn thành công!
