Dịch vụ

Hướng dẫn tạo Favicon cho website

Khi lướt web, nếu để ý một chút bạn sẽ thấy một hình biểu tượng nho nhỏ nằm bên cạnh tên trang web trên thanh tabar của trình duyệt web, biểu tượng đó được gọi là Favicon. Càng ngày favicon càng trở lên quan trọng, hầu hết các website lớn đề có favicon. Vậy Favicon là gì và làm thế nào để tạo favicon cho website của bạn.

  1. Favicon là gì?

Favicon (viết tắt của cụm từ Favorite Icon) là một hình ảnh thu nhỏ trước tiêu đề của website. Khi mọi người truy cập vào các website thì biểu tượng này sẽ xuất hiện và đây xem là hình ảnh đại diện cho website đó.

  1. Tác dụng của Favicon

Dùng để phân biệt các trang mạng với nhau khi mà người dùng xem nhiều website khác nhau thì khi nhìn vào biểu tượng này sẽ biết được các website mà họ đang xem là gì, tránh nhầm lẫn.

favicon công ty mona media
favicon công ty mona media

Ví dụ: Nhìn hình ảnh trên đây bạn dễ dàng nhận ra là Favicon của https://mona-media.com không thể lẫn vào đâu được nhỉ?

Ngoài ra tạo favicon còn là một trong những yếu giúp google đánh giá cho website đó có tốt hay không. Nếu website bạn chưa có Favicon thì bạn nên bổ sung ngay lập tức vì google sẽ đánh giá cao những trang website có Favicon và đánh giá thấp những trang không có favicon. Là một yếu tố đánh giá SEO của SEOquake.

Nếu web bạn có favicon nó cũng có tác dụng truyền thông quảng bá cho thương hiệu của bạn khi bạn phát triển nhiều website cùng Favicon. Có thể nói favicon cũng 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 khác.

  1. Kích thước Favicon – Cách tạo Favicon cho website đơn giản

Kích thước chuẩn của FavIcon trên website là 16×16 và đơn vị đo là pixel, 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…

Favicon có hỗ trợ file phần mở rộng .ico, một số trình duyệt hỗ trợ các định dạng ảnh thông thường phổ biến như: gif, jpg, png…  Tuy nhiên chúng ta nên sử dụng định dạng .ico cho favicon sẽ tốt hơn. Có rất nhiều cách tạo ra file Favicon, sau đây là những cách đơn giản và tối ưu nhất để tạo Favicon theo ý muốn:

Tạo Favicon bằng phần mềm

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. Bạn chỉ cần mở photoshop lên và tạo một file theo ý thích. Sau đó lưu lại với tên bất kỳ với kích thước tối thiểu là 512x512px. Nếu muốn trong suốt thì lưu với định dạng gif hoặc png.

Mặc định Photoshop không cho phép lưu file dạng .ico để bạn tạo các ICON cho mình, vấn đề này đã được giải quyết với Plugin ico cho photoshop. Trên youtube có rất nhiều video hướng dẫn bạn về cách Plugin này, bạn có thể tham khảo thêm.

Tạo Favicon 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 website này, bạn sẽ thấy giao diện khá đơn giản, và bạn có thể ngay tức khắc 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 xóa cứ chọn công cụ transparent, sau đó kéo xuống dưới và chọn Download Favicon 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!

favicon
favicon

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é.

ss

Ở 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.

  1. 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” />

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. Nếu các bạn muốn thiết kế website đẹp thì vấn đề về bộ nhận dạng thương hiệu các bạn phải đặt nó quan trọng vì đây là một yếu tốt mà Google nhìn vào đầu tiên.

Favicon là một trong các bước thiết kế website chuẩn SEO, vì vậy khi bạn nhờ những dịch vụ thiết kế website chuyên nghiệp bạn sẽ được thiết kế logo và Favicon một cách đoàn hoàn và đẹp đẽ mang trong mình thương hiệu của website, nhưng ngược lại nếu bạn sử dụng những dịch vụ thiết kế website giá rẻ thì họ chỉ có thể up những hình demo lên giúp bạn và việc của bạn là tự thiết kế và up lên sao này.