Как сделать фавикон в фотошопе
Всем, привет! Создание сайта — это сложный процесс, который не каждый может выполнить. Но немаловажную роль играет и дизайн сайта, его отображение для пользователей.
Именно внешний вид может повлиять на посещаемость ресурса. И чтобы веб-страничка выглядела завершенной, полной и узнаваемой стоит сделать favicon иконку для сайта.
Как сделать favicon иконку для сайта
Что такое favicon и для он нужен
Favicon (слово является сокращением от фразы Favorites Icon, что означает «значок избранного».) – это специальная иконка небольшого размера. Пользователи могут наблюдать ее слева от ссылки на сайт в адресной строке браузера или на открытой вкладке, закладке.
Помимо этого, данный значок используется для сохранения ссылки на ресурс на рабочий стол пользователя или другие любые папки операционной системы. Иконка очень маленькая, ее стандартным размером является 16х16 пикселей. Значок необходим для того, чтобы сделать сайт узнаваемым и уникальным. Также он облегчает пользователю поиск информации.
Как правило, если открыть сразу несколько вкладок, то название страниц сократится и нельзя сразу же узнать какая вкладка отвечает за определенный сайт. Но, фавикон иконки решили эту проблему. Пользователю достаточно запомнить, как выглядит значок посещаемого ресурса, чтобы быстро его отыскать.
Чтобы значок начал отображаться на сайте, необходимо поместить готовую иконку в формате .ico в корневую папку ресурса. Многие браузеры поддерживают иконки в разных форматах, в том числе GIF (даже анимированные значки) и PNG (с прозрачным фоном).
Как создать favicon иконку для сайта
Favicon можно сделать самостоятельно разными способами и при помощи различных ресурсов и программ.
Как создать фавикон в Фотошоп
Сделать favicon иконку в фотошопе достаточно просто. Весь процесс можно разделить на несколько этапов.
Этап 1. Технические требования
Прежде чем приступить к созданию непосредственно иконки для сайта, необходимо позаботиться о технических параметрах. Дело в том, что без специального плагина фотошоп не сможет понимать, а значит и сохранять файлы в расширении Windows Icon (ICO).
Плагин необходимо скачать и распаковать архив, скопировать его содержимое в папку с плагинами фотошопа. Путь к такой папке выглядит следующим образом “ С: Program Files Adobe Adobe Photoshop CS5.1 Плагины Форматы файлов ”.
Этап 2. Размеры
Для начала нужно открыть фотошоп и задать размер поля для нового проекта. Но не следует задавать размеры по иконке (16х16). На таком маленьком холсте не получиться сделать качественное изображение.
Лучше выбрать размеры побольше, а после того, как значок будет готов, его можно сжать до необходимых параметров. Чтобы задать размеры рабочего поля требуется перейти в Файл – Новый. Также это окно можно вызвать сочетанием клавиш Ctrl + N .
Также рекомендуется указать поле с прозрачным фоном. Так, например, иконка не будет просто квадратной картинкой в миниатюре, а будет логично встраиваться как гармоничный элемент
Этап 3. Создание
Создание иконки — это достаточно простое дело, пользователю необязательно иметь художественные навыки или полностью владеть инструментами фотошопа. Иконка такого типа не должна быть сложной, в ней нужно поместить изюминку сайта, по которой его можно узнать. Фафикон иконки мега популярных ресурсов выглядят односложно.
Например, видео хостинг ютуб имеет фавикон иконку в виде красного квадрата, внутри которого помещен белый треугольник. А у многих социальный сетей фавикон значок – это просто буквы (фейсбук, вконтакте).
В случае, если у сайта уже есть свой индивидуальный логотип в большом размере, то нужно попробовать его сжать до стандартов favicon иконки. Если логотип простой и в жатом виде выглядит четко, то его можно смело использовать. Но если изображение очень сложное, со многими мелкими деталями, то при сжатии оно будет плохо различимо и не подойдет для этой цели.
В таком случае лучше создать рабочее поле в фотошопе размером не менее 64х64 пикселей и в основных цветах сайта передать его главную идею. При создании favicon иконки следует руководствоваться правилом: чем проще – тем лучше.
Когда эскиз будет готов, его следует протестировать, оптимизировать и проверить как он выглядит в стандартном для иконки размере. Для этого необходимо нажать комбинацию клавиш «Alt+Ctrl+I» и задать размер готового изображения.
Рекомендуется также выставить интерполяцию бикубическую. Этот параметр позволит определить поплывет рисунок при уменьшении или нет.
Этап 4. Сохранение
После того, как иконка будет полностью готова, ее требуется правильно сохранить. Для этого нужно кликнуть на «Файл» в верхнем левом углу и из выпадающего меню выбрать «Сохранить как». Также это окно можно вызвать сочетанием клавиш « Shift + Ctrl + S ».
В поле «Имя файла» требуется указать «favicon.ico». А в строке «Тип файла» выбрать формат ICO из выпадающего меню. Такой пункт будет доступен только при правильной установке соответствующего плагина.
В случае, если плагин по каким-то причинам не удается установить, можно поступить другим образом. Сохранить готовый значок в формате PNG. После чего зайти на любой сайт онлайн конвектора изображений. И переделать favicon иконку из PNG в .ico.
Онлайн генератор
Есть специальные сервисы, которые автоматизируют создание favicon. Такие онлайн генераторы анализируют логотип сайта, который требуется загрузить на сервис, и выдают различные иконки на его основе.
Но для того, чтобы получить качественную фавикон иконку необходимо потрудиться над логотипом. Хорошо если он готов заранее, это ускорит процесс создание фавиконки до нескольких минут.
После того, как онлайн генератор выдаст варианты иконок, нужно просто выбрать наиболее понравившееся и скачать. Большинство сервисов сразу же показывают, как именно будут выглядеть иконки в стандартном размере.
Онлайн сервис
В случае если нет навыков использования фотошопа и других графических редакторов, но есть желание сделать favicon самостоятельно, то можно использовать специальные сервисы. Такие онлайн сервисы для ручного создания иконки выглядят примерно одинаково.
Как правило, это рабочее поле 16х16, поделенное на клеточки. Пользователь сможет самостоятельно сделать простую пиксельную картинку при помощи раскрашивания клеток (пикселей). После чего останется скачать готовый favicon и установить на сайт.
Как установить favicon в wordpress
Существует несколько способов установить favicon на сайт wordpress. Рассмотрим самые простые методы, которые не требуют много времени на реализацию.
Способ 1. Панель управления
Для вставки потребуется сделать следующее:
Зайти на панель управления. Перейти к «Внешний вид» - «Настроить».
Зайти в меню «Свойства сайта».
Кликнуть на выбор изображения и вставить иконку в размере не менее 512х512.
После чего панель самостоятельно его отмасштабирует и покажет, как будет выглядеть иконка в уменьшенной версии. Остается только сохранить изменения и перезагрузить сайт. Сразу же после этого иконка начнет отображаться на положенных ей местах.
Для этого метода вставки не нужно сохранять готовый вариант иконки в размере 16х16. Но это не значит, что можно вставить любое изображение или просто логотип сайта. Иконка должна хорошо выглядеть именно в стандартном маленьком размере, поэтому ее предварительно стоит проверить.
Способ 2. Использование специального плагина
Для установки иконки через специальный плагин требуется сделать следующее:
Зайти на главную панель wordpress. Перейти по «Плагины» - «Добавить новый».
В поиске найти « All In One Favicon » и установить его.
После установки плагина нужно перейти к его настройке.
В строках с пометкой ICO вставить изображение иконки и сохранить изменения. Сразу же после этого фавикон начнет отображаться.
Этот плагин позволит быстро установить фавикон. Если после установки иконка не отображается, то требуется несколько раз перезагрузить сайт и значок появится.
Заключение
Favicon - это индивидуальная метка сайта, которая должна легко запоминаться посетителями ресурса. Иконку можно сделать самостоятельно в любом графическом редакторе. А на сегодня у меня, всё! Остались вопросы? Пишите в комментариях! Хотите больше статей, подпишитесь на обновление блога . Пока.
Фавикон — это маленькое графическое изображение (картинка) в формате ico 16×16, которая отображается в адресной строке браузера напротив адреса сайта. При занесении такого сайта в избранное, фавикон также будет виден рядом с адресом сайта. В поисковой системе Яндекс, при выдачи тоже будет отображен фавикон сайтов, если конечно у этих сайтов он есть.
Вообще, по моему мнению фавикон для сайта вещь значимая и необходимая. Во первых, если у сайта красиво сделанный фавикон, то вероятность того, что человек зайдет на сайт с красивым и привлекающим внимание фавиконом, гораздо больше, чем у сайта без него.
Во вторых, людям легче отыскать именно Ваш сайт в избранном своего браузера или в поисковой выдаче Яндекса, по фавикону который сразу бросается в глаза.
Чтобы сделать фавикон для сайта существует два способа:
После того, как Вы скачали плагин, его надо распаковать и закинуть в папку с плагинами Фотошопа. По умолчанию путь до папки должен быть следующим: C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats . Теперь перезапускаем Фотошоп (если программа была запущена) и можем сохранять файлы в формате ico. Делаете изображение и выбираете — Файл —> Сохранить как —> Windows Icon (*.ICO)favicon.
Когда Вы сделаете фавикон в Фотошопе, его достаточно будет просто закинуть на сервер, в корневую папку Вашего сайта (обычно public_html ). И прописать в коде страниц сайта между тэгами :
Хотя и без этого кода фавикон будет отображаться в браузере. У меня на некоторых сайтах этот код не прописан в страницах сайта. В корневой папке на сервере лежит только фавикон и прекрасно отображается. Но на всякий случай можно и прописать этот код.
Заходите на сайт для изготовления фавиконок. Загружаете картинку любого формата и размера, с Вашего компьютера. Обо всём остальном позаботится выше стоящий сайт. Сервис сам уменьшит и преобразует картинку в формат ico. Для Вас будет предоставлена ссылка для закачки фавикона и код который надо будет прописать в страницы сайта. Вам останется лишь закинуть картину в корень сервера и прописать код. И теперь люди заходящие на Ваш сайт, будут видеть красивый и оригинальный фавикон.
Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера. Также такие иконки используются в закладках рядом с названием сайта, во вкладках браузеров или как ярлык для web-страниц на рабочем столе или других папках Windows. Под маленьким размером подразумевается 16 на 16 пикселей – стандартный размер для иконок данного типа. Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.
Приступаем к созданию
Так как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.
Дизайн иконки
Если у вас уже имеется готовый логотип большего размера, попробуйте уменьшить его до 16х16 пикселей и посмотрите, как хорошо он смотрится. Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.
Если вам кажется, что ваша иконка получилась не совсем такой, как вы хотели, продолжайте улучшать и видоизменять её до момента, когда она максимально будет похожа на вашу задумку. При работе с такими размерами этот процесс может занять у определенное время, прежде чем у вас все получится.
Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:
В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:
Если вы сомневаетесь, какой вариант подходит именно вам, пропишите обе строчки.
Не забудьте закачать отредактированные страницы обратно на сервер для отображения изменений в случае, когда изменения производились в локальной копии сайта.
Для использования иконки в формате GIF или PNG необходимо прописать следующие строчки:
Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.
Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.
Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:
16×16, 16-бит (256) цветов
16×16, 32-bit colors
32×32, 16-бит (256) цветов
32×32, 32-bit colors
48×48, 16-бит (256) цветов
48×48, 32-bit colors
Но не стоит слишком увлекаться и создавать много вариантов, так как с каждым добавлением favicon.ico увеличивается в размере, что может негативно повлиять на его загрузку.
Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:
“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).
Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.
В браузере “Opera” такой проблемы нет, поэтому после обновления вашей иконки достаточно простого обновления страницы (возможно несколько раз).
Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1. Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;
4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.
Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.
Однажды делала сайт-визитку для одного из своих клиентов и поймала себя на мысли, что обычный фавикон в формате .ico нельзя сделать в современном фотошопе, начиная с версии cs4 и выше.
Я раньше даже об этом и не задумывалась, поскольку делала такие фавиконы при помощи различных онлайн-конвертеров. Их тысячи в интернете, просто наберите в вашем поисковике: «конвертировать изображение в ico» или «сохранить изображение в ico», или еще как-нибудь, например, «перевести картинку в ico», и вам точно попадется один из сайтов-конвертеров, который вам бесплатно будет конвертировать изображение в ico. Но мы здесь собрались не для этого, а для того, чтобы научиться конвертировать картинку в ico самостоятельно.
Представим, что у нас есть вот такая картинка favicon.jpg размером 16х16 пикселей. Я специально выбрала этот минимальный размер для примера, потому что на нем хорошо будут видны различия миниатюр самих иконок.
Если вы думаете, что можно просто вручную поменять расширение изображения с .jpg на .ico, то вы ошибаетесь. Так иконка не получится и отображаться она будет такой же маленькой картинкой. Вот например так:
Поэтому, для того, чтобы сделать иконку в формате ico из обычного изображения в формате .jpg, .jpg, нам нужно будет воспользоваться фотошопом.
Однако, как видно на следующем фото, стандартная сборка фотошопа, начиная с версии Photoshop cs4, cs5 и cs6 не позволяет сохранять изображение в формате ico .
В этом случаем нам нужно установить специальный плагин ico для фотошопа, скачать бесплатно который можно здесь на моем сайте ниже.
Плагин ICO для 32-битной версии Windows x86
Плагин ICO для 64-битной версии Windows x64
*Не забудьте разархивировать скаченный файл.
Как установить плагин для расширений .ico на Photoshop?
Все очень просто!
Скаченный файл в архиве, поэтому вам потребуется лишь разархивировать файл и закинуть его в нужную папку под названием «File formats», там где у вас хранится фотошоп. Например:
- У меня Photoshop cs4 и находится он на диске C, значит, я ищу папку здесь:
C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats\
Копирую туда наш скачанный файл плагина .ico.
Также у вас может быть еще другой адрес этой папки:
C:\Program Files\Adobe\Adobe Photoshop CS4\App\Photoshop\Plug-ins\File Formats\
- Если у вас Photoshop cs5, то вероятнее всего адрес данной папки будет такой:
C:\Program Files\Adobe\Adobe Photoshop CS5\Required\Plug-ins\File Formats\
- Если у вас Photoshop cs6, то плагин ICO также нужно установить в эту папку:
C:\Program Files\Adobe\Adobe Photoshop CS6\Required\Plug-ins\File Formats\
Что касается версии Photoshop cc, то адрес папки с плагинами остался прежним. Т.е. наш скаченный плагин ico для photoshop cc устанавливаем по тому же пути, как и для версии Photoshop cs6. Только не забудьте скачать 64-битную версию плагина, если у вас 64-разрядная система.
Как сохранить картинку в формате ico?
После того, как мы скинули туда наш файл, просто запускаем фотошоп и загружаем нужную картинку. А далее, все как обычно: нажимаем Файл —> Сохранить как —> и выбираем уже наш появившийся формат .ICO.
Сохраняем и получаем результат – чудесную иконку 16х16 в формате .ico. Теперь ее уже можно будет поставить в качестве фавикона на своем сайте или просто использовать, в качестве иконки к какой-нибудь папке или файлу на рабочем столе вашего компьютера.
А о том как именно добавить фавикон на сайт, я расскажу уже в следующей статье.
Фавикон - маленькая иконка, расположенная слева от адресной строки веб-браузера, она в какой-то степени является частью бренда любого сайта. Помимо этого её используют в закладках для сайта, на вкладках браузера и в качестве значка ярлыка на рабочем столе компьютера. Размеры иконки фавикон составляют 16х16 пикселей. На скриншоте ниже представлены примеры иконок фавикон:
Скачивание плагина
Приступаем к работе
Откройте Фотошоп, перейдите во вкладку File > New (Файл - Создать) и создайте новый документ с разрешением 72 пикс/дюйм, в качестве размера установите 64х64 пикселя, так как оригинальный размер очень маленький, то с ним работать будет намного труднее.
Дизайн
Как только вы определились с дизайном, сразу же посмотрите как иконка будет смотреться в других разрешениях. Если вас что-то не устраивает, сделайте её более простой, а в качестве цветов используете цвета из палитры сайта, для которого создаётся эта иконка.
В качестве примера я использовал отпечаток лапы фиолетового цвета, небольшую часть изображения я окрасил в розовый цвет. Эту иконку я создавал при помощи векторных фигур.
Чтобы уменьшить размеры иконки до размера 16х16, пройдите в меню Image > Image Size (Изображение - Размер изображения) и измените размеры документа. В появившемся диалоговом окне в самом низу поставьте галочку возле Resample (Интерполяция) и из активированного списка выберите значение Bicubic Sharper (Бикубическая, четче) - это самый подходящий вариант, чтобы иконка при уменьшении не размылась. Если этого недостаточно, то вернитесь назад и повысьте контрастность изображения, а затем снова измените размер.
Сохранение
Теперь, когда ваш фавикон готов, перейдите в меню File > Save As (Файл - Сохранить как) и в диалоговом окне в качестве формата выберите ICO. Данный формат будет доступен в Фотошоп после установки плагина в Фотошоп.
После того как иконка фавикон сохранена в нужном формате, вам осталось загрузить её в корневую папку вашего сайта.
Читайте также: