Tạo favicon từ text hoặc ảnh
Công cụ tạo favicon của Tấn Phát Digital là giải pháp hoàn hảo để tạo favicon chuyên nghiệp cho website của bạn. Hỗ trợ hai phương thức tạo favicon: từ text (1-2 ký tự) với tùy chỉnh màu nền và màu chữ, hoặc từ ảnh upload với resize tự động. Tạo đủ 8 kích thước chuẩn theo yêu cầu của các nền tảng: 16x16 và 32x32 cho browser tabs, 48x48 và 64x64 cho Windows shortcuts, 128x128 cho Chrome Web Store, 180x180 cho Apple Touch Icon (iOS), 192x192 và 512x512 cho Android Chrome và PWA (Progressive Web App). Preview realtime trước khi download, tải từng kích thước riêng lẻ hoặc tất cả cùng lúc với một click. Favicon được tạo với rounded corners đẹp mắt, output PNG chất lượng cao không watermark. Xử lý hoàn toàn trên trình duyệt, không upload ảnh lên server, đảm bảo bảo mật. Hoàn toàn miễn phí, không giới hạn số lần sử dụng, không cần đăng ký tài khoản.
Favicon (favorite icon) là icon nhỏ đại diện cho website, hiển thị ở nhiều vị trí quan trọng: tab trình duyệt giúp users nhận diện website trong nhiều tabs đang mở, bookmark bar khi users lưu trang, lịch sử trình duyệt, kết quả tìm kiếm Google (đặc biệt trên mobile), home screen khi users 'Add to Home Screen' trên mobile, và trong PWA manifest. Favicon chuyên nghiệp mang lại nhiều lợi ích: tăng brand recognition và nhận diện thương hiệu, tạo ấn tượng chuyên nghiệp với visitors, giúp users dễ dàng tìm lại website trong bookmarks và tabs, cải thiện user experience tổng thể, và là yêu cầu bắt buộc cho PWA. Website không có favicon hoặc favicon mặc định trông amateur và thiếu chuyên nghiệp. Cần nhiều kích thước khác nhau vì mỗi platform và device có requirements riêng: browsers cần 16x16 và 32x32, iOS cần 180x180, Android cần 192x192 và 512x512 cho PWA.
16x16 pixels - Kích thước nhỏ nhất, hiển thị trên browser tab, address bar, và bookmarks bar. Đây là kích thước classic favicon từ thời IE. 32x32 pixels - Kích thước phổ biến nhất cho modern browsers, hiển thị rõ ràng hơn trên high-DPI displays. 48x48 pixels - Dùng cho Windows site icons và một số browsers. 64x64 pixels - Dùng cho Windows shortcuts và taskbar pins. 128x128 pixels - Dùng cho Chrome Web Store nếu bạn có Chrome extension. 180x180 pixels - Apple Touch Icon, hiển thị khi users 'Add to Home Screen' trên iOS devices (iPhone, iPad). Đây là kích thước quan trọng cho mobile users. 192x192 pixels - Android Chrome icon, dùng trong PWA manifest cho home screen icon trên Android. 512x512 pixels - PWA splash screen icon, hiển thị khi PWA đang loading. Cũng dùng cho high-resolution displays và app stores. Best practice: Tạo tất cả 8 kích thước để đảm bảo favicon hiển thị đẹp trên mọi platform và device.
Sau khi tạo favicon, thêm các thẻ link sau vào phần <head> của HTML: <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> cho browsers. <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> cho legacy support. <link rel='apple-touch-icon' sizes='180x180' href='/favicon-180x180.png'> cho iOS devices. Với PWA, cần thêm manifest.json với icons array: {"icons": [{"src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png"}, {"src": "/favicon-512x512.png", "sizes": "512x512", "type": "image/png"}]}. Và link manifest trong HTML: <link rel='manifest' href='/manifest.json'>. Với Next.js, đặt favicon files trong thư mục /public và framework sẽ tự động serve. Với WordPress, có thể upload qua Customizer > Site Identity > Site Icon. Sau khi upload, clear browser cache (Ctrl+Shift+R) để thấy favicon mới.
Keep it simple - Favicon rất nhỏ (16x16 pixels), chi tiết phức tạp sẽ không hiển thị rõ. Dùng shapes đơn giản, 1-2 màu, và text tối đa 2 ký tự. High contrast - Đảm bảo contrast tốt giữa foreground và background để favicon nổi bật trên cả light và dark browser themes. Test trên cả hai themes. Brand consistency - Favicon nên match với brand colors và style của website. Dùng màu primary của brand làm background. Recognizable - Favicon nên instantly recognizable là thuộc về brand của bạn. Thường dùng logo simplified hoặc chữ cái đầu của brand name. Test at small sizes - Luôn preview favicon ở 16x16 và 32x32 để đảm bảo vẫn nhìn rõ. Nhiều designs đẹp ở 512px nhưng không work ở 16px. Avoid photos - Ảnh chụp không phù hợp làm favicon vì mất chi tiết khi thu nhỏ. Dùng vector graphics hoặc simple shapes. Consider dark mode - Nhiều users dùng dark mode, favicon với dark background có thể blend vào browser chrome. Cân nhắc thêm subtle border hoặc dùng màu sáng.
PNG (Portable Network Graphics) - Format được recommend nhất hiện nay. Ưu điểm: Hỗ trợ transparency (alpha channel), được tất cả modern browsers support, file size nhỏ với compression tốt, dễ tạo và edit. Công cụ này output PNG. ICO (Windows Icon) - Format legacy từ thời Internet Explorer. Ưu điểm: Có thể chứa multiple sizes trong 1 file, required cho IE và một số Windows features. Nhược điểm: File size lớn hơn, khó tạo, đang dần bị phase out. Chỉ cần nếu support IE là requirement. SVG (Scalable Vector Graphics) - Format mới đang được adopt. Ưu điểm: Vector nên scale perfectly ở mọi size, file size rất nhỏ, có thể style với CSS, support dark mode với media queries. Nhược điểm: Browser support chưa universal (Safari mới support gần đây), không phải mọi tools support. Recommendation: Dùng PNG cho maximum compatibility. Thêm SVG nếu muốn future-proof và dark mode support. ICO chỉ cần nếu phải support IE.
Minimum cần: 32x32 cho browsers, 180x180 cho iOS, 192x192 cho Android. Nếu có PWA, thêm 512x512. Các kích thước khác (16, 48, 64, 128) là nice-to-have cho edge cases. Công cụ này tạo đủ 8 kích thước để cover mọi use cases, recommend tải tất cả để đảm bảo favicon hiển thị tốt trên mọi platform.
PNG là lựa chọn tốt nhất hiện nay - được mọi modern browsers support, hỗ trợ transparency, file size nhỏ. ICO là format cũ, chỉ cần nếu phải support Internet Explorer. SVG là format mới với nhiều ưu điểm (vector, dark mode support) nhưng browser support chưa universal. Công cụ này output PNG - format được recommend nhất.
Thêm vào <head>: <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>. Cho iOS: <link rel='apple-touch-icon' href='/favicon-180x180.png'>. Cho PWA: Tạo manifest.json với icons array và link trong HTML. Upload favicon files vào thư mục gốc của website (public folder trong Next.js, root trong static sites).
Common issues: 1) Browser cache - Ctrl+Shift+R để hard refresh, hoặc clear cache hoàn toàn. 2) Đường dẫn sai - Kiểm tra href path đúng chưa, file có tồn tại không. 3) File bị lỗi - Mở file trong image viewer để verify. 4) MIME type - Server cần serve với correct Content-Type. 5) Thời gian - Một số browsers cache favicon lâu, có thể cần đợi hoặc test trong incognito mode.
Technically có thể, nhưng không recommend. Ảnh chụp có quá nhiều chi tiết, khi thu nhỏ xuống 16x16 hoặc 32x32 pixels sẽ mất hết details và trông như một blob màu. Favicon hiệu quả cần simple shapes, high contrast, và recognizable ở kích thước nhỏ. Nếu muốn dùng ảnh, crop phần quan trọng nhất và simplify.
Favicon không trực tiếp ảnh hưởng đến SEO rankings. Tuy nhiên, favicon hiển thị trong Google search results (đặc biệt trên mobile), ảnh hưởng đến click-through rate. Website có favicon chuyên nghiệp trông trustworthy hơn, users có thể click nhiều hơn. Favicon cũng là yêu cầu cho PWA, và PWA có thể có SEO benefits.
PNG favicon không thể tự động adapt dark mode. Có 2 approaches: 1) Dùng SVG favicon với CSS media query: @media (prefers-color-scheme: dark) { ... }. 2) Dùng JavaScript để detect dark mode và swap favicon dynamically. 3) Design favicon với colors work tốt trên cả light và dark backgrounds (avoid pure black hoặc pure white). SVG approach là cleanest nhưng browser support chưa universal.
Rounded corners là design choice, không bắt buộc. Công cụ này tạo favicon với border-radius 15% để match modern design trends và iOS icon style. Nếu muốn favicon vuông (sharp corners), bạn có thể upload ảnh vuông trong tab 'Từ Ảnh' - ảnh sẽ được resize mà không thêm rounded corners. Hoặc edit output trong image editor.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
Xóa nền ảnh online free.
Trích xuất màu từ ảnh.
Làm mờ ảnh online free.
Nén ảnh giảm dung lượng.
Cắt ảnh theo tỷ lệ.
Tăng chất lượng ảnh.
Chuyển đổi PNG ↔ JPG ↔ WebP.
Xem EXIF và metadata ảnh.
Chuyển ảnh sang text.
Thay đổi kích thước ảnh.
Lật xoay ảnh 90° 180° 270°.
Làm nét ảnh online.
