Как создать фавиконку
Современный фавикон — это больше, чем изображение размером 16×16. Вот полный рабочий процесс настройки, который выглядит четко на любом браузере, ОС и устройстве.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Что такое фавикон?
Фавикон — это крошечный значок, который браузер показывает на вкладке, панели закладок и в списке истории. На мобильном устройстве это значок на главном экране. На Windows это значок ярлыка.
Современные сайты поддерживают несколько разрешений и форматов, поэтому каждая поверхность получает четкую визуализацию.
Подготовьте исходное изображение
Начните с квадратного изображения размером не менее 512×512 — в идеале SVG с квадратом viewBox. Все, что меньше, будет размываться при уменьшении масштаба.
Избегайте тонких линий и мелкого текста. Они исчезают при размере 16х16.
Создать многоразмерный .ico
Объедините 16, 32, 48, 64, 128 и 256 в одном favicon.ico. Браузеры автоматически выбирают правильный размер.
Наш генератор значков делает это на стороне клиента менее чем за секунду.
Добавьте теги HTML
Перетащите favicon.ico в корень вашего сайта. Затем добавьте значки SVG, apple-touch-icon и манифеста в <head> для полной настройки.
Подтверждайте в каждом браузере
Выполните принудительное обновление в Chrome, Safari, Firefox и Edge. Проверьте панель закладок, вкладку и установку на главном экране.
Частые вопросы
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.