Фавикон - это маленькая иконка, которая появляется во вкладке браузера, списке закладок и предложениях адресной строки, когда кто-то посещает веб-сайт. Сделать это правильно означает нечто большее, чем просто сделать изображение маленьким. Фавикон, который выглядит четким, требует правильных размеров в пикселях, чистого центрированного дизайна и правильного формата для контекста, в котором он используется. Стандартный размер фавикона составляет 16x16 пикселей для базового отображения во вкладке браузера, с 32x32, используемым для дисплеев с высокой плотностью, и 48x48, включенным в полные пакеты фавиконов. Плохо подготовленный фавикон выглядит размытым или нечетким во вкладке, что является маленькой деталью, отражающей общее качество веб-сайта.
Как изменить размер изображения для фавикона
Для базового фавикона введите 16 как в поле ширины, так и в поле высоты и отключите флажок Сохранять соотношение сторон для принудительного квадратного вывода. Для версии с более высоким разрешением повторите процесс с 32 в обоих полях. Для полного пакета фавиконов обработайте одно и то же изображение в размерах 16x16, 32x32 и 48x48 отдельно.
Качество исходного изображения имеет большее значение для размеров фавикона, чем для почти любого другого размера. Сложный логотип или детализированная иллюстрация теряет всякую узнаваемую форму при 16x16. Простая смелая иконка с чистыми краями и минимальными деталями сохраняется намного лучше. Начните с самой большой доступной версии иконки и уменьшайте ее для получения наиболее четкого результата при каждом размере. Загрузите несколько размеров одновременно и загрузите как ZIP по завершении.
Стандартные размеры фавикона
16x16 пикселей: базовый размер, отображаемый во вкладках браузера на экранах со стандартным разрешением. 32x32 пикселя: используется дисплеями с высокой плотностью и ярлыками рабочего стола Windows. 48x48 пикселей: включен в полные пакеты фавиконов для более широкой совместимости. 180x180 пикселей: размер Apple Touch Icon, используемый при сохранении веб-сайта на домашний экран iOS. 192x192 пикселя: используется устройствами Android для иконок веб-приложений на домашнем экране. Полный пакет фавиконов обычно включает все эти размеры, созданные из одного исходного значка.
Формат вывода для фавиконов
PNG - наиболее широко поддерживаемый формат для современных реализаций фавиконов. Большинство браузеров принимают файлы фавиконов PNG напрямую через тег link в заголовке HTML. Прозрачные фоны поддерживаются в PNG и позволяют фавикону аккуратно располагаться на цвете вкладки браузера. Традиционный формат ICO объединяет несколько размеров в один файл и все еще используется для корневого файла favicon.ico, который браузеры ищут по умолчанию. PNG правильного размера является наиболее простым подходом для большинства современных веб-проектов.