Фавикон как сделать в иллюстраторе

Как сделать Favicon?

Новый урок в стиле воркшоп и на этот раз мы постигаем секреты фавикона. Favicon — небольшая иконка, которая отображается в закладках и строке браузера. Если у вас есть свой сайт и вы хотите выгодно отличаться от других даже в мелочах — favicon необходим. Наиболее выгодно, конечно, он смотрится среди закладок, на фоне блеклого списка адресов без всякой графической идентификации. Однако наш урок не столько про то, как прикрепить favicon в строку браузера, сколько про то — как нарисовать свой собственный favicon в программе Фотошоп.

В каком формате сохранить favicon?

Все зависит от браузера. Для Microsoft Explorer подходит формат иконки ICO. C этим форматом мы уже сталкивались, когда делали курсор. Для остальных браузеров от Google Chrome до Apple Safari подойдет обычный GIF или PNG. Favicon может быть полупрозрачным. Для этого его нужно сохранить в полупрозрачный PNG, а далее преобразовать в формат ICO. Сделать это можно в неплохой программе IcoFX. Однако для генерации фавикона существует масса сторонних сайтов и самый очевидный из их www.favicon.ru

Как поместить favicon на сайт?

Как быть уверенным в том что favicon сработает? Нужно соблюсти 4 условия.

• Фаил должен называться — favicon.
• Размер фавикона 16 на 16 px
• Оптимальное место для фавикона — корневая папка сайта.
• Адрес иконки прописать в мета-тегах heder-а в индексе сайта.

В HTML выражении это выглядит так:

<link rel=»icon» type=»image/png» href=»/someimage.png» />

Можно создать несколько иконок для разных браузеров, например одну в формате ICO, а другую в PNG и все это указать через тег link. Современные браузеры чаще всего сами ищут в корневом сайта фаил под названием favicon, однако для уверенности не помешает указать и точные линки.

Создаем favicon в Фотошопе

Создать favicon очень просто. Хотите сделать такой же favicon как у Вконтакте или Однокласников? Хороший favicon не сделать, уменьшая большие картинки во всяких «генераторах» фавиконов, которых полным полно в интернете. Фавикон очень маленький. Фактически мы это своего рода пиксель-арт, который имеет свои особенности. Нельзя написать букву и просто уменьшить её до 16px.

Подобный favicon будет размыт и нечеток, так как края буквы при изменении размера будут заходить на несколько пикселей. Получится своего рода anti-alias, который обычно является добром, но в случае с пиксель-арт подобные переходы как раз не нужны. С другой стороны стоит избегать и излишней «ободранности» на округлостях иначе получится привет гифки 1999 год.

Создайте фаил размером 16 х 16px. Мы создадим очень простой полупрозрачный favicon с в виде буквы, с толикой глубины. Глубина будет создана за счет тени и градиента.

Рисуем фон

Почему в заставке этого урока вы видите огромный гладкий и вылизанный favicon? Потому что я его увеличил для заставки к уроку. Как у меня вышло качественно увеличить изображение 16px? Очень просто, я всегда работаю в векторе, если его возможно использовать и если в этом есть смысл. А вектор легко переносит любую трансформацию и не теряет в качестве.

Выберите инструмент Rounded Rectangle Tool. На панели настроек выберите режим Shape Layer, что позволит рисовать в векторе. В выпадающем меню панели галочка — Snap To Pixels. Это необходимо для того, чтобы векторные контуры привязывались к пикселям и не рисовали «между» ними.

У нас есть поверхность faviconа, а полупрозрачные края создадут сглаженность округлости. Теперь пора избавиться от белого заднего фона, он не нужен. Отключите его видимость. Или сделайте двойной клик по слою, превратив его в обычный слой, а затем удалите.

Применим стили для поверхности faviconа. Подробнее о стилях можно почитать в статье Стили в Фотошопе. На панели слоев выберите нашу форму и выберите Layer > Layer Styles > Gradient Overlay В появившемся окне кликните по градиенткой полоске. Это вызовет Окно настройки градиента. Задайте градиент с цветами 0059c6 и 0085d1. Нажмите ОК. Остальные параметры на картинке ниже.

