Как сделать favicon из PNG
Favicon — маленькая иконка сайта, которая отображается во вкладке браузера, закладках и рядом с названием страницы. В Convertico можно быстро превратить PNG в ICO.
PNG favicon или ICO: что выбрать для сайта
PNG favicon удобно использовать на современных сайтах: он поддерживает прозрачность, хорошо отображается на Retina-экранах и легко подключается через HTML. Но ICO всё еще полезен для совместимости, потому что один .ico-файл может содержать несколько размеров и корректно работать в старых браузерах, Windows-ярлыках и некоторых CMS.
Оптимальный вариант — использовать оба формата. ICO можно подключить как основной favicon, а PNG — для современных браузеров, мобильных устройств и иконок большего размера. Так сайт получает и совместимость, и хорошее качество отображения на разных устройствах.
Пошаговая инструкция
- Подготовьте квадратное PNG-изображение, желательно от 256×256 px.
- Откройте инструмент «PNG в ICO» и загрузите файл.
- Выберите размеры favicon: 16×16, 32×32 и 48×48.
- Нажмите «Конвертировать в ICO» и скачайте файл favicon.ico.
Примеры размеров favicon
| Размер | Где используется |
|---|---|
| 16×16 | Классическая иконка вкладки браузера |
| 32×32 | Retina-дисплеи и современные браузеры |
| 48×48 | Windows и системные сценарии |
| 256×256 | Иконки приложений и крупные превью |
Как подключить favicon в HTML
После создания favicon.ico загрузите файл в корень сайта или в папку с ассетами и добавьте ссылки в head. Для современных устройств полезно подключить не только ICO, но и PNG для apple-touch-icon и manifest.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">ICO, PNG, SVG и manifest
| Формат | Когда использовать |
|---|---|
| ICO | Базовая совместимость, вкладки браузера, старые сценарии и Windows. |
| PNG | Современные браузеры, apple-touch-icon, крупные иконки и прозрачность. |
| SVG | Векторная иконка для современных браузеров, если логотип простой и хорошо масштабируется. |
| Manifest | Набор иконок для PWA, Android-устройств и установки сайта на главный экран. |
Частые ошибки
Не используйте слишком мелкий исходник, избегайте сложных деталей и проверьте, что иконка хорошо читается на светлом и темном фоне.