KitnexGoogle Search can favicon kich thuoc nao
Google yeu cau favicon hinh vuong toi thieu 8x8 pixel va khuyen nghi lon hon 48x48 de hien thi ro tren nhieu be mat. Google Search chi dung mot favicon cho moi site hoac hostname.
Kich thuoc favicon 2026: thuong hieu cua ban can nhung tep nao
Dung huong dan kich thuoc favicon nay de chon dung tep cho browser, Apple touch va web app, giu logo ro rang tren tab, ket qua tim kiem va man hinh cai dat.
kich thuoc faviconhuong dan kich thuoc faviconfavicon nen lon bao nhieu
Phan lon thuong hieu can nhieu hon mot file favicon. Bo file thuc te cho nam 2026 gom favicon.ico chua nhieu kich co fallback, PNG 32x32, Apple touch icon 180x180 va icon manifest 192x192, 512x512 neu trang co the cai dat. Nho vay cung mot logo van hoat dong tot tren tab trinh duyet, Google Search, luu man hinh chinh iOS va cac be mat kieu app.
Sau khi ra soat kitnex.ai va blog Kitnex vao ngay 6 thang 7 nam 2026, co the thay prompt, mockup, mau sac, dinh dang tep, quyen thuong mai va checklist launch da duoc bao phu kha tot. Lop con thieu la deployment: bien mot huong logo da chot thanh bo icon nho ma nguoi dung thuc su thay trong tab, ket qua tim kiem, shortcut va home screen.
Ý chính
- Google Search dung mot favicon hinh vuong cho moi site, toi thieu 8x8 pixel va khuyen nghi lon hon 48x48.
- Luu vao home screen iOS dung apple-touch-icon, khong chi rel=icon.
- Website co the cai dat nen co icon manifest va khi can thi them icon maskable.
- Van de that su khong phai la them file, ma la giu cho symbol van doc duoc o kich thuoc rat nho.
Favicon nen lon bao nhieu
Google noi favicon phai la hinh vuong va it nhat 8x8 pixel, dong thoi khuyen nghi file lon hon 48x48 de hien thi tot tren nhieu be mat. Google Search cung chi ho tro mot favicon cho moi site hoac hostname. Vi vay, voi da so doi ngu, cach an toan nhat la giu mot symbol nhat quan roi export bo fallback cho browser, Apple touch icon va cac icon manifest.
- Muc toi thieu cua Google: hinh vuong, it nhat 8x8.
- Muc tieu thuc te: lon hon 48x48.
- Bo co ban: favicon.ico, Apple touch, manifest.
- Giu nguyen ngon ngu hinh anh, chi doi kich thuoc tep.
Vi sao mot file khong du
HTML cho phep khai bao nhieu tep rel=icon va browser se chon tep phu hop dua tren type va sizes. Trong khi do, iOS khong dung rel=icon cho Web Clip ma tim apple-touch-icon. Tai lieu cua Apple cung neu cac kich thuoc 152x152, 167x167 va 180x180. Nghia la cung mot symbol nhung ban van phai tach file theo tung boi canh.
- Tab va bookmark: rel=icon.
- Google Search: favicon muc site tu home page.
- Home screen iOS: apple-touch-icon.
- Website cai dat duoc: icon manifest va maskable.
Bo file ma da so thuong hieu nen xuat
Hay bat dau bang favicon.ico gom cac fallback nho nhu 16x16, 32x32 va 48x48. Them PNG 32x32 cho browser hien dai, apple-touch-icon 180x180 cho home screen iPhone, va icon manifest 192x192 cung 512x512 cho cai dat va splash. Muc tieu khong phai la xuat vo han tep, ma la chi tao nhung tep ma he thong thuc su doc.
- favicon.ico: fallback cho browser va boi canh cu.
- favicon-32x32.png: raster ro rang cho tab hien dai.
- apple-touch-icon.png 180x180: luu home screen iPhone.
- icon-192x192.png: kich thuoc cai dat pho bien.
- icon-512x512.png: tai san cho be mat lon hon.
- maskable-icon-512x512.png: lua chon an toan hon khi bi crop.
Khi nao can them icon maskable
MDN giai thich icon manifest co the khai bao purpose nhu any, maskable hoac monochrome. web.dev bo sung rang phan quan trong cua artwork nen nam trong vung an toan trung tam co ban kinh khoang 40 phan tram chieu rong icon, con 10 phan tram ngoai cung co the bi cat. Vi the, dung chi thu nho lockup day du, ma nen co san mot symbol gon hon cho kich thuoc nho.
- Uu tien maskable khi man hinh cai dat quan trong.
- Dat symbol chinh trong vung an toan trung tam.
- Tranh chu dai, net qua manh va chi tiet do tuong phan thap.
- Test tren nen sang va nen toi.
Cach test favicon truoc khi launch
Google yeu cau Googlebot-Image phai truy cap duoc file favicon va Googlebot phai truy cap duoc trang chu, dong thoi nhac rang viec recrawl co the mat tu vai ngay den vai tuan. Cach an toan nhat la giu URL on dinh, lien ket file tu home page va tranh doi ten sau khi site da live. Sau do, hay mo icon trong tab that, luu site len home screen iPhone, kiem tra luong cai dat cua Chrome hoac Android, va xem symbol o 16 den 32 pixel.
- Kiem tra cung luc head tags va manifest.
- Luu site len home screen iPhone va xem ket qua.
- Neu site cai dat duoc, kiem tra man hinh install.
- Xem symbol o 16-32 pixel tren UI sang va toi.
- Co gang giu nguyen ten tep san xuat sau khi len song.
Câu hỏi thường gặp
Da co PNG hoac SVG thi co can favicon.ico nua khong
Trong nhieu truong hop van can. favicon.ico van la fallback on dinh cho browser va boi canh cu, trong khi PNG hoac SVG bo sung cho moi truong hien dai. Muc tieu khong phai la chon mot tep thang cuoc, ma la co file dang tin cay cho moi boi canh.
favicon va apple-touch-icon khac nhau nhu the nao
favicon chu yeu phuc vu tab browser, bookmark va ket qua tim kiem, con apple-touch-icon duoc iOS dung khi nguoi dung luu site len home screen. MDN cung noi ro iOS khong dung rel=icon cho Web Clip.
Site khong phai PWA hoan chinh thi co can 512x512 khong
Khong phai luc nao cung can, nhung no van huu ich neu site co the cai dat, duoc ghim hoac xuat hien tren be mat he thong lon hon. Voi site chu yeu la noi dung, hay uu tien browser favicon va Apple touch icon truoc, sau do moi them icon manifest lon neu trai nghiem san pham can.
Lam sao de logo hop voi favicon
Hay bat dau tu phan don gian nhat trong he thong thuong hieu, thuong la symbol, monogram hoac ban rut gon manh, thay vi wordmark day du. Tang khoang trong, bo chi tiet mong manh va test o 16-32 pixel tren nen sang va toi.
Nguồn và tài liệu tham khảo
- Define a favicon to show in search resultsGoogle Search Central
- Links - HTML StandardWHATWG
- icons - Web app manifestMDN Web Docs
- HTML attribute: relMDN Web Docs
- Configuring Web ApplicationsApple Developer
- Adaptive icon support in PWAs with maskable iconsweb.dev
Tài nguyên liên quan
Tiếp tục khám phá thư viện Kitnex để so sánh chiến lược prompt, quy trình cho founder và khung ra quyết định thương hiệu.
Cách chọn bảng màu logo vẫn dùng tốt khi ra mắt
Một bảng màu logo mạnh không đến từ cảm tính đơn thuần. Bài viết này chỉ ra cách chọn màu phù hợp với ngành, đứng vững trên bề mặt thực tế và không gãy khi đến lúc ra mắt.
Đọc bài viếtMau brief thiết kế logo: cần điền gì trước khi tạo ý tưởng
Một brief logo tốt biến sở thích mơ hồ thành định hướng có thể dùng được. Bài viết này chỉ ra những gì cần có, đưa mẫu có thể sao chép và giải thích cách rút ra hướng logo AI tốt hơn.
Đọc bài viếtChecklist nhận diện thương hiệu cho startup trước khi ra mắt
Nhận diện thương hiệu của startup không chỉ là một logo. Nó còn gồm định vị, quy tắc thị giác, tài sản ra mắt và bước kiểm tra rủi ro để cả đội giữ được sự nhất quán ngay từ đầu.
Đọc bài viếtCông cụ tạo logo AI tốt nhất cho doanh nghiệp nhỏ: nên so sánh gì trước khi mua
Công cụ tạo logo AI tốt nhất cho doanh nghiệp nhỏ không chỉ là công cụ có các mẫu nhìn đẹp nhất. Điều quan trọng là nó có giúp bạn biến ý tưởng thành file dùng được, tài sản thương hiệu nhất quán và các bề mặt triển khai thực tế mà không làm quy trình trở nên rối hơn hay không.
Đọc bài viếtÝ tưởng mockup logo: 7 bài test trước khi ra mắt
Mockup logo tốt không chỉ là một cảnh đẹp. Đó là bề mặt sử dụng thật giúp bạn biết logo có còn rõ ràng và đáng tin khi rời artboard hay không.
Đọc bài viếtGiải thích các định dạng tệp logo: PNG, SVG, PDF, EPS và JPG
PNG là định dạng thực tế nhất cho nhiều tình huống dùng logo trên môi trường số, nhưng SVG, PDF, EPS và JPG giải quyết những nhu cầu khác nhau. Bài viết này giúp bạn chọn đúng tệp cho website, mockup, in ấn và hệ thống thương hiệu lâu dài.
Đọc bài viếtPrompt logo AI tạo ra hướng thương hiệu tốt hơn
Những prompt logo AI tốt nhất không đến từ vài tính từ nghe hay. Chúng hoạt động như một brief sáng tạo ngắn, làm rõ thương hiệu, đối tượng, hướng thị giác và bối cảnh sử dụng để mô hình đưa ra phương án hữu ích hơn.
Đọc bài viếtLogo tạo bằng AI có thể dùng thương mại không?
Logo do AI tạo thường có thể dùng cho kinh doanh, nhưng điều đó không có nghĩa là tự động được bảo hộ hay không có rủi ro nhãn hiệu. Điều quan trọng là quyền sử dụng, phần đóng góp của con người và quy trình kiểm tra trước khi phát hành.
Đọc bài viếtCách thiết kế logo bằng AI trong năm 2026
Một ý tưởng mơ hồ sẽ trở thành quy trình logo thực thụ khi bạn làm rõ brief, so sánh hướng đi, thử mockup và quyết định liệu concept đã đủ mạnh để ra mắt hay chưa.
Đọc bài viếtNhững workflow logo AI tốt nhất cho founder
Với founder, workflow logo AI tốt nhất không phải là workflow tạo ra nhiều lựa chọn nhất, mà là workflow giúp quyết định nhanh và chuyển thành asset có thể dùng để ra mắt.
Đọc bài viếtTâm lý học màu sắc cho logo hiện đại
Màu sắc không chỉ là trang trí. Nó thay đổi cách thương hiệu được cảm nhận về mức độ nghiêm túc, ngành hàng và độ đáng tin.
Đọc bài viết