Рисуем букву

Буква «Н», которая изображена на фавиконе сайте хронофаг.ру слишком проста, чтобы впутывать в это дело шрифты, поэтому я просто нарисовал её инструментом Rectangle Tool. Но давайте сделаем нечто посложнее. Выберите инструмент Type Tool и поставьте любую буквы. Для нашего урока лучше всего подойдет буква без округлостей. Я выбрал шрифт и поставил букву H.

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

Сделайте вот что. На панели настроек шрифта отключите режимы растрирования — none. Теперь трансформируйте шрифт Edit > Free Transform Немного растяните его. Отлично.

Если в вашем случае получилась ерунда, а оно может произойти в случае с режимом растрирования none, так как отсутствие сглаживания порой искажает шрифт при маленьких размерах, сделайте вот что. Переведите букву в кривые Layer > Type > Convent to Layer Shape Воспользуйтесь инструментом Direct Selection Tool.

Выберите этот инструмент и зажимая SHIFT выделяйте несколько векторных точек. Затем стрелочками на клавиатуре двигайте их в нужную сторону, чтобы избавиться от не нужных переходов и выровнять края.

Надеюсь вы уловили смысл работы. Конечно нет никакого смысла тратить столько времени если ваша буква — две палочки и крестик. Но в случае буквы «В» или «D» эту работу стоит проделать с её ровными сторонами. Мы практически приблизились к созданию favicon-а.

Добавляем тень

Конец близок, осталось добавить стили для нарисованной буквы. На панели слоев выберите слой с буквой и зайдите в Layer > Layer Styles > Drop Shadow Мне нужна легкая тень с Opasity 50% и очень четкими краями Distance 1, Spread 0, Size 2

Сохранение favicon

Чтобы сохранить полупрозрачный фавикон откройте File > Save for Web & Devices В появившемся диалоговом окне выберите PNG-24 и галочку на Transparensy. Это сделает наш фавикон полупрозначным. Осталось поместить иконку на сайт вышеперечисленными способами, или преобразовать её в формат ICO. Favicon создан.

Фавикон как сделать в иллюстраторе

How To Create a Favicon .ICO — Illustrator Tutorial

A Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser. So in this tutorial we’ll see how to create a favicon from scratch using Adobe illustrator and then convert the png file into a (.ico) using Iconfier website.

✖Before you start watching, notice that this tutorial was made using Windows OS, so for Mac users simply alter Ctrl with CMD, and Alt with the Opt key.

P.S. My English still sucks.

Hopefully you’ll find it useful. Please, if you like it, take some time to share it, it’s highly appreciated.

How do I make a favicon in Illustrator?

Can you create an ICO file in Illustrator? Adobe Illustrator creates vector drawings and graphics that may be converted to the bitmap format. Once the vector graphic is converted to a bitmap, save the bitmap file with the file extension of ICO to create an icon file.

Subsequently, How do I add a favicon to my website? To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon. ico”.

Table of Contents

How do you create an ICO file?

So, after you create or import a suitable image into Paint and set it to the correct dimensions, creating the ICO file is straightforward. From the Paint menu, choose Save As, and then select JPEG Picture from the menu of file formats that pops up. Next, enter a filename with the . ico extension and save the file.

What size should favicon be?

The optimal size for favicons is 16×16 pixels. That’s how they appear in browser tabs, address bars, and bookmark lists. Ideally however, you’ll create your favicon in multiple sizes. That way you’ll see properly scaled versions on larger screens rather than the 16×16 version stretched out.

What format should a favicon be?

This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16×16 pixels or 32×32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.

Can I use PNG as favicon?

A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.

How do I get a favicon from Chrome?

You can click Ctrl + U to view source and look for the favicon in the code ( <link rel=”shortcut icon” ).

How do I get a favicon to work in all browsers?

Favicon must be an . ico file to work properly on all browsers.

1. Place favicon. ico at your site root to support the older browsers (optional and only relevant for older browsers.
2. Place favicon. png in my images sub-directory (just to keep things tidy).
3. Add the following HTML inside the <head> element.

What program can create ICO files?

If you are designing an application for Windows, a website, or just want to personalize your Windows desktop, you can create ICO files using an image converter website, MS Paint, Mac Preview, or a Photoshop plugin.

How do I create a favicon in Photoshop?

Design a Website Favicon in Photoshop

1. Download the plugin for Photoshop that allows you to save the file in the Windows Icon (ICO) file format. …
2. Open Photoshop. …
3. Create or place your artwork in the new document. …
4. For my icon, I’m using a purple paw print, with one part of the paw highlighted in pink.

How do I convert JPG to ICO?

1. Select files from Computer, Google Drive, Dropbox, URL, or by dragging it on the page.
2. Choose “to ico”. Choose “ICO” you need as a result. Tip. …
3. Download your ICO file. Click the “Convert” button and let the file convert and you can download your ICO file right afterward.

Does favicon have to be ICO?

A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.

Is favicon ICO necessary?

ico . For example, IE will use the 16×16 version for the address bar, and the 32×32 for a task bar shortcut. However, it is recommended to place favicon. ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.

How do I get a sharp favicon?

1. Make it recognisable. The first thing to consider when designing a favicon is what needs to be represented in the canvas. …
2. Use your logo. Consider favicons as sober signposts that aid users in recognising your website when browsing their bookmarks lists and homescreens. …
3. Keep it clear. …
4. Create two versions.

Can a favicon be a JPG?

ico, you can instead use . png, . gif, or . jpg files and your favicon will work in most modern browsers, the lone exception being Internet Explorer, which only supports .

Do favicons need to be ICO?

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon. ico unless you’ve specified a shortcut icon via <link> . So if you don’t explicitly specify one, it’s best to always have a favicon. ico file, to avoid a 404. Yahoo!

Are favicons still a thing?

Favicons trace all the way back to Internet Explorer 5. At the time, they lived in the root directories of websites, with the rather simple name “favicon. ico,” which is still in use today.

Can I use JPG as favicon?

png, . gif, or . jpg files and your favicon will work in most modern browsers, the lone exception being Internet Explorer, which only supports .

How do I add a PNG to a favicon?

1. Step 1: Name Your Favicon. While not required, we recommend that you name your PNG formatted favicon favicon. …
2. Step 2: Upload Your Favicon. While not required, we recommend that you upload your favicon to your website’s main or root directory. …
3. Step 3: Link to Your Favicon. …
4. Step 4: Testing. …
5. Step 5: Debugging.

What resolution should I use for favicon?

The optimal size for creating a favicon is 16×16 pixels, which is the size in which they are most commonly displayed. However, they can appear in larger dimensions too (such as 32×32 pixels).

Универсальный способ создания фавиконов

Сегодня мы затронем очень интересную тему. При работе над вашим сайтом, у вас рано или поздно возникнет необходимость в создании фавикона. Говоря простым языком, фавикон — это значок вашего сайта, который отображается на вкладке в браузере. Также, его можно увидеть в области быстрого доступа браузера, если ваш сайт был добавлен в «Избранное».

Фавиконы самых популярных сайтов

Думаю, нет смысла говорить о том, что фавикон должен быть хорошего качества, ведь он является в какой-то мере лицом вашего сайта. В данной статье мы научимся создавать удовлетворяющие нашим потребностям фавиконы, а также познакомимся с сервисом для их конвертации. Подробнее читайте ниже.

Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]

Каким должен быть фавикон

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

• Является четким и понятным
• Сделан в хорошем качестве
• Передает смысл вашего сайта
• Имеет общую стилистику с вашим сайтом
• Выделяется на фоне значков других сайтов

Вышеперечисленные параметры можно отнести к идеальному фавикону. И нам необходимо создать именно такой значок для нашего сайта. Однако, существуют споры о том, что именно должно быть изображено на фавиконе. Я считаю, что в этом вопросе нужно исходить из общей стилистики и тематики вашего сайта. На нем может быть изображена какая-нибудь картинка или текст. В случае размещения на фавиконе текста, он должен состоять не более чем из 2-х букв. Иначе, никто не сможет разобрать подобный текст, ведь размеры фавикона в основном составляют 16*16 пикселей.

Каких размеров бывают значки сайтов

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

• 16*16px — стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
• 32*32px — используются в некоторых случаях в Internet Explorer и Safari
• 57*57px — используются при отображении на iPhone
• 72*72px — используются при отображении на iPad
• 114*114px — используются при отображении на ретина дисплеях (57*2=114)
• 144*144px — используются при отображении на ретина дисплеях iPad (72*2=144)

Какого формата должны быть фавиконы

Раньше браузеры воспринимали фавиконы только в формате «ico». Сейчас они научились понимать и другие форматы, в том числе и «png». В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате «png», а затем сконвертируем его в «ico».

Несколько способов создания фавиконов

На сегодня существует два основных способа создания фавиконов:

1. Через специальные онлайн сервисы
2. Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator

Каждый способ имеет свои особенности. Преимущество создания фавикона через онлайн сервисы состоит в том, что Вам не нужно для этого обладать какими-то специальными навыками. Вы просто загружаете необходимое изображение, дорабатываете его и скачиваете готовый фавикон. Либо просто работаете с текстом и рисуете значок инструментами онлайн сервиса. В общем, главный плюс данного метода заключается в простоте. Однако, обратная сторона медали заключается в том, что качество таких значков для сайтов оставляет желать лучшего. Уникальный фавикон вы не получите по той простой причине, что галерея значков онлайн сервисов не является безграничной. А при использовании собственных изображений, при помощи инструментов сервиса не так-то просто создать качественный продукт. В случае рисования значка вручную через инструменты онлайн сервиса получается «нечто невообразимое».

Поэтому, мы выбираем второе, более сложное но удачное решение. Для создания фавикона мы воспользуемся программой Photoshop. Если вы не имеете опыта работы с этой программой, то ничего страшного. Следуя моим инструкциям вы легко справитесь с поставленной задачей.

Создаем фавикон

Как я уже упоминал, фавикон можно создать при помощи изображения или просто букв. В нашем случае я буду использовать какую-нибудь картинку. Например, давайте представим что у нас сайт автомобильной тематики. Следовательно, нам нужно найти изображение из области авто. Я предлагаю сделать значок нашего сайта в виде колеса.

Подбираем изображение

Брать изображения Вы можете откуда угодно. Например, через тот же яндекс картинки. Главное условие — чтобы изображение было простое, без теней и объемов. Это связано с тем, что при ее уменьшении до размеров в 16 пикселей она не будет обладать большой детализацией. Из-за лишних объемов и теней картинка может смазаться.

Я нахожу подходящее изображение при помощи поиска google по запросу «колесо». Мне лишь остается ее сохранить кликнув правой кнопкой мыши и выбрав функцию «Сохранить картинку как».

Подходящее изображение в google images

Далее, мы открываем это изображение при помощи Photoshop. Очень важно, чтобы фавикон был с прозрачным фоном. В нашем случае это не так. Для удаления заднего фона мы используем инструмент «Волшебная палочка». Суть ее работы очень проста. С помощью этого инструмента мы можем выделять области на изображении одного и того же цвета. Так как фон нашего изображения четко контрастирует с самим колесом, сделать это будет очень легко. Кликнув один раз мы выделяем одноцветную область. Нажав сочетание клавиш CTRL+Delete мы удаляем эту область.

Удаляем фон нашего колеса

Делаем это со всеми частями фона изображения. Таким образом, на нашей картинке колесо находится на прозрачном фоне, что и требовалось сделать. Итак, заготовка для значка нашего сайта готова.

Колесо на прозрачном фоне

Создаем фавикон в 2-х разных размерах

Я предлагаю сделать 2 фавикона размерами 64px и 16px. Для начала нам нужно создать значок большего размера (64px). Для этого мы нажимаем сочетание клавиш CTRL+N. В появившемся окне мы выбираем высоту и ширину изображения в 64px.

Задаем размеры будущего фавикона

Далее, нам необходимо перенести наше колесо в область только что созданного изображения. Для этого мы возвращаемся на картинку с колесом и выбираем инструмент «Перемещение». Следующим шагом мы кликаем по изображению колеса и при зажатой левой кнопке мыши перемещаем ее в область нового изображения. Убедитесь, чтобы при перемещении был выделен слой с колесом. В противном случае перенос не удастся.

Переносим колесо в новое изображение

После перемещения колеса в новое изображение мы видим что они не подходят по размеру. Нам нужно уменьшит колесо до размеров в 64 px. Для этого мы зажимаем клавишу SHIFT и кликнув по диагональной точке изображения уменьшаем ее. Вот мы и создали первый фавикон для нашего сайта. Напоминаю что он у нас размером 64*64px. Теперь нам остается сохранить ее выбрав функцию «Сохранить для веб» во вкладке «Файл». Мы выбираем формат PNG-24 и папку images. Сам фавикон называем также, только латинскими буквами — «favicon».

Сохраняем фавикон

Отлично. Теперь нам остается создать фавикон меньшего размера. Для этого мы кликаем по вкладке «Изображение» и выбираем функцию «Размер изображения». Здесь мы задаем ширину и высоту в 16px. Теперь нам остается сохранить данное изображение для веб. Ее мы можем назвать «favicon-2».

Итак, вот мы и создали 2 фавикона для нашего сайта в формате «png». Мы создали сначала вариант с размером в 64px для того, чтобы потом легко уменьшить ее до размеров в 16px. Если вначале создать вариант с 16px, то увеличить ее до 64px без потери качества не получится. Поэтому, имейте это ввиду чтобы не делать двойную работу.

Устанавливаем фавикон на сайт

Для установки фавикона на сайт внутри тега <head> мы прописываем:

В случае, если у нас фавикон в формате «ico» то мы вместо «png» прописываем «ico». Например:

Далее, сохраняем прогресс и проверяем результат. После открытия нашей веб-страницы мы видим появление фавикона.

Отображение фавикона в браузере

Как видите, значок сайта отображается как мы и задумывали.

Конвертируем значок для сайта в формат «ico»

Современные браузеры без проблем могут распознавать и отображать фавиконы в формате «png». Однако, у Вас может возникнуть необходимость конвертировать ее в формат «ico». Одним из преимуществ данного формата является хранение фавиконов всех размеров в одном файле. Согласитесь, что это очень удобно. Итак, для конвертации наших значков мы воспользуемся классным сервисом — xiconeditor.com. Работать с ним очень просто. Все происходит 4 шага:
1. Для начала нам нужно загрузить наши фавиконы. Для этого мы кликаем по кнопке «Import».

Загрузка фавиконов в сервисе xiconeditor.com

2. Далее, мы выбираем загружаемые файлы кликнув по кнопке «Upload». Следующим шагом убираем галочки с ненужных размеров (32 и 24px) и нажимаем «Ok».

Выбор загружаемых файлов

3. При желании можно кликнуть на кнопку «Preview» и посмотреть как они будут отображаться. Для скачивания наших фавиконов в формате «ico» мы кликаем по кнопке «Export».

Итак, вот мы и научились создавать фавиконы в «png» и конвертировать их в формат «ico». Я специально не рассматривал детальную обработку изображения в фотошопе, так как для многих это будет излишне. При необходимости, вы конечно же можете дополнительно улучшить качество фавикона поработав с пикселями в фотошопе. Я же постарался изложить все самое необходимое и в упрощенной форме. И на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. [popup_trigger tag=»span»] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!