Cách tạo favicon cho website của bạn

Favicon là biểu tượng nhỏ xíu xuất hiện trên tab trình duyệt, trong bookmark, ở màn hình chính iPhone và trong kết quả tìm kiếm Google. Trước đây làm đúng nghĩa là phải xoay xở với cả chục kích thước; ngày nay chỉ cần bốn file là đủ cho mọi nền tảng.

Những file bạn thực sự cần

favicon.ico với các kích thước 16, 32 và 48 px — cho trình duyệt cũ, shortcut Windows, và bot thu thập dữ liệu của Google.
apple-touch-icon.png ở 180 px — cho màn hình chính iOS.
icon-192.png và icon-512.png — cho Android và web app manifest (các trang web có thể cài đặt, màn hình splash).
site.webmanifest — trỏ tới hai file PNG ở trên.

Tạo tất cả trong một lần

Vẽ một logo hình vuông. Hình khối đơn giản và một hoặc hai màu sẽ hiển thị rõ nhất ở kích thước 16 px; chữ thì không.
Mở Tạo favicon và thả logo vào — SVG là lựa chọn lý tưởng vì mọi kích thước đều được render sắc nét; một file PNG 512 px cũng dùng được.
Tải file ZIP về và sao chép các file vào thư mục gốc của website.

Tạo faviconTạo favicon.ico (16/32/48), apple-touch-icon và biểu tượng PNG từ PNG, JPG, WebP hoặc SVG. Mọi kích thước trong một ZIP, tạo ngay trong trình duyệt.

Thêm đoạn sau vào <head>:

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Những sự cố thường gặp

Logo không phải hình vuông. Công cụ sẽ căn giữa và thêm khoảng đệm trong suốt xung quanh; nếu muốn icon gọn hơn, hãy cắt về hình vuông trước bằng Cắt ảnh.
Favicon cũ vẫn hiển thị. Trình duyệt cache favicon rất mạnh. Hãy đổi tên file hoặc thêm ?v=2 vào đường dẫn.
Tab tối màu. Một logo màu đen sẽ biến mất trên giao diện trình duyệt tối. Hãy thêm một hình nền có màu phía sau.

Chuyển SVG sang PNG onlineChuyển tệp vector SVG sang PNG ở mọi kích thước trong trình duyệt. Đặt chiều rộng, giữ độ trong suốt, chuyển nhiều tệp cùng lúc và tải ZIP. Không tải lên.

Đăng ngày 2026-09-21