Как сохранить ico в фотошопе
Обновлено: 06.07.2024
Что такое фавикон?
Фавикон (также называемый веб-сайтом, URL-адресом, ярлыком или значком закладки) – это небольшой значок, который отображается слева от URL-адреса страницы, которую вы просматриваете, в адресной строке браузера, а также в углу текущей вкладки браузера или окна браузера просматриваемой веб-страницы. Если у вас открыто несколько вкладок, он служит удобной визуальной очередью, которая поможет вам быстро распознать личность веб-страницы.
Как должен выглядеть фавикон?
Как правило, вам нужно создать фавикон, отражающий индивидуальность вашего веб-сайта. Это можно сделать, создав небольшую иконку вашего логотипа или часть вашего веб-сайта или названия компании, а также используя цветовую схему вашего веб-сайта. Вы хотите, чтобы фавикон оставался в головах людей как небольшое напоминание о том, кто вы есть.
Характеристики значка Favicon (файл .ICO)
- Квадратный рисунок
- 16 x 16 пикселей (хотя вы можете начать с 64 x 64 пикселей, чтобы дать дизайну больше свободы)
- Заканчивается расширением .ico.
Фавикон первоначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо .ico (PNG, GIF (включая анимированные GIF)), но .ico чаще всего используется во всех браузерах и, таким образом, является стандартом, который следует использовать для сайт.
Создайте файл Favicon (.ICO) в Photoshop
Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл. Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, нажмите «Сохранить для Интернета» и сохраните в формате .jpg с разрешением 72 DPI (точек на дюйм).
Скрыть файл в .ICO с помощью инструмента конвертера
Зайдите на ICO Converter — бесплатный веб-сайт, который преобразует ваш файл .jpg в .ico. Нажмите «Обзор» и импортируйте созданный файл .jpg. Выберите размер и разрядность и сохраните на свой компьютер.
Добавьте значок Favicon на свою веб-страницу
Мы не рекомендуем вам использовать относительный путь (href="favicon.ico"), поскольку это может привести к потере путей при перемещении вашего веб-сайта, а также к краже ссылок. Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок значка.
Загрузить фавикон на свой веб-сервер
После того как вы добавите URL-адрес файла значка на свою веб-страницу, убедитесь, что файл favicon.ico действительно находится там, где вы его указали (в приведенном выше примере — в корне документа (корневая папка вашего веб-сайта — например, /public_html или /www на серверах Linux)).
Посмотрите на фавикон в действии!
После этого перезапустите веб-браузер, и вы должны увидеть свою фавиконку — как слева от строки URL-адреса, так и в верхнем левом углу вкладки веб-страницы, которую вы посещаете. Вы можете увидеть наш новый блестящий значок на снимке экрана рядом с значком для Google Analytics.
Является ли Photoshop по-прежнему лучшим?
Adobe Photoshop по-прежнему является стандартным программным обеспечением для редактирования фотографий, но остается ли он лучшим? Наши эксперты углубляются и узнают в нашем обзоре Photoshop. Узнайте, на что способна последняя версия Photoshop и чем она отличается от конкурентов!
Этот плагин для открытия и сохранения в формате .ico в Photoshop существует уже некоторое время, но я не могу заставить его работать для CS6. Согласно этому вопросу на форумах Adobe, плагин работает, если он установлен в C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Required\Plug-Ins\File Formats, но он ничего не делает. Знаете ли вы какие-либо альтернативные плагины для CS6? Я использую 64-разрядную версию Win Seven.
EDIT: плагин работает, но не для изображений размером более 256 x 256 пикселей.
Спасибо @Johannes. Но я обнаружил два недостатка этого сайта (и других, которые я пробовал): он не превышает 256 пикселей, а при преобразовании ниже 128 пикселей создается пакет с автоматически изменяющимися значками.
Ах, я использую его только для настройки собственного рабочего стола, а не для чего. Спасибо, я не знал об этих ограничениях.
Поддерживает ли формат .ico изображения размером более 256 × 256? Я никогда не видел инструмент .ico, который позволяет увеличивать изображения (хотя, возможно, что-то изменилось с тех пор, как я смотрел в последний раз).
12 ответов 12
Полный путь: C:\Program Files\Adobe\Adobe Photoshop CS6 (64-разрядная версия)\Required\Plug-Ins\File Formats. Если он не указан в File Formats , он не будет отображаться в параметрах экспорта.
Выяснил, почему это "не работает".При попытке сохранить значок размером 512x512 опция сохранения как ICO не отображается в списке. Итак, наконец-то есть кое-что, что можно сделать только в GIMP: сохранить значки 512x512! :D
Я не уверен, применимо ли это в CS6, но метод, который я использовал в CS4 и 5, заключается в том, чтобы просто создать фавикон размером 16 x 16 пикселей, а затем сохранить для Интернета.
Я сохраняю как .jpg или .jpg в зависимости от фона, но когда он запрашивает имя файла, я просто добавляю .ico , например favicon.ico . Фавиконы работают нормально.
Я использую это только для создания фавиконов, поэтому я не уверен, что это будет работать так же для создания реальных значков.
Вы пробовали? Я попытался создать ico-файл для использования в приложении в Visual Studio, но не смог заставить его работать.
Это будет работать, только если вы используете файл в местах, где также принимаются PNG. Расширение файла не меняет сам файл — оно просто сообщает программе, что это, вероятно, ICO, а не PNG. Поскольку файл, который вы сохраняете, на самом деле является PNG, то есть он закодирован как PNG, вам потребуется приложение, которое понимает, как декодировать эту информацию, чтобы иметь возможность использовать ее, независимо от того, какое расширение вы используете. Для Интернета, как правило, также принимаются файлы PNG, так что это не проблема.
Решение заключается в использовании 32-разрядной версии Photoshop CS6. Я не знаю, всегда ли это так, но у меня есть Creative Cloud, и при установке Photoshop автоматически устанавливаются как 32-разрядная, так и 64-разрядная версии. Просто найдите в меню «Пуск» программу «Adobe Photoshop CS6» (не «Adobe Photoshop CS6 (64 Bit)»). Вам нужно будет установить плагин в следующую папку: C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Required\Plug-Ins\File Formats (обратите внимание на x86!)
Решением проблемы для CS6 являются свойства, назначенные папке «Форматы файлов», перейдите в эту папку (C:\Program Files\Adobe\Adobe Photoshop CS6 (64-разрядная версия)\Required\Plug-Ins\File Форматы), щелкните правой кнопкой мыши, выберите свойства и отключите «Только чтение», не отмечен, не синий, пустой. Затем примените или сохраните изменения, после чего извлеките файл в папку. Теперь все должно работать нормально.
Причина, по которой это происходит, заключается в том, что вы экспортировали файл в эту папку, он, казалось, скопировался в папку, вы закрыли папку и открыли Photoshop, и это не сработало. Если бы вы вернулись в папку, вы бы увидели, что файла там нет из-за настроек папки только для чтения.
Фавиконки – это, казалось бы, (и в буквальном смысле!) небольшой, но важный способ продвижения вашего бренда на веб-сайте. Мы визуалы по своей природе, а это означает, что мы с большей вероятностью узнаем эту маленькую синюю иконку птицы для Twitter или этот конверт с красной линией для Gmail быстрее, чем мы их имена при просмотре нашей панели закладок. Вы можете сами создавать фавиконы, создавая файлы ICO в Photoshop. Такой курс, как краткое руководство по Photoshop CC, расскажет вам о значках избранного и множестве других вещей, о которых вы даже не знали, что Photoshop может делать.
Наличие уникального значка для вашего веб-сайта облегчит пользователям поиск вашего сайта на занятой панели закладок или среди ряда вкладок, а также убедит их, когда они перейдут на вашу страницу, что они находятся на нужное место.
Несомненно, фавикон необходим всем, у кого есть веб-сайт. Вопрос только в том, как его сделать? Ну, это начинается с формата файла Photoshop ICO.
Что такое фавикон?
Во-первых, что такое фавикон? Сокращение от иконка избранного, а также, помимо прочего, описываемая как значок ярлыка, значок вкладки или значок закладки, фавикон – это небольшой мини-логотип, обычно размером 16 × 16, который вы можете использовать на своем веб-сайте. . Если браузер поддерживает это, он будет отображать фавикон в таких местах, как адресная строка, панель закладок, вкладки, история страниц, данные просмотра и т. д.
Favicons сохраняются в виде файлов ICO — формата файлов, который сохраняет несколько изображений разного размера для целей масштабирования. Все значки в Windows, от исполняемых файлов рабочего стола до приложений меню "Пуск", сохраняются с расширением .ico.
Создание файлов ICO в Photoshop
Photoshop — отличная и гибкая программа редактирования графики для создания пользовательских значков избранного. Однако для сохранения файлов с расширением .ico в Photoshop необходимо загрузить отдельный подключаемый модуль. К счастью, это очень легко сделать.
Шаг 1. Установите подключаемый модуль
Подключаемый модуль можно найти на веб-сайте Telegraphics. Вы ищете загружаемый файл с пометкой ICO (Windows Icon) Format, который доступен как для Mac, так и для Windows.
Чтобы установить подключаемый модуль, сначала убедитесь, что Photoshop закрыт.Извлеките загруженные файлы и поместите их в подпапку «Плагины» > «Форматы файлов» в указанном месте Adobe Photoshop.
Теперь, когда вы открываете Photoshop, создаете новый документ, нажимаете «Сохранить как» и раскрываете раскрывающееся меню, тип файла ICO должен быть вариантом.
Шаг 2. Создайте свой значок в документе размером 64 x 64
Если вы настоящий профессионал и можете работать в пределах 16 x 16 пикселей, дерзайте! Но если вам нужно немного больше места для работы, вы можете начать с документа размером 64 x 64 пикселя, а затем уменьшить его масштаб.
Если вы знаете, как работают все функции графического дизайна и редактирования в Photoshop, у вас не должно возникнуть проблем с созданием базовой иконки. Если вы не знаете, как работает какой-либо из инструментов палитры, вам следует сначала прочитать об этом! Попробуйте этот курс Photoshop Essentials, а затем вернитесь к этому руководству, когда станете мастером графического дизайна!
Для нашего примера фавиконки мы создали простой градиентный фон и одну букву «А», чтобы обозначить наш «бренд».
Шаг 3. Уменьшите масштаб до 16 × 16
Теперь пришло время изменить размер значка, чтобы он был совместим с веб-браузерами. Перейдите в «Изображение» > «Размер изображения» в меню вверху или нажмите Alt+Ctrl+I и измените размер на 16×16. Убедитесь, что это пиксели, а не дюймы.
Хорошо также открыть раскрывающееся меню с надписью Resample и выбрать параметр Bicubic Sharper. Это гарантирует, что изображение не слишком сильно размывается при изменении размера, но если оно все еще слишком сильно теряет резкость, вы всегда можете настроить эти свойства с помощью параметров фильтра.
Если все сделано правильно, вы должны увидеть, как ваша иконка 64 x 64 превращается в фавиконку 16 x 16!
Скругление углов фавикона может придать ему совершенно новый вид. В зависимости от того, какой стиль вы собираетесь использовать, возможно, стоит научиться делать это.
В этом кратком руководстве по Photoshop CC показано, как легко это сделать с помощью новых функций Photoshop CC. Для более старых версий рассмотрите этот учебный курс Photoshop, посвященный освоению основ.
Шаг 4. Сохраните фавикон в виде файла ICO или файла .ico
Этот шаг прост. Если вы правильно установили плагин, теперь пришло время перейти к «Файл»> «Сохранить как», открыть раскрывающееся меню и выбрать параметр ICO (значок Windows) (*.ICO). Нажмите кнопку "Сохранить", и вам будет предложено выбрать формат значка.
Рекомендуется сохранить файл как стандартный ICO, поскольку формат PNG (Vista) не очень совместим.
После нажатия кнопки "ОК" вы можете запутаться. Почему приложение Photoshop по-прежнему ссылается на наш значок как на .psd, хотя мы только что сохранили его как ICO? Это потому, что файл ICO нельзя редактировать в Photoshop. Просто попробуй открыть его и увидишь. Как только вы сохраните свой значок как ICO, этот файл ICO станет окончательным. Если вы хотите внести в него изменения, вам придется продолжать редактировать файл .psd, пока вы не будете удовлетворены конечным продуктом, и снова сохранить его как ICO.
Использование файла ICO на вашем веб-сайте
Итак, у вас есть новый красивый значок значка, сохраненный в виде файла ICO, но как сделать так, чтобы он отображался на панелях закладок и вкладках вашего веб-сайта?
Важно знать первое правило: ваш ICO-файл следует сохранить (или переместить) в каталог, где находится ваша домашняя страница, обычно это корневая папка. Если вы сохраните его в отдельном каталоге изображений или в другом месте, браузер не сможет его найти.
Затем убедитесь, что между тегами в HTML-документе вашей домашней страницы вставлено следующее:
FaviconNameHere следует заменить именем вашего файла .ico фавикона. По умолчанию браузеры будут искать «favicon.ico», поэтому лучше сохранить его как таковой.
И вы сделали это! Вы создали уникальный фавикон для своего сайта и научились им пользоваться. Дополнительные советы по веб-дизайну и графическому дизайну можно найти на следующих курсах Udemy:
Изображения, которые используются в качестве значков в операционной системе Windows, должны быть сохранены в формате ICO. По умолчанию программа редактирования изображений Adobe Photoshop не поддерживает формат ICO, что делает невозможным создание файла ICO в Photoshop на компьютере Mac с конфигурацией по умолчанию. Однако с помощью подключаемого модуля формата файла пользователи Photoshop могут создавать файлы ICO на Mac.
Загрузить подключаемый модуль
Прежде чем вы сможете создать файл ICO, вы должны сначала загрузить подключаемый модуль. Откройте веб-браузер и перейдите на сайт Telegraphics.com.au. Выберите параметр «Формат ICO», а затем ссылку для загрузки под заголовком «Mac», которая соответствует вашей версии Photoshop. Доступны следующие варианты: «Mac CS2/3/4», «Mac 68k», «Mac CS5» и «Mac Classic (PowerPC)».
Установите плагин
Для правильной работы плагина его необходимо установить в правильную папку. Дважды щелкните файл DMG подключаемого модуля, чтобы смонтировать образ, и перетащите файл подключаемого модуля на рабочий стол компьютера. Щелкните значок «Finder» в доке компьютера, а затем значок папки «Приложения». Щелкните папку «Adobe Photoshop», а затем папку «Плагины». Перетащите файл плагина в папку «Форматы файлов» внутри папки «Плагины».
Создание файла ICO
Установив подключаемый модуль, вы готовы создать файл ICO. Щелкните значок «Finder» в доке компьютера, а затем папку «Приложения». Дважды щелкните значок приложения «Adobe Photoshop», чтобы запустить приложение. Откройте или создайте изображение, которое вы хотите сохранить в формате ICO, нажмите меню «Файл» и выберите опцию «Сохранить». Щелкните стрелку справа от заголовка «Формат файла» и выберите параметр «ICO (значок Windows)». Нажмите кнопку "Сохранить", чтобы создать файл.
Устранение неполадок
Если у вас возникли проблемы с использованием подключаемого модуля, сначала необходимо убедиться, что он правильно установлен. Щелкните меню «Photoshop» и наведите курсор мыши на параметр «О подключаемом модуле». Если в появившемся боковом меню указано «ICO (значок Windows)», плагин установлен правильно. Если его нет в списке, закройте Photoshop и повторите процедуру установки. Кроме того, вы не можете сохранить изображение размером более 256 пикселей в высоту или ширину в формате ICO. Если изображение больше указанной ширины или высоты, формат ICO не будет отображаться в раскрывающемся меню «Формат файла».
Читайте также: