Favicon Là Gì? Hướng Dẫn Cách Tạo Và Thêm Favicon Cho Wordpress

Tổng quan về favicon

>>Có thể bạn quan tâm: Tường lửa (Firewall) là gì? Chức năng và cách thiết lập Firewall trong Windows

Định nghĩa về favicon

Favicon được hiểu là một biểu tượng không thể thiếu trong việc xây dựng một website. Đây được xem là biểu tượng phổ biến mà nhiều người dùng sử dụng.

Favicon - một biểu tượng của website. Đó là một hình icon được hiển thị ở góc trên cùng của tab khi truy cập trình duyệt. Người dùng sẽ nhìn thấy các biểu tượng này như những logo đại diện cho chính website của mình.

Đặc biệt là trong wordpress thì favicon được thiết kế với một kích thước chuẩn 16 x 16 pixels và thường được gọi với cái tên là biểu tượng website. Mặc dù chỉ tựa như một nút chấm phá nhỏ trên website nhưng nó lại sở hữu một lợi ích vô cùng hấp dẫn cho website.

Tóm lại, favicon là gì đã có câu trả lời rồi đúng không ạ. Nó là một dạng rút gọn của những logo, được sử dụng với mục đích nhằm giúp người dùng phân biệt được các thương hiệu một cách dễ dàng. Thông thường thì một logo sẽ được thiết kế theo font chữ Tagline hay Title của website.

Câu hỏi đặt ra: Tại sao website cần sử dụng Favicon?

Dưới đây là những lý do vì sao Favicon lại cần thiết trong mỗi website:

• Một biểu tượng đơn giản, đẹp mắt với kích thước nhỏ không ảnh hưởng đến thao tác của người dùng.
• Giúp người đọc có thể nhận biết được đâu là tab của mình khi đang truy cập trình duyệt một cách dễ dàng.
• Có thể giúp người dùng dễ dàng phân biệt được đâu là website của mình trong phần bookmark.
• Quan trọng hơn là, nếu một website thiếu đi Favicon thì sức hút, sự lôi cuốn dường như bị giảm đi một phần so với những website có Favicon.

Lịch sử và trào lưu ra đời của Favicon

Favicon trước kia mới ra đời thì sở hữu một giao diện cũng như chức năng khá đơn giản chỉ cần bạn có sẵn một file. ico là bạn có thể thấy các trình duyệt đó được nhận ra và trình bày lên góc con ở bên cửa sổ một cách tinh tế, sáng tạo và tỉ mỉ cao.

Nhưng sau một thời gian tìm tòi và nghiên cứu thì các nhà phát triển đã nghĩ ra thêm ý tưởng sử dụng file. gif để có thể giúp những bức ảnh của bạn có thể chuyển động trên chính cửa sổ trình duyệt hay còn được gọi là hình ảnh động khác hẳn với những dòng ảnh tĩnh.

Và dần dần nó vẫn được phát triển một cách không ngừng, người dùng lại được đón nhận một xu thế trào lưu mới là sử dụng .png với các phần trong suốt. Có thể kể đến như favicon sở hữu chỗ hở, chỗ che cũng như đục lỗ chính vì vậy cách biến tướng, thay đổi một cách tinh vi, sáng tạo để các thương hiệu, logo của công ty không còn nằm trong khu vực khung màu trắng mà nó thường xuất hiện trước đó nữa.

Các định dạng của Favicon

Và hiện nay đã có nhiều trình duyệt hơn và mức độ phức tạp cũng không ngừng nâng cao. Lẽ đó cũng đòi hỏi chúng ta phải tinh tế và tỉ mỉ hơn để làm cho favicon có thể thể hiện được tính năng của mình trên web như Coccoc, Firefox, Chrome… mà còn có thể trên cả các trình duyệt mobile.

Để tương thích với Favicon, bạn nên nhớ hai điều sau:

• Favicon cần sở hữu nhiều kích thước khác nhau như 16 x 16 pixels, 20 x 20 pixels, 24 x 24 pixels…
• Favicon cần có nhiều định dạng đuôi file khác nhau.
• 

>>Xem thêm: Máy chủ ảo VPS là gì? Công dụng, tính năng và cách sử dụng VPS

Những thuận lợi mà Favicon mang lại cho một website

Favicon thể hiện rõ những lợi ích mà chúng có thể mang lại cho người dùng và máy tìm kiếm. Chính vì vậy khi tiến hành xây dựng một website mới, bạn cần thiết kế một Favicon riêng cho mình để nhận dạng được công cụ tìm kiếm một cách giản đơn hơn.

• Favicon như một biểu tượng của webiste. Nó giúp làm nổi bật thương hiệu của bạn và tạo nên sự khác biệt với các website khác. Mặt khác còn giúp người dùng dễ dàng nhớ và nhận dạng thương hiệu của mình.
• Đây được xem là một công cụ đắc lực trong hỗ trợ SEO, giúp xây dựng thương hiệu cho các doanh nghiệp một cách nhanh chóng. Ngoài ra còn là khả năng giúp cho máy tìm kiếm có thể xếp hạng được các website trong toàn bộ hệ thống một cách dễ dàng.
• Thêm vào đó, Favicon còn xác định được tab đang mở trong trình duyệt thông qua một số icon giúp người sử dụng tránh tình trạng nhầm lẫn so với các tab khác.

Cách tạo Favicon cho website

Như phần đề cập ở trên đã trình bày về định nghĩa và tại sao Favicon lại cần thiết cho một website. Thì việc tạo Favicon cũng là một vấn đề được nhiều người dùng quan tâm.

Việc tạo một Favicon cho website nhằm phục vụ cho mục đích như hỗ trợ file mở rộng. Và một số trình duyệt giúp hỗ trợ định dạng ảnh như: jpg, png, gif…

Quy trình tạo Favicon trải qua 4 bước:

• Bước 1: Tạo file. icon: Trước hết người dùng cần thiết kế một file ảnh riêng với những kích thước sau: 16 x 6 pixels, 32 x 32 pixels, 48 x 48 pixels...
• Bước 2: Sau đó, bạn truy cập trực tiếp vào đường link http://www.favicon-generator.org/ để upload chính cái file ảnh mình vừa tạo để tạo favicon. Sau đó bạn sẽ được cung cấp một đường link download ảnh và được chuyển sang định dạng .ico.
• Bước 3: Download file favicon.ico rồi up lên host website của mình.
• Bước 4: Chèn đoạn mã HTML để thiết lập favicon. Rồi sau đó chèn đoạn mã HTML vào phầncủa trang web.

Favicon cho wordpress

• Vì sao bạn nên thêm Favicon cho Wordpress

Như đã đề cập trước đó, sự thiết lập dành cho một website là điều vô cùng quan trọng. Nó giúp cải thiện khả năng sử dụng cũng như những trải nghiệm của người dùng trên chính trang web của mình.

Có nhiều người luôn sử dụng nhiều tab cùng một lúc. Nhưng chính việc mở nhiều tab cùng một lúc sẽ dẫn đến tình trạng làm ẩn tiêu đề của website. Và favicon chính là công cụ giúp người dùng xác định được website của mình và giúp bạn nhanh chóng chuyển đến những tab khác mà họ mong muốn.

Ngoài ra, bạn có thể yêu cầu người sử dụng thêm trang vào màn hình chủ của mình trên chính các ứng dụng của điện thoại di động. Biểu tượng trang web và favicon cũng được sử dụng cùng một lúc bằng cách thêm trang web vào màn hình chính của app thiết bị di động.

Cách thêm biểu tượng trang web hoặc favicon trong wordpress

Với phiên bản của wordpress 4. 3, bạn có thể dễ dàng thêm một favicon hoặc biểu tượng trang web ở khu vực admin Wordpress. Bạn đầu tiên chỉ cần click vào Appearance rồi chọn Customize và nhấn vào tab Site Identity.

Trong phần nhận dạng trang web ở tùy biến cho phép người dùng có thể thay đổi tiêu đề trang, kiểm soát một cách chặt chẽ rằng bạn có muốn hiển thị chúng trong tiêu đề hay không. Bên cạnh đó, nó cũng cho phép người sử dụng có thể tải lên biểu tượng trang web của mình.

Và những hình ảnh đang upload mà vượt quá kích thước cho phép thì Wordpress sẽ giúp bạn cắt nó và làm giảm size của ảnh đến khi nào ảnh phù hợp với kích thước chuẩn thì bạn mới có thể lưu lại.

Với quy trình chỉ đơn giản như vậy, bạn có thể xem lại chính trang web của mình và nhìn thấy biểu tượng favicon của mình đang hoạt động. Hơn vậy, bạn cũng có thể kiểm tra trang web của mình trên một thiết bị di động bằng cách vào trình duyệt và click mục “Add to homescreen”. Rồi sau đó bạn sẽ thấy biểu tượng trang web của mình xuất hiện trên màn hình.

Cách thêm favicon cho Wordpress version 4. 2 hoặc phiên bản cũ

Việc đầu tiên để thêm favicon cho Wordpress là tải lên favicon vào thư mục gốc của trang web - trang web mà bạn đang sử dụng FTP. Tiếp theo là bạn dán mã code vào file header. php vào chủ đề của mình. Đường link như sau:

Một mẹo nhỏ đó là bạn nên thay cụm từ “dieuhau.com” bằng chính URL của website của riêng mình. Theme của người dùng không chứa một tập tin header. php hoặc không tìm thấy nó thì người dùng đừng quá lo lắng vì đã được hỗ trợ bởi một plugin cho mỗi một tài khoản.

Sau khi click và kích hoạt plugin thì vào Settings => Insert Headers and Footera và dán đoạn mã được cung cấp vào phần tiêu đề và tiến hành lưu vào các thiết lập của bạn.

HostingViet cung cấp Hosting wordpress chất lượng cao, ngoài ra Bạn đăng ký Cloud VPS cũng được hỗ trợ cài đặt tối ưu cho Wordpress.

Hướng dẫn tạo Favicon đẹp

Favicon - một biểu tượng sở hữu nhiều tính năng vượt trội cho nên đối với những yêu thích công nghệ thông tin và ham học hỏi thì sẽ tò mò về cách tạo Favicon như thế nào. Và dưới đây là demo mẫu Favicon đẹp cho website thông qua các bước sau:

Favicon trên web chỉ phù hợp với kích thước 16 x 6 pixels và sở hữu đuôi mở rộng .icon nên bạn có thể sử dụng phần mềm chỉnh sửa như Perfect Icon hoặc những phần mềm tạo icon khác nhằm tạo ra một icon đúng size của Favicon.

Và đây là cách tạo Favicon từ hình ảnh png, jpg…:

• Bước 1: Giai đoạn chuẩn bị: Hãy chắc chắn rằng bạn đã có trong tay sẵn một hình ảnh với kích thước được quy định 16 x 16 pixels.
• Bước 2: Truy cập vào đường link http://tools.dynamicdrive.com/favicon/, sau đó nhấn vào Duyệt (Browse) nhằm chọn ra một bức ảnh ở bước 1. Rồi tiếp tục nhấn Create Icon để tạo một Favicon. Sau khi đã thành công các bước này thì chương trình sẽ yêu cầu người dùng Download file.
• Bước 3: Sau khi tiến hành Download file thì bạn sẽ giải nén bề một file được tạo với tên là favicon. ico.
• Bước 4: Tiếp tục đó là nhúng cái vừa được tạo favicon.ico vào website với hai cách đó là:

• Truy cập vào phần mềm quản lý Site  click mục Edit Site và nhập Favicon vào
• Sửa trực tiếp file master trong mục DigitvisionSkins - mục đã được cài đặt sẵn trong thể và có thể chèn thêm một dòng code.

Một vài lưu ý khi sử dụng Favicon:

Sau khi bạn đã trả lời được câu hỏi favicon là gì, cách tạo chúng ra sao. Vậy tổng kết lại và đưa ra những lưu ý khi thiết kế cho một website chuẩn không cần chỉnh nhé.

• Định dạng của favicon là DNG. Định dạng này giúp cho việc giải nén một cách đơn giản và nhanh chóng.
• Kích thước của file nên nhỏ hơn 100KB.
• Như hiện nay, kích thước của favicon chuẩn là 512 x 512 pixels trên màn hình hiển thị Retina của apple.

Trên đây là bài viết tìm hiểu sơ lược về Favicon - mặc dù sở hữu một kích thước size vô cùng nhỏ nhưng chức năng của nó không hề nhỏ phải không ạ. Những thông tin được Hosting Việt đưa ra ở trên chỉ mang phần khái quát nhất về chúng, hãy cùng chúng tôi đóng góp ý kiến để có những cái nhìn chi tiết nhất về biểu tượng Favicon nhé!