Как сделать favicon

Что такое фавикон?

Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон – это небольшая иконка размером 16х16 или 32х32 &.

73;ражение, отражающее тип бизнеса или тематику сайта.

Почему фавикон важен?

Фавикон выполняет следующие функции:

— Брендинг.

— Идентификация сайта пользователем (удобство использования).

— Придает сайту профессиональный вид.

Остановимся более детально на основных преимуществах использования фавикон.

Узнаваемость бренда

Фавикон – как маленькое удостоверение сайта. Как было сказа.

; множества просмотренных сайтов. Будь то история просмотра, результаты поиска в Google или список закладок сайтов в вашем браузере, фавиконы помогут пользователю легко узнать ваш сайт и зайти на него.

Доверие

Пользователи, как правило, судят о продавцах товаров и услуг в Интернете на основании того, насколько профессионально сделан их сайт. Небрежность в виде отсутствия фавикона (поисковые сисm.

082; потере доверия, особенно, когда пользователи сравнивают вас с конкурентами.

Повторные посещения

Известно, что люди лучше реагируют на изображение, чем на текст..

77;го, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Ва.
G у Google и пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.

Экономит время пользователя

Фавиконы экономят время, затрачиваемое п
.

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

Преимущества для SEO

Если ваш сайт им.

083;едовательно, сможете привлечь больше посетителей.

Как создать фавикон?

Есть много инструментов, позволяющих создать фавикон за считанные минуты.

1045;сли у вас нет навыков дизайна или вы не знаете, как это делается, то можете попытаться сгенерировать фавикон, используя Logaster.

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать фавикон»

Шаг 2. Создайте логотип

Logaster – это онлайн-генератор логотипов, поэтому для создания фавикона вам нужно сначала создать логотип. На основании вашего логотипа, Logaster предложит именно те фавиконы, которые вам нужны. Но не беспокойтесь, это не займет много времени и сил.

Шаг 3. Введите название вашего сайта (или компании), выберите тип бизнеса

Шаг 4. Выберите понравившийся логотип

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

Как выбрать правильный дизайн?

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

Обратите внимание на иконку, именно ее чаще всего используют в качестве фавикона. Если нужно выбрать другой цвет или шрифт, вы можете отредактировать эти элементы дизайна (шрифт, цвет, текст) на 3 шаге создания логотипа. Как редактировать логотип, вы можете узнать здесь.

Шаг 5. Создайте фавикон

Теперь, когда у вас есть логотип, нажмите «Создать фавикон с этим логотипом» на странице логотипа.

Шаг 6. Выберите необходимый дизайн фавикона

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

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

Найти вдохновения для фавиконки можно на сайтах:

The Favicon Gallery

Delta Tango Bravo

Fresh Favicons

Шаг 7. Скачайте фавикон

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

После оплаты вы можете скачать фавикон в форматах ico и png.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

— на сайте;

— мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;

— программах и приложениях для РC/Mac.

Как установить фавикон на сайт?

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

Шаг 1.Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla. Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать здесь.

Шаг 2.Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

Перед правками кода, рекомендуем сделать копию файлов, чтобы можно восстановить файлы если вы допустите ошибку.

Откройте файл index.html в текстовом редакторе — Блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Код можно скопировать на странице фавикона на сайте Logaster.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

Большинство современных браузеров достаточно умные и умеют находить файл фавикона даже без такого кода, но только если фавикона имеет изображение формата 16х16 пикселей, название favicon.ico и сохранен в корневом каталоге вашего сайта.

Надеемся, что эта статья дала вам некоторую полезную информацию, которая поможет создать фавикон, который сделает ваш сайте более успешным и привликательным.

spark.ru

В каком формате сохранить 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 выражении это выглядит так:

 <head>

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

</head>

Можно создать несколько иконок для разных браузеров, например одну в формате 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 создан.

Скачать файл:

Скачать исходники

 

hronofag.ru

1. Что такое иконка favicon и для чего она нужна

Понятие Favicon происходит из двух английских слов Favorites Icon, что можно перевести как иконка (маленькое изображение) для «избранного». «Избранное» – это название закладок в базовом браузере Internet Exprorer. Они выглядят, например, так в браузере Хром:

Для каждого ресурса существует маленькое изображение, что-то вроде мини-логотипа для сайта. Согласитесь, что сохранять в закладки удобнее не url-адреса сайтов, а их небольшие логотипы – фавиконы. Кстати, кроме этого favicon отображается в адресной строке браузера сразу перед URL открытой страницы сайта или в заголовке закладки:

Favicon – это файл небольшого размера (16×16 пикселов), имеющий расширение .ico (это расширение используется операционными системами для хранения иконок). Favicon.ico есть практически у каждого сайта, причем неважно, на каком он хостинге расположен или какой движок/тему использует. Онлайн генераторы и галереи favicon позволяют сделать иконку за пару минут из любого изображения, нарисовать ее с нуля или же скачать готовую, поэтому если вы еще не используете favicon на вашем блоге, то скорее исправляйте ситуацию.

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

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

• Набрать адрес вашего сайта в окне поиска от Яндекса (например, http://great-world.ru) и посмотреть, есть ли рядом фавикон.
• Перейти по ссылке http://favicon.yandex.net/favicon/great-world.ru (где вам нужно «great-world.ru» заменить на URL-адрес вашего сайта). Если иконка проиндексирована, то вы ее увидите.
• Зайти в Яндекс.Вебмастер (http://webmaster.yandex.ru) и проверить наличие favicon.ico

2. Онлайн генераторы и галереи Favicon

Итак, мы уже разобрались, что представляет собой фавикона, так необходимая для сайта. Узнали, что она должна быть размером в пикселях – 16 на 16, а ее расширение должно быть .ico. Теперь есть несколько путей создания favicon.ico:

1. Скачать  готовую иконку из галерей favicon.
2. Сделать фавикон с нуля с помощью фотошопа или онлaйн генератора.
3. Сделать favicon из готового изображения (размеры изображения неважны).

2.1 Коллекции и галереи Фавикон

Ниже приведены ссылки на сайты-галереии favicon.ico, перейдя по которым, можно сразу выбрать и скачать понравившийся мини-логотип:

1. http://www.thefavicongallery.com/ — небольшая галерея, включающая в себя иконки самых разных тематик. Содержит около 300 изображений. Чтобы скачать понравившуюся картинку, нужно нажать на ней правой кнопкой мыши и выбрать «сохранить как», затем сохранить фавикон на компьютер.
2. http://www.iconj.com/ — более 3 тысяч иконок на любой вкус и цвет. Есть возможность сохранить изображение в формате .gif или .ico. Можно взять даже html-код иконы. Имеются анимированные фавиконы. Единственный недостаток коллекции – на одной странице расположено лишь 30 иконок, поэтому придется просматривать много страничек, чтобы выбрать подходящее изображение.
3. http://www.favicon.cc/ – огромная коллекция favicons, но на одной странице находится лишь 20 штук, листать придется долго.
4. http://www.favicon.co.uk/ — тоже неплохая галерея, содержащая множество favicon. На каждой странице по 144 иконки, это делает просмотр очень удобным. Тематики фавиконок самые разные.
5. http://favicon-generator.org/ — небольшая коллекция (84 штуки) мини-изображений для вашего сайта.

2.2 Как сделать Фавикон для сайта с нуля

Преимущество создания favicon с нуля заключается в том, что получившаяся иконка будет уникальна, а уникальность очень важна! Поэтому лучше не полениться и потратить 5-10 минут на создание собственной фавиконы.

2.2.1 Logaster.ru (рекомендую!)

Этим сервисом пользовался я, могу сказать, что это лучшее решение для тех, кто хочет получить фавиконку без косяков и готов за это немного заплатить. Логастер предлагает сразу создать логотип во всех размерах и макет визитки, а не только отдельный favicon. Это очень логично, ведь все элементы дизайна на сайте должны быть как-то связаны между собой, быть в общей стилистике. Ниже, показан инструмент генерации иконки в Logaster:

Чтобы попробовать инструмент перейдите по этой ссылке, сначала надо будет пройти через этап генерации логотипа, затем сможете перейти к фавиконке.

2.2.2 Favicon.cc

Этот онлайн генератор, пожалуй, самый простой для создания фавикон с нуля. Пиксель за пикселем вы сможете с легкостью создавать, пока не закончите делать favicon и не закрасите все 256 пикселей. Для начала перейдите на сайт Favicon.cc. Вы увидите рабочее окно:

На скрине выделенная красным большим прямоугольником область – рабочая. Именно здесь создается фавикон. Чуть ниже можно увидеть, как выглядит favicon в оригинальном размере.

Каждый квадратик рабочей области представляет собой один пиксель. Вам нужно закрасить каждый квадрат так, чтобы получилась картинка – ваша будущая favicon.ico. Чтобы начать закрашивать, вам нужно поставить галочку рядом с пунктом pick existing color, находящуюся справа от рабочей области. Чуть выше находится палитра цветов, выбрав подходящий цвет, вы можете начинать закрашивать квадратики в рабочей области.

Чтобы стереть закрашенный квадратик (сделать его бесцветным), нужно поставить галочку рядом с пунктом transparent и нажать левой кнопкой мыши на нужную область.

Нарисованную фавикону можно будет перемещать по рабочей области. Для этого нужно поставить галочку напротив пункта move.

Чтобы скачать сделанный favicon, нажмите на ссылку Download Favicon (она выделена красным на скрине выше).

2.2.3. Amichurin.Appspot.com

Данный онлайн генератор фавикон полностью на русском, но его функционал значительно уступает вышеописанному ресурсу. Для создания favicon.ico нужно перейти по ссылке – http://amichurin.appspot.com/.

Проблем с генерированием иконки возникнуть не должно, т.к. тут итак все понятно.

2.2.4 Favicon-Generator.org

Еще один неплохой online generator фавиконок. Попасть на него можно по данной ссылке — http://favicon-generator.org/.

Проблем с этим генератором возникнуть тоже не должно. На скрине переведены функции онлайн фавикон генератора.

2.3 Как сделать Favicon для сайта из уже имеющегося изображения

Если вы не хотите делать фавикон для вашего сайта с нуля, то можете использовать какое-нибудь изображение, которое и станет основой мини-логотипа. В этом случае вам нужно будет заранее подготовить картинку (желательно квадратную, иначе при создании favicon.ico возможно искажение узора), а затем использовать ее в онлайн сервисе favicon generator. Давайте рассмотрим два самых популярных ресурса.

2.3.1 Favicon.ru

Онлайн генератор favicon.ru очень прост в использовании, он с легкостью преобразует любое изображение любых размеров в небольшую иконку 16×16 пикселей. Сейчас вы сами убедитесь в простоте работы с этим сервисом.

Добавить изображение можно двумя способами:

• С помощью кнопки «Выберите файл» найти на компьютере нужное изображение и загрузить его.
• Ввести в поле адрес картинки в интернете (при этом данный файл может даже не быть на вашем компьютере), и сервис все сделает сам.

После того как файл загрузится, вам останется лишь нажать на кнопку «Создать favicon.ico!» и подождать несколько секунд. Далее вам нужно будет лишь скачать фавикон на компьютер.

2.3.2 Favicon.cc

Этот онлайн generator мощнее предыдущего, но и сложнее его. Для начала перейдите по ссылке – favicon.cc, а затем нажмите «Import Image» (в левом окне).

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

• Keep dimensions – оставить соотношения сторон картинки неизменными.
• Shrink to square icon – привести стороны изображения к квадратному виду, при этом картинка может исказиться.

После того как загрузите картинку, вы сможете отредактировать ее в онлайн генераторе или же оставить ее неизменной. Если полученная favicon.ico вас устраивает, то скачивайте ее на компьютер.

great-world.ru