Ngày 25 / Tiết 2 / Thời lượng 25 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Trong bài trước bạn đã biết được công dụng và kiểu dáng thường thấy của favicon. Ở bài này bạn sẽ học cách tạo một favicon cho website của chính bạn bằng công cụ miễn phí.
Lưu ý: bạn cần tránh nhái, sao chép favicon của bất cứ thương hiệu nổi tiếng nào. Điều đó không tốt cho bất cứ ai, kể cả bạn.
Thật ra chúng ta đang hơi ngược đời, vì cần thiết kế logo cho website trước rồi mới tạo favicon sau. Nhưng thành thật mà nói, để thiết kế logo cho ra hồn thì cần ở một đẳng cấp thiết kế khác mà bây giờ chúng ta khó tự làm được (nếu cố bạn cũng làm ra logo thôi, nhưng thường nó sẽ rất tệ).
Vì thiết kế favicon thì đơn giản hơn nhiều, nên chúng ta sẽ làm luôn được trong giai đoạn này, và áp dụng kiểu thiết kế lấy chữ cái đầu tiên của website.
Bạn có thể tra từ khóa “generate favicon online free” để tìm các trang web giúp bạn làm điều này. Có nhiều trang miễn phí thực sự, nhưng cũng có trang bạn tạo xong thì ‘xúi’ bạn trả phí mới tải được về (dù nó cũng không quá đắt), bất cứ trang nào mà bắt bạn đăng nhập mới tạo hay tải về favicon thì thường là dạng đòi phí.
—
Tôi chỉ nói mấy điều trên để bạn hiểu hơn, còn bây giờ tôi sẽ giới thiệu công cụ hoàn toàn miễn phí để bạn tạo favicon, nó đây: favicon.io
- Sau khi truy cập, tại trang chủ, bạn click vào TEXT -> ICO:
Chúng ta sẽ thấy một trang để bạn nhập thông tin:
- Preview: để bạn xem trước favicon bạn thiết kế trông như thế nào, ví dụ:
- Ở phần xem trước bạn nên chú ý vào cái có cỡ nhỏ nhất, vì kích cỡ đó mới là kích cỡ thật của favicon trên tab trình duyệt, kết quả tìm kiếm hay bookmark. Nhìn vào đó thấy rõ mới ổn, vì nhiều thiết kế nhìn vào cỡ to thì trông rõ nhưng nhỏ lại không, như thế là hỏng.
- Text: bạn nhập chữ cái đầu của tên website vào đây.
- Background: bạn có ba lựa chọn, (1) Rounded là favicon hình vuông có bo tròn ở góc, (2) Square là favicon vuông hoàn toàn, không bo tròn ở góc, (3) Circle là dạng hình tròn.
- Font Family (view all on Google Fonts): là font chữ của favicon, đây đều là các font có sẵn trên Google Fonts.
- Font Variant: là các biến thể khác như chữ nghiêng, không phải font nào cũng có biến thể, mà chỉ có dạng thường là Normal.
- Font Size: kích cỡ font chữ, mặc định 110. Bình thường bạn cứ để mặc định là ổn, nhưng với một số font cần điều chỉnh nó to hơn hoặc nhỏ hơn (ví dụ 120 hoặc 100) để nó có kích cỡ vừa đủ.
- Font Color: màu sắc của font chữ, sẽ có bảng màu cho bạn chọn lựa.
- Background Color: màu nền của favicon.
Ví dụ về thiết kế của tôi cho website trangdautien.com, tôi lấy chữ T là chữ cái đầu của tên miền làm favicon:
Sau khi thiết kế ưng ý, bạn click Download để tải favicon về máy tính.
Sau đó bạn chuột phải vào file, chọn Extract to favicon_io để giải nén nó ra thư mục:
Bạn sẽ thấy các file favicon với đa dạng kích cỡ ở thư mục favicon_io sau giải nén như thế này:
Như vậy là bạn đã biết cách tạo favicon cho website rồi, ở bài học sau, chúng ta sẽ up nó lên trang web của bạn.
Bài tiếp >>> Cách điều chỉnh favicon cho website trên theme Astra.