Illustrator: как сделать прозрачный фавикон неквадратного логотипа

У меня есть логотип, который не является квадратным. Я хочу сделать значок значка с прозрачным фоном, но для этого нужно сделать его размером 16 x 16 пикселей, что меняет логотип, сжимая его. Есть ли способ сделать прозрачный квадрат за логотипом в иллюстраторе, чтобы логотип не повредился, а фавикон выглядел нормально. Фавикон на этом сайте — пример того, что я хочу сделать. Пожалуйста, покажите мне, как в Adobe Illustrator.

Вы можете следовать тем же указаниям, что и в этом вопросе на GDSE (вы просто хотите, чтобы фон был прозрачным, а логотип находился в центре квадрата, независимо от формы)

Ответы (3)

Несмотря на то, что другие ответы технически правильны, я бы не советовал просто сжимать очень широкий или очень высокий логотип до размера 16x16 пикселей, чтобы сделать значок значка. Есть большая вероятность, что в логотипе больше ничего не будет узнаваемо, что приведет к случайному смешению пикселей.

У хорошего логотипа должна быть упрощенная альтернатива, которая работает в крошечном размере и имеет пропорции примерно 1x1. Используйте это, чтобы создать свой фавикон. Не включайте текст или сократите его до одного или двух символов.

Даже если это не сработает, вы можете взять элемент логотипа (при условии, что вы разработали его самостоятельно) и использовать его в качестве фавикона.

Например, у одного из моих клиентов есть довольно сложный логотип, включающий песчаные дюны и компас за его торговой маркой. В качестве фавиконки я использовал только стрелку компаса:

Фавикон 2directIT

Создайте новый документ нужного вам размера (16x16 пикселей).

Выберите группу логотипов и перетащите ее в новый файл.

Изменить размер на:

щелкнув и удерживая клавишу Shift в одном из углов (это сохранит размеры масштаба при изменении размера).

или

щелкните звено цепи между размерами (чтобы связать ширину и высоту) перед изменением размера.

Первый слой в новом документе 16x16 можно использовать для изменения цвета фона или оставить прозрачным.

Тем не менее, чтобы соответствовать новым стандартам для мобильных устройств и настольных компьютеров, вам потребуется несколько размеров фавикона, от 16x16 до 512x512, в зависимости от устройства, некоторые с прозрачными, а некоторые со сплошным цветом.

Ваш логотип также должен быть видимым / пригодным для использования в одном цвете / прозрачным, что может быть сложно, если логотип не является чистым вектором.

Вы можете установить свои значения по умолчанию в предустановленных файлах ai, готовых добавить ваши проекты, или есть множество онлайн-сервисов, которые автоматизируют весь процесс. например. https://realfavicongenerator.net/ или https://www.favicon-generator.org/

Вы можете загрузить файл 800x800.png (больше 512 пикселей), и он сделает всю работу по извлечению за вас.

Создайте более крупную иконку в формате PNG, например 256x256px, и этого можно легко добиться в Illustrator, поместив свой неквадратный логотип в середину квадратной монтажной области и сохранив его для Интернета с установленным флажком «Clip to Artboard». Затем свяжите этот PNG как фавикон.

<link rel="icon" type="image/png" href="/path/favicon.png" />

Если это должно быть ICO, Illustrator (CS6) не экспортирует в ICO, поэтому вам все равно нужно будет сначала создать PNG 16x16 (см. выше), а затем поместить его в Photoshop или использовать онлайн - конвертер .

Если я сохраняю в PNG, это PNG-8 или PNG-24, и должен ли я использовать сохранение для Интернета (устаревший) каждый раз, когда я создаю значок / логотип / значок?
также, если качество значка действительно плохое после экспорта, это поправимо?
PNG-8 против 24: не уверен, что это имеет значение. попробуйте и посмотрите, что работает. что значит плохое качество? предполагая, что ваш логотип является векторным, экспорт должен быть четким
что значит истинный вектор? сделано в иллюстраторе?
да. 100% сделано в иллюстраторе в виде векторных фигур, без добавления изображений или каких-либо растровых битов.
да, это было сделано в иллюстраторе, хотя в размере 16x16px после экспорта выглядит немного пиксельным
Любой логотип будет иметь размер 16 пикселей. Вот почему я предложил подход PNG, в котором используются файлы большего размера, которые затем масштабируются браузером, и конечный результат может и будет более четким.
..сниженный..
о, так экспортируйте значок в формате png с большим размером, например 256px, а затем внедрите его на мой веб-сайт, который уменьшит его для меня?
но если я хочу, чтобы это был .ICO, мне придется сделать его в 16px, и я не смогу использовать другой метод?
Illustrator: как сделать прозрачный фавикон неквадратного логотипа
СпросиСетьПолитика конфиденциальности1y, 1v