Как сделать фавикон в фотошопе
Обновлено: 03.07.2024
А теперь вернемся к теме поста. Если на сайте нет фавикона, то он теряет многое. Во-первых, фавикон способен увеличить посещаемость с Яндекса. Спросите как? Очень просто. Дело в том, что Яндекс рядом с заголовком Title показывает еще и фавикон сайта. И если заголовки и описания двоих ресурсов примерно одинаковые, но на одном будет фавикон, а на другом нет, то посетитель, скорее всего, перейдет на ресурс с фавиконом.
Ну, и, во-вторых, такая маленькая иконка способна выделить ваш ресурс среди других. Поэтому фавикон обязательно должен быть ярким и запоминающимся. Вот давай попробуем его таким и создать.
Как сделать favicon для сайта с нуля
После того, как вы выбрали цвет, начинаем рисовать фавикон. Если вы нарисовали что-то неверно, то это можно удалить. Для этого поставьте галочку возле инструмента «прозрачный».
Вот я на за несколько минут сделал такой фавикон ;-).
Внизу, есть предварительный просмотр, и вы всегда можете посмотреть, что у вас получилось. После того, как вы нарисуете фавикон, его нужно будет скачать на компьютер. Для этого просто нажмите на кнопку «скачать Favicon».
Как сделать фавикон для сайта с готового изображения
Вы можете сделать фавикон с любого изображения. Это может быть ваша фотография, логотип сайта или что-то другое. Для этого нужно открыть программу фотошоп и загрузить туда изображения, которое вы хотите переделать на фавикон. Нажмите «Файл» — «Открыть».
Потом нужно обрезать изображения так, чтобы оно стало квадратным. Для этого я выбираю инструмент «Кадрирования» обвожу часть фото, которую я хочу оставить и нажимаю «Enter».
Потом нужно уменьшить изображения до 16 рх. Для этого выбираем на панели инструментов Изображения – Размер изображения.
Указываем ширину и высоту 16 рх и нажимаем «Ок».
Теперь нам нужно сохранить фавикон на компьютер. Для этого выбираем на панели инструментов Файл – Сохранить как. Указываем название изображения, формат iso и нажимаем «сохранить».
Если вы умеете пользоваться программой фотошоп, то можете без проблем сделать фавикон для сайта с нулю. Для этого создайте новый файл с шириной и высотой 16 px, потом рисуйте там что угодно и сохраняйте этот файл в формате iso.
Также в интернете есть очень много сервисов, где вы можете скачать фавикон для своего сайта. Вот ссылки на самые популярные:
Как сделать favicon для wordpress
После того, как вы сделали или скачали фавиконку, ее нужно как-то прикрутить до сайта. Я сейчас покажу, как это сделать на движке wordpress.
Сначала нужно закачать иконку на хостин по такому адресу: wp-content/themes/названия темы/images/
После этого зайдите в Панель управления – Внешний вид – Редактор, откройте файл header.php и пропишите там вод такой код, перед тегом «/head»:
В этом коде нужно изменить:
Теперь сохраните изменения и смотрите, что у вас получилось:
Может быть и такое, что после обновления сайта вы не увидите никаких изменений. Это связано с тем, что браузер загружает ваш сайт не с сервера, а с кэша. Поэтому вам нужно очистить кэш в браузере.
А если у вас на сайте есть плагин кэширования, например, Super Cache, то удалите кэш и там.
Потом опять обновляйте страницу, и проверяйте наличия фавиконки. Теперь она должна точно появиться, если вы правильно прописали путь к ней на хостинге.
Да, и еще одно. Яндекс будет показывать иконку в выдаче не сразу. Нужно немного подождать, чтобы робот переиндексирвоал ваш сайт.
Ну, а теперь все, что касается вопроса, как сделать favicon ico для сайта. Всем пока.
Всем, привет! Создание сайта — это сложный процесс, который не каждый может выполнить. Но немаловажную роль играет и дизайн сайта, его отображение для пользователей.
Именно внешний вид может повлиять на посещаемость ресурса. И чтобы веб-страничка выглядела завершенной, полной и узнаваемой стоит сделать 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 .
Также рекомендуется указать поле с прозрачным фоном. Так, например, иконка не будет просто квадратной картинкой в миниатюре, а будет логично встраиваться как гармоничный элемент
==> Почему я решил обновить php версию сайта — как это сделать за 10 минутЭтап 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 - это индивидуальная метка сайта, которая должна легко запоминаться посетителями ресурса. Иконку можно сделать самостоятельно в любом графическом редакторе. А на сегодня у меня, всё! Остались вопросы? Пишите в комментариях! Хотите больше статей, подпишитесь на обновление блога . Пока.
Фавикон - маленькая иконка, расположенная слева от адресной строки веб-браузера, она в какой-то степени является частью бренда любого сайта. Помимо этого её используют в закладках для сайта, на вкладках браузера и в качестве значка ярлыка на рабочем столе компьютера. Размеры иконки фавикон составляют 16х16 пикселей. На скриншоте ниже представлены примеры иконок фавикон:
Скачивание плагина
Приступаем к работе
Откройте Фотошоп, перейдите во вкладку File > New (Файл - Создать) и создайте новый документ с разрешением 72 пикс/дюйм, в качестве размера установите 64х64 пикселя, так как оригинальный размер очень маленький, то с ним работать будет намного труднее.
Дизайн
Как только вы определились с дизайном, сразу же посмотрите как иконка будет смотреться в других разрешениях. Если вас что-то не устраивает, сделайте её более простой, а в качестве цветов используете цвета из палитры сайта, для которого создаётся эта иконка.
В качестве примера я использовал отпечаток лапы фиолетового цвета, небольшую часть изображения я окрасил в розовый цвет. Эту иконку я создавал при помощи векторных фигур.
Чтобы уменьшить размеры иконки до размера 16х16, пройдите в меню Image > Image Size (Изображение - Размер изображения) и измените размеры документа. В появившемся диалоговом окне в самом низу поставьте галочку возле Resample (Интерполяция) и из активированного списка выберите значение Bicubic Sharper (Бикубическая, четче) - это самый подходящий вариант, чтобы иконка при уменьшении не размылась. Если этого недостаточно, то вернитесь назад и повысьте контрастность изображения, а затем снова измените размер.
Сохранение
Теперь, когда ваш фавикон готов, перейдите в меню File > Save As (Файл - Сохранить как) и в диалоговом окне в качестве формата выберите ICO. Данный формат будет доступен в Фотошоп после установки плагина в Фотошоп.
После того как иконка фавикон сохранена в нужном формате, вам осталось загрузить её в корневую папку вашего сайта.
Что нужно для начала работы?
- Ваш логотип в размере не меньше 512х512 пикселей (обязательно квадратный);
- .PNG формат изображения;
- Графический редактор Adobe Photoshop или GIMP.
Создаем фавикон с помощью Adobe Photoshop
Фавикон на прозрачном фоне:
2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.
4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть.
Если ваш логотип выглядит отлично, то переходите к шагу 4.
Фавикон на фоне с корпоративным цветом:
1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом.
Готово! Теперь, вы можете использовать фавикон на сайте!
Преимущества использования .ICO перед .PNG или .GIF
Конвертируйте .PNG в .ICO с помощью онлайн-конвертеров
2) Выберите файлы для конвертации на компьютере, нажав кнопку “Выберите файлы”, или перетащив файлы в соответствующее поле, и нажмите кнопку “Начать конвертирование”.
3) Теперь, нажмите “Загрузить”, чтобы скачать ваш файл в формате .ico на компьютер. Также, есть возможность загрузить файл в облачное хранилище или скачать файл в виде ZIP.
Как установить фавикон на WordPress?
1) На WordPress откройте “Административную панель”.
2) Войдите в раздел “Appearance”
3) Нажмите на “Theme Editor”.
4) Нажмите на файл, который называется “Header” или “Header.php”, чтобы редактировать.
6) Сохраните изменения.
Обновлено 17 марта, 2020
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Читайте также: