Создание иконки для сайта (favicon.ico) (Web Мастерская :: Статья: 265)
Иконка для сайта (файл favicon.ico), Favicon – сокращение от Favorite Icon, в переводе: любимая иконка.
Иконка сайта – это маленькая картинка, которая несёт в себе логотип своего сайта. Ресурс с иконкой становится непохожим на другие, икона придаёт сайту индивидуальность. Картинка размером 16 на 16 пикселей характерна для профессионально сделанных сайтов. Иконка отображается в адресной строке, в названии и в закладках браузера, ещё в результатах поиска Яндекс, так что, если икона сайта грамотно оформлена, есть возможность, что пользователь выберет именно Ваш проект и переедет по ссылке.
Где же брать икону или как её сделать? Тут всё очень просто: можно качать иконки с Интернета в архиве и выбирать. Но здесь так, если скачали Вы и она Вам понравилась, может кто-то скачал такую же и вставил её на свой сайт. По мне, так лучше быть непохожим на других, поэтому делаем сами.
Очень хорошо, если у Вас есть специальная программка для создания иконок: нарисовали картинку, прогнали через прогу и логотип готов. Но если такой машины у Вас нет, не расстраивайтесь. Быстрый и абсолютно бесплатный способ сделать значок для Вашего проекта — это воспользоваться сервисом Favicon.ru.
Чтобы воспользоваться сервисом Favicon.ru, Вам необходимо за — ранее подготовить изображение будущей иконки. Делайте изображение квадратным, т.к. сервис уменьшает его до размера 16 на 16 пикселей и, если оно изначально не-квадратное, может выйти некачественный рисунок логотипа. Размер файла должен быть не больше 300 кб. Затем изображение нужно загрузить на сервис Favicon.ru и нажать кнопку «Создать favicon.iсo«, после скачать свеже испеченную иконку, нажав на кнопку «Скачать favicon.ico!». Иконка готова!
После создания логотипа Вашего сайта, необходимо вставить иконку в сам сайт, для этого нужно между тегами <head> и </head> прописать следующие:
<linkrel="shortcuticon"href="favicon.ico"/>
ico"/>Файл favicon.ico должен находится в одной папке с сайтом, в другом случае указывайте полный адрес местонахождения файла. Написав код на каждой странице, стоит проверить проделанную работу в разных браузерах. Для этого перейдите на сайт, где была добавлена иконка и, если всё выполнено правильно, то в адресной сроке Вы увидите свой логотип.
В результатах поиска Яндекс икона может появиться не сразу. Это связано с временем обновления КЭШа, срок появления иконки доходит до нескольких месяцев.
Хочу поделиться ещё одним сервисом создания иконки: http://www.favicon.cc/ на мой взгляд этот сервис лучше чем выше представленный.
Возможности:
- Создавать иконку с прозрачным фоном.
- Создавать анимированную иконку.
Как пользоваться:
- Выберите цвет.
- Рисуйте свою картинку или редактируйте загруженную.
- Скачайте готовую иконку (бесплатно).
Автор: Slash 11:27 20.06.2017
Как сделать иконку в формате ico: быстро и качественно
Содержание:
- Незаметный элемент, который откладывается в подсознании каждого
- Как создать фавикон всего за 2 минуты
- Где искать готовые иконки
- Творческая работа для профессионалов и рвущимся в специалисты
Доброго времени суток, уважаемые читатели. Иногда, незначительная вещь может сыграть на руку. Сегодня поговорим о таких вот практически незаметных штуковинах, которые приносят существенную пользу сайту.
Из этой статьи вы узнаете зачем нужны фавиконы, где их искать и как сделать иконку в формате ico просто и быстро.
Незаметный элемент, который откладывается в подсознании каждого
Фавикон – это маленькая картинка. В Яндексе она появляется рядом с названием портала уже в поиске, а также обязательно отображается в браузере, стоит вам открыть ресурс.
Вы наверняка обращали на них внимание.
Именно для этого-то они и используются. Иконки способствует запоминанию того или иного ресурса, ведь визуальная информация усваивается значительно быстрее и проникает в само подсознание. Вы можете один раз увидеть человека, проболтать с ним три часа и ковыряться в память очень долго стоит встретить его во второй раз. Визуальная информация (лицо) врезается в память гораздо глубже, чем любая другая.
Если вы увидите значок два или три раза, это отложится на подсознательном уровне, вы будете доверять порталу и охотнее выберете именно его из общей массы.
Если вы ищете информацию по определенному запросу и открываете несколько вкладок, то первыми вы будете осматривать те, фавиконы которых вам знакомы, а остальные, скорее всего, закроете, если вас удовлетворят полученные сведения из первых источников.
Расскажу историю о том, как иконка для сайта сыграла со мной злую шутку. Мне было нужно скачать какую-то книгу. Увидел я знакомый фавикон, дизайн тоже я видел не в первый раз. Отлично, я тут уже был! Нажал на скачивание практически не задумываясь.
Не успел сохранить, как антивирусник заверещал диким криком, а комп было уже не спасти, пришлось переустанавливать систему. Только в этот момент я вспомнил откуда я знаю этот сайт и хорошо его помню. Точно такая же ситуация случилась около года назад, на этом же ресурсе.
Как создать фавикон всего за 2 минуты
Иконка для вашего сайта может быть в формате png или ico, размером 16 х 16 пикселей.
Вы можете воспользоваться конвертером и создать фавикон из любой картинки. Например, тут https://www.icoconverter.com/. Выберите файл.
Вот, например, я уже подготовил рисунок. Лучше всего выбирать формат png, тогда края будут прозрачными.
Выбираем 16 пикселей. Некоторые предпочитают изображения в 8 бит (показатель Bit depth). Тогда картинка будет грузиться быстрее. Мне кажется, что это уже не особо актуально. Используйте красивые и качественные вещи. Это будет гораздо полезнее.
Итак, казалось бы, все. Однако, у меня вылезает ошибка.
Дело в том, что размер изображения превышает допустимые нормы. Картинка должна быть не более 3 мб.
Можно сжать и обрезать ее в Photoshop или Paint, но я покажу вам другой вариант. Если вы скачали изображение в гугле, то найдите его вновь, а затем запустите «Поиск по картинке».
Теперь выберите «Маленькие».
Скачайте то же самое фото, но меньшего размера.
Конвертируем снова.
Готово. Фавикон уже в ваших загрузках, можно добавлять на сайт.
Где искать готовые иконки
Более простой и честный способ обрести иконку скачать ее с онлайн сервиса https://www.iconsearch.ru/. Использование этих картинок разрешено администрацией и не преследуется по закону. Никакого авторского права. Введите любое название в поисковую строчку и готово.
Находите изображение в формате png и ico, скачивайте и устанавливаете на сайт.
Но что делать, если хочется создать своими руками? В этом нет ничего сложного.
Творческая работа для профессионалов и рвущимся в специалисты
Любое дело – это хорошо. Круто, если вы тянетесь к новым знаниям и готовы делать всякие мелкие штучки, чтобы развивать свои способности. Если у вас есть желание самому придумать что-то интересное для портала, то вам понадобится бесплатный сервис: https://favicon.ru/.
Выбираете цвет.
Рисуем в предложенном для этого поле.
Параллельно следите за результатом. Затем скачиваете и готово.
Быть может, вас вдохновит использование готовых рисунков. Выберите файл с компьютера.
Затем кликните «Далее».
И ваша картинка превратится в 8-битный фавикон. Воспользуйтесь прозрачностью, чтобы избавиться от фона.
Вот такой результат у вас получится. Не знаю как вам, но мне, откровенно говоря, он не особенно нравится.
Я бы с большим удовольствие использовал для этой работы фотошоп (Как быстро научиться работать с Photoshop).
Создал бы иконку, сохранил ее в png, а затем конвертировал при помощи https://www.icoconverter.com. Да, работы значительно больше, зато результат будет интереснее и красивее. Хотя, выбирать вам.
Посмотрите видео, в котором парень за 9 с небольшим минут, создает потрясающую иконку.
Если вам понравился этот ролик и вы хотите более углубленно изучить фотошоп, то порекомендую вам курс Зинаиды Лукьяненко (Фотошоп с нуля в видеоформате VIP 3.0). Буквально за несколько недель вы овладеете всеми навыками, которые нужны для работы с этой программой.
Я не устану повторять, что техническая сторона – это не такая проблема. Важно отточить свои навыки, научиться создавать крутые проекты, которые работают. А сделать это можно только на практике. После того, как получишь все базовые знания относительно технологий.
Дальше уже идет опыт и практика.
Сперва на одно изображение уходит несколько часов, а со временем тебе уже становится очевидно какие цвета сочетаются, приемы, которые лучше применить в том или ином случае. Нет ничего приятнее, чем смотреть за тем, как работают профессиональные дизайнеры. Это действительно потрясает.
Не тратьте время на бессмысленное постижение, развивайте собственный талант. Не стоит быть похожим на лесоруба из сказки, который до конца жизни пытался найти самый быстрый способ работы топором, но дожил до старости и не срубил ни одного дерева. Он все время уделял беседам, рассуждениям, книгам и иным поискам ответа на волнующий его вопрос. К концу жизни у него уже не осталось сил, чтобы проверить работает ли лучший вариант – просто делать.
Делайте все своевременно. Совсем скоро вы обязательно поймете, как можно работать проще, быстрее и самым лучшим образом. На данном этапе поставьте себе цель выполнять задачи, хотя бы как-то, и у вас обязательно получится дойти до конца с невероятным багажом знаний.
Если вам понравилась эта статья – подписывайтесь на рассылку. Вы сможете получать актуальную информацию, которая поможет вам найти себя в интернете и зарабатывать неплохие деньги на том, что вам понравится: дизайн, написание текстов, верстка и даже руководство всеми этими процессами. Каждый найдет что-то для себя.
Удачи вам в ваших начинаниях. До новых встреч.
Как создать иконку из JPEG | Малый бизнес
Шон Манн
Преобразование ваших любимых изображений JPEG в файлы значков дает вам полный контроль над внешним видом значков на вашем рабочем столе. Windows поставляется с небольшим набором значков на выбор, но многие предпочитают вместо этого использовать свои собственные значки. Иконки используют расширение файла ICO, но из-за проблем с форматированием файла просто изменить расширение файла JPEG на ICO не получится. К счастью, существует несколько веб-сайтов, которые позволяют бесплатно загружать и конвертировать файл JPEG в файл ICO. Некоторые веб-сайты даже предлагают расширенные параметры, такие как поворот изображения, размер значка, разрядность и возможность создавать значки для других операционных систем.
iConvert
Перейдите на веб-сайт iConvert.
Нажмите кнопку «Обзор…» и выберите изображение в формате JPEG с вашего компьютера.
Нажмите кнопку «Конвертировать».
Прокрутите вниз и нажмите кнопку «Загрузить» рядом с нужным типом значка и операционной системой. Значки предоставляются для операционных систем Mac, Windows и Linux.
CoolUtils
Перейдите на веб-страницу «Бесплатный онлайн-конвертер изображений» на веб-сайте CoolUtils.
Нажмите кнопку «Обзор» и выберите изображение JPEG, которое вы хотите преобразовать.
Выберите опцию «ICO» в разделе «Установить параметры конвертации».
Нажмите кнопку «Загрузить преобразованный файл», чтобы загрузить файл значка.
ICO Converter
Перейдите на веб-сайт ICO Converter.
Нажмите кнопку «Обзор…» и выберите изображение в формате JPEG.
Выберите размер значка и разрядность значка. Для большинства систем рекомендуется размер от 16 x 16 пикселей до 48 x 48 пикселей. Большинству пользователей следует оставить для параметра битовой глубины значка значение «16,7 млн цветов и альфа-прозрачность».
Нажмите кнопку «Конвертировать», чтобы преобразовать изображение и загрузить новый файл значка.
Ссылки
- iConverticons: Конвертировать иконки
- CoolUtils: Бесплатный онлайн-конвертер изображений
- ICO Converter: Онлайн-конвертер ICO
Советы
- Изображения значков представляют собой квадраты. Может быть полезно сначала обрезать или изменить размер прямоугольного файла JPEG, чтобы он имел равные размеры по ширине и высоте, чтобы результирующее изображение значка не растягивалось и не искажалось.
- Размеры значков до 48 x 48 пикселей рекомендуются для систем Windows XP. Windows Vista и более новые версии поддерживают размеры до 256 x 256 пикселей. Маленький значок Windows имеет размер 16 x 16 пикселей, средний значок — 48 x 48 пикселей, большой значок — 256 x 256 пикселей, а очень большой значок — 256 x 256 пикселей.
- В одном файле значка может храниться несколько изображений, каждое из которых имеет разные размеры и разрядность.
Маленький значок Windows имеет размер 16 x 16 пикселей, средний значок — 48 x 48 пикселей, большой значок — 256 x 256 пикселей, а очень большой значок — 256 x 256 пикселей.Биография писателя
Шон Манн работает писателем-фрилансером с 2010 года. Обладая глубокими знаниями и опытом в таких технологических областях, как компьютерное программное обеспечение, аппаратное обеспечение, Интернет и программирование, он создает онлайн-контент для различных веб-сайтов. Манн имеет степень бакалавра компьютерных наук Университета штата Огайо.
Как создать свои иконки для Windows?
В этой статье содержится информация по следующим темам: • Создать значок Windows из существующего изображения • Создание значков в стиле Windows с использованием объектов изображения |
В этом разделе мы рассмотрим, как создавать значки Windows.
стандартная винда значки теперь включают следующие форматы изображений (форматы, выделенные серым цветом, являются необязательными):
| 256×256 — RGB/А | 64×64 — RGB/А | 48×48 — RGB/A | 32×32 — RGB/А | 24×24 — RGB/А | 16×16 — RGB/A |
| 256×256 — 256c | 64×64 — 256с | 48×48 — 256с | 32×32 — 256с | 24×24 — 256c | 16×16 — 256с |
| 256×256 — 16c | 64×64 — 16с | 48×48 — 16c | 32×32 — 16с | 24×24 — 16с | 16×16 — 16с |
Проблема в том, что если просто сделать иконку и сохранить ее в стандартном для Windows XP формате ICO, результирующий файл будет весить около 400Кб на диске.
Чтобы получить больше информации о значках Windows, мы рекомендуем вам прочитать этот раздел: Знакомство с значками Vista
Создание значка Windows из существующего изображения
Ниже приведено пошаговое руководство по созданию сжатого значка Windows. с помощью Axialis IconWorkshop. Вы можете скачать 30-дневную пробную версию IconWorkshop здесь.
1. Создайте версию изображения значка размером 256×256 с помощью любого графического/векторного редактора. Сохраните свою работу с плавной прозрачностью (альфа-канал 32 BPP), используя формат файла, совместимый с Axialis IconWorkshop: BMP, PNG, JP2000, PSD.
Вы также можете перевести
свою работу из Adobe Photoshop® с помощью подключаемого модуля переноса Axialis (см.
этот учебник) или вы можете создать значок, собрав несколько объектов изображения (см. этот учебник).
В этой процедуре мы будем использовать этот файл: down.png (мы рекомендуем вам скачать его и сохранить на диске — щелкните правой кнопкой мыши и выберите «Сохранить объект как»). Вы также можете найти файл Librarian , папка « Objects/Pack 2 — Realistic Buttons 9″.0166 «. Если этот пакет объектов отсутствует в папке, вы можете загрузить его отсюда.
2. Запустите Axialis IconWorkshop и открыть файл изображения. Он загружается в окно документа изображения, а не в значок окно редактора, как показано ниже ():
3. Если масштаб-1:1
окно предварительного просмотра не в режиме 256×256, изображение предварительного просмотра будет обрезано.
Рекомендуется переключиться в режим предварительного просмотра 256×256, если вы хотите
для работы с Windows 256×256
иконки. Чтобы переключиться в этот режим, щелкните правой кнопкой мыши в окне предварительного просмотра, появится меню
открывается.
Используйте тот же метод, чтобы вернуться к предыдущему состояние: выберите «Дисплей 128×128», удалите опцию «Плавающее окно» и используйте мышь для стыковки окно.
4. Выберите весь образ. Выберите Редактировать/Выбрать все или нажмите Ctrl+A. Анимированный выбор прямоугольник теперь рисуется вокруг изображения.
5. Выберите «Файл/Создать значок Windows® из выбранного». или нажмите «Я». Большой открывается диалоговое окно. Это диалоговое окно позволит вам создать все образы форматы, которые вы хотите включить в свою иконку, одним простым шагом:
6. Введите Имя проекта новой иконки (). По умолчанию предлагается корень файла изображения.
7. Выберите
форматы изображений для включения в значок (), щелкнув значок
картинки. Для создания окна
значок, рекомендуется следовать инструкциям Windows
спецификации, указанные выше.
Не забудьте добавить винду 256×256
Форматы Vista в RGB/A
(Windows® XP), 256 и 16 цветовых режимов ().
8. Создать полностью совместимая Windows icon, вам нужно будет сжать форматы 256×256 в PNG. Выберите связанный вариант ().
9. Вы можете также выберите применение параметра сглаживания к цветным изображениям 256/16, как а также добавить эффект фильтра, чтобы сгладить / повысить резкость полученных изображений в Режим RGB/А (). Просмотрите результаты на изображениях для предварительного просмотра.
10. Когда закончите, нажмите ОК. Новый проект иконки созданный в окне документа:
11. Главная окно с сеткой () — это область редактирования, где вы можете ретушировать значок. Серая текстура в виде шахматной доски позади значка прозрачная часть значка (информация об альфа-канале сохранена). Предварительный просмотр в масштабе 1:1 отображается в соответствующем окне ().
12. Все
доступные форматы отображаются в списке ().
Вы можете выбрать
их для редактирования () или предварительного просмотра () их. См.
встроенная помощь приложения (нажмите F1)
чтобы узнать, как добавлять/удалять форматы или работать с этим проектом значков.
13. Сжатый формат (только форматы 256×256 могут быть сжаты) отмечены этим наложение PNG сжатого изображения: . Вы можете добавить/удалить эту опцию, выбрав Формат рисования/сжатого изображения (Windows Виста) или через нажав «К». Вы можете также используйте локальную панель инструментов или контекстное меню.
14. Когда закончите, сохраните значок, выбрав Изменить/Сохранить или нажав Ctrl+S.
К началу страницы
Создание значка в стиле Windows с использованием пакетов объектов изображений Axialis
Ниже приведено пошаговое руководство по созданию сжатого значка Vista с помощью Axialis IconWorkshop и пакетов объектов изображений Axialis. Для этого руководства требуются следующие компоненты:
• Axialis IconWorkshop 6.
01 или более поздней версии (загрузить 30-дневную пробную версию)
• Пакет объектов «Реалистичные кнопки» Axialis (загрузить пробный пакет)
стандартная винда значки теперь включают следующие форматы изображений (серые форматы необязательны):
| 256×256 — RGB/A | 64×64 — RGB/А | 48×48 — RGB/A | 32×32 — RGB/А | 24×24 — RGB/А | 16×16 — RGB/A |
| 256×256 — 256c | 64×64 — 256с | 48×48 — 256с | 32×32 — 256c | 24×24 — 256c | 16×16 — 256с |
| 256×256 — 16с | 64×64 — 16с | 48×48 — 16c | 32×32 — 16с | 24×24 — 16с | 16×16 — 16с |
Самый большой формат изображения 256×256 XP (т.
е. RGB с альфа-каналом). Для достижения наилучших результатов мы начнем проект, используя этот новый формат, и будем работать с ним для сборки объектов. Когда закончите, мы создадим все остальные форматы, используя получившуюся графику 256×256 в качестве шаблона. Давайте создадим наш новый проект иконки:
1. Запустить Axialis IconWorkshop. Выберите File/New/Windows Icon Project или нажмите Ctrl+W . Откроется диалоговое окно:
2. Введите название проекта (): « Вниз «.
3. Теперь укажите формат первого изображения, добавляемого в проект: В Цвета выберите « XP с альфа-каналом (RGB/A 32 бита)
» (). В Размер в пикселях выберите и » 256×256 (Vista) » (). 4. Поскольку мы хотим, чтобы формат 256×256 использовался в Windows, мы выберем его сжатие в виде специального файла PNG: выберите параметр « Сжать формат Vista 256×256 » ().
5. Когда закончите, нажмите OK . Создается новое окно проекта значка ():
6. Если окно предварительного просмотра масштаба 1:1 не находится в режиме 256×256, изображение предварительного просмотра будет быть обрезанным. Мы рекомендуем вам переключиться в режим предварительного просмотра 256×256 для работы со значками Windows размером 256×256. Чтобы переключиться в этот режим, щелкните правой кнопкой мыши внутри окна предварительного просмотра, и откроется меню. Выберите » 256×256 Дисплей
Используйте тот же метод, чтобы вернуться в предыдущее состояние: выберите « 128×128 Дисплей «, удалите « Плавающий Окно » и используйте мышь, чтобы закрепить окно. Пришло время проявить творческий подход, который вы найдете легким и увлекательным с IconWorkshop.
Прежде чем мы начнем, не забывайте, что каждый шаг создания может быть отменить/повторить до 16 шагов ( Ctrl+Z/Ctrl+Y ).
7. В окне Librarian (выберите View/Librarian , если оно не отображается) выберите папку » Objects/Pack 2 — Realistic Buttons/Circle » (). Если пакет еще не установлен, загрузите и установите его с этой страницы. Список доступных объектов отображается в окне содержимого ниже (). Найдите файл « Background — Green.png » и выберите его ().
8. Когда закончите, используйте мышь Перетащите , чтобы добавить его в проект, как показано выше (). Объект добавляется в проект как плавающее выделение (). Посмотрите на качество изображения в окне Масштаб 1:1 ().
Поздравляем, вы только что добавили свой первый объект изображения в свой проект! Как видите, это очень интуитивно понятно.
Теперь давайте продолжим и добавим другие объекты для создания значка.
ВАЖНО Чтобы выполнить следующие шаги, необходимо установить параметр « Сохранить прозрачность » (нажмите «T» или выберите Нарисовать/Сохранить прозрачность ). Если этот параметр не установлен, прозрачность не будет сохраняться при каждом добавлении нового объекта изображения, а уже добавленные объекты будут полностью заменены. |
9. В библиотеке выберите файл « Inner Glow 2 — Black.png » и добавьте его в проект тем же способом. Результирующее изображение теперь включает эффект красного света, как показано ниже:
10. Из библиотеки добавьте в проект файл « Border 01.png «:
11.
‘. Выберите папку « Objects/Pack 2 — Realistic Buttons/Symbols » и добавьте в проект файл « Arrow Down.png »:
12. повысить реалистичность значка. В библиотеке выберите папку « Objects/Pack 2 — Realistic Buttons/Circle » и добавляем в проект файл « Glossy 04 .png «. Вот результат:
13. Последний штрих — тень под иконкой Добавим « Shadow Bottom 01 — Black.png «. Объект изображения по умолчанию помещается IconWorkshop на передний план. В нашем случае тень должна располагаться за иконкой. Функция позволяет это сделать в IconWorkshop: Нажмите на клавиатуре клавишу End . Теперь тень находится на заднем плане.0003
Готово! Полученное изображение должно выглядеть так:
Теперь, когда самое большое изображение готово (256×256 RGB/A), мы создадим все остальные форматы значков из этого. Это делается за один шаг с помощью Axialis IconWorkshop Corporate Edition .
При использовании Personal Edition вам необходимо создавать каждый формат вручную (дополнительную информацию см. в файле справки по продукту).
14. Выберите Нарисуйте/добавьте несколько форматов изображения из этого изображения или нажмите « V «. Откроется диалоговое окно:
15. Выберите форматы изображений для включения в значок ( / ), установив соответствующие флажки. Следуйте спецификациям, которые мы определили выше для значков Windows. Не забудьте сжать форматы изображений 256×256 ()
16. Вы также можете применить параметр сглаживания к цветным изображениям 256/16, а также добавить эффект фильтра для сглаживания/резкости полученных изображений в RGB. /Режим (). Просмотрите результаты на изображениях для предварительного просмотра.
17. По завершении нажмите OK . Новые форматы автоматически создаются и добавляются в проект ():
18.