Создание favicon ico: Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

Как создать favicon.ico (фавикон) для сайта.

Здравствуйте, уважаемые читатели! Сегодняшняя статья посвящена созданию фавикона (favicon.ico) для вашего сайта. Из поста вы узнаете, что такое фавикон, каких размеров бывает эта иконка и почему ее обязательно нужно сделать и установить на свой блог. Кроме того, в статье будут приведены favicon генераторы, позволяющие за пару минут создать фавикон в режиме онлайн, а также сайты, на которых  можно скачать галереи и коллекции готовых фавиконок.

Для начала давайте разберемся, что такое Фавикон, зачем она нужна, может, вообще без нее можно обойтись?

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

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

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

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

Чаще всего фавикон находится в корневой папке сайта, кроме того, это и удобнее, поэтому мы будем рассматривать именно этот вариант. Делается это в два шага.

ПЕРВЫЙ ШАГ. Сначала вам нужно будет найти в теме строчку html-кода, указывающую путь к фавиконе. Для блога на Вордпресс вам нужно найти файл header.php (Заголовок) и найти строчку, она должна выглядеть примерно так (она может немного отличаться в зависимости от темы):

<link rel="icon" type="image/x-icon" href="http://путь_к_фавикон/favicon.ico">

Еще возможно, что ваша favicon расположена в корневой папке сайта, тогда код будет примерно такой:

<link rel="icon" type="image/x-icon" href=" /favicon.ico">

Вам нужно заменить эту строчку на следующие две:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

ВАЖНО! Эти строчки должны быть размещены внутри тегов <head> и </head>

ВТОРОЙ ШАГ. Теперь вам нужно добавить фавикон в корневую папку сайта. Зайдите на ваш хостинг и поместите в папку с вашим сайтом файл с именем favicon.ico (размером 16×16 пикселей).

Если вы все сделали правильно, то теперь ваш сайт обзавелся собственной фавиконкой.

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

Как создать фавикон для сайта. Пошаговая инструкция от А до Я

Содержание:
1.Что такое фавикон?
2.Почему фавикон важен?
3.Как создать фавикон?
4.Как установить фавикон на сайт?

Если создание сайтов не является вашей профессией, есть вероятность, что некоторым вещам будет уделяться недостаточное внимание

Идеальный пример — фавикон сайта. Знаете ли вы, что такое фавикон? Эффективно ли вы его используете?

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

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

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

Фавикон выполняет следующие функции:
— Брендинг.
— Идентификация сайта пользователем (удобство использования).
— Придает сайту профессиональный вид.

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

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

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

Доверие

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На странице бренда выберите “Фавикон”.

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

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

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

The Favicon Gallery
Delta Tango Bravo
Fresh Favicons

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

Вы можете скачать фавикон совершенно бесплатно в формате PNG и ICO.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.

Как сделать favicon.ico для сайта (фавикон)

В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

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

План урока:

1. Создание Favicon с нуля.
2. Создание фавиконки из готового изображения.
3. Сервисы с готовыми иконками для сайта.
4. Прикрепление полученной иконки к сайту.

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Создание favicon (фавикон) из готового изображения

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

Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.

Список сервисов с готовыми favicon (фавикон)

Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:

1. iconj – Огромная база фавиконок;
2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
4. audit4web – Большое количество иконок для сайта.

Как сделать Favicon (фавикон) для сайта

После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:

1. Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
   
2. Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):

    	<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">
    	<link rel="icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">

   Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.

3. У меня получилось следующее:
   
4. Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:
   

Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

_____________________________________________

Следующий урок: Урок 51 Регистрация в поисковиках.

Лучшие Генератори Фавиконов для Вашего Сайта

Большинство людей предпочитают просматривать страницы в интернете, когда их любимые и наиболее посещаемые сайты открыты на разных вкладках одновременно.

Вполне разумно предположить, что у большинства из нас одновременно открыты Facebook, Youtube и Google. Может быть, в вашем браузере также есть ваша электронная почта и ваш любимый новостной сайт.

Когда так много всего происходит в одно и то же время, как уследить за тем, какая вкладка есть что, без необходимости каждый раз переходить по каждой из них?

Фавиконы.

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

Генератор фавиконов Zyro – это бесплатный инструмент с несколькими полезными функциями.

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

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

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

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

Favicon.ico & App Icon Generator может конвертировать форматы файлов изображений JPG, PNG и GIF в файл favicon.ico.

Генератор фавиконов также создаёт фавиконы всех размеров в соответствии с используемой платформой – сеть, Android, Microsoft и iOS.

Когда вы нажимаете Создать Фавикон, он создаёт код, который вы можете скопировать в заголовок вашего HTML-документа. Для справки, если вы всё сделали правильно, HTML-код для стандартного фавикона 16×16 будет выглядеть так:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”> <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> 

Затем вы добавляете загруженную папку .zip в корневой каталог своего сайта.

Если у вас ещё нет изображения, воспользуйтесь онлайн-редактором и создайте его самостоятельно.

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

FavIcon Generator идеально подходит для преобразования форматов изображений JPG, PNG и GIF в файлы favicon.ico. Однако, в отличие от Favicon.ico и App Icon Generator, у него нет редактора.

Этот генератор фавиконов предлагает множество вариантов размера изображения – 16×16, 32×32, 48×48, 64×64 и 128×128 пикселей.

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

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

Этот генератор фавиконов совместим с форматами изображений PNG, JPG, GIF и BMP. Он также принимает изображения с прозрачным фоном.

Размер файла favicon.ico по умолчанию составляет 16×16 пикселей. Тем не менее, у вас есть возможность загрузить иконки размером 32×32 и 48×48 пикселей.

Вы можете перейти в раздел Favicon Editor, чтобы создать свой фавикон с нуля. В качестве альтернативы можно импортировать изображение PNG размером 16×16 пикселей и использовать его в качестве базового дизайна.

Редактор предоставляет простые, но функциональные инструменты редактирования, а также множество вариантов цвета и размера кисти.

Favicon CC принимает форматы изображений JPG, JPEG, GIF, PNG, BMP, ICO и CUR.

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

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

Вы можете бесплатно скачать файл ICO. Чтобы получить сценарий HTML, вы должны опубликовать иконку по лицензии Creative Commons.

Genfavicon поддерживает форматы изображений JPEG, GIF и PNG и создаёт фавиконы пяти разных размеров.

Импортируйте ваше изображение в генератор и выберите желаемый размер иконки. Вы можете обрезать её и просмотреть результат перед загрузкой файла ICO.

Хотя генератор удобен и бесплатен, в нём нет редактора, который позволял бы создавать фавикон с нуля.

Подобно FavIcon.pro, Genfavicon предоставляет различные языковые настройки, чтобы помочь пользователям по всему миру.

Этот генератор фавиконов даёт вам возможность создать один файл favicon.ico. Но вы также можете массово загружать PNG изображения разного размера вместе с файлом ICO для различных платформ – и всё это одним щелчком мыши.

Favic-o-Matic также предоставляет вам HTML-код для всех сгенерированных файлов. Вы можете удовлетворить все потребности своего фавикона в одном месте.

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

Проверьте совместимость своего сайта с различными браузерами и устройствами с помощью Favic-o-meter – бесплатного инструмента для проверки фавиконов.

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

RealFaviconGenerator.net предлагает варианты модификации фавикона для повышения совместимости вашего фавикона с популярными платформами.

Он включает в себя параметры персонализации вашего фавикона для мобильных экранов, например Apple touch bar и главного экрана Android Chrome.

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

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

Конечный продукт включает файлы фавиконов PNG, ICO и SVG. Генератор предоставляет различные наборы кода фавиконов, совместимые с конкретными языками программирования.

X-Iconeditor – мощный онлайн генератор фавиконов. Это один из немногих сервисов, предлагающих инструменты карандаш, кисть, ластик и текстовый редактор для тех, кто хочет создать свой фавикон с нуля.

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

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

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

Чтобы определить фавикон и указать, что иконка доступна браузеру, используйте тег <link> в <head> элементе страницы, указывающий на расположение значка:

Это будет выглядеть примерно так:

<link rel=”shortcut icon” href=”favicon.ico”/>

Как следует из названия, Anti Favicon немного отличается от большинства других фавикон генераторов. Он не использует файлы изображений для создания иконки.

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

Для создания собственного фавикона просто введите текст и поэкспериментируйте с разными цветами. Когда вы будете готовы, вы сможете сохранить свой фавикон, нажав кнопку «Сохранить как фавикон файл».

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

Anti Favicon – один из самых уникальных фавикон генераторов, который определённо стоит попробовать.

Webestools.com предоставляет бесплатный онлайн-генератор фавиконов, который позволяет пользователям загружать файл изображения на сайт и редактировать его напрямую.

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

Генератор фавиконов Webestools предлагает только фавиконы размером 16×16 или 32×32, но он позволяет пользователям просмотреть свои фавиконы перед загрузкой файла ICO.

В целом, это простой и эффективный фавикон генератор, который выполняет свою работу без лишних хлопот.

Генератор фавиконов Logaster всегда на шаг впереди конкурентов и является отличным выбором для тех сайтов, которые ещё не определились со своим брендом.

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

Logaster – это профессиональный сервис, который может создать фавикон нужного размеров (16-128 пикселей). Это один из немногих премиум-сервисов в этом списке, и важно отметить, что он не позволяет загружать собственное изображение.

Генератор фавиконов Logaster – отличный выбор для брендов, которым ещё предстоит создать собственный логотип.

Генератор фавиконов FavIco быстрый, бесплатный и простой в использовании. Используйте его для преобразования изображений GIF / JPG / PNG в формат ICO, который будет использоваться в качестве фавикона.

Это простой фавикон генератор с понятным пользовательским интерфейсом. Выберите изображение на своём компьютере для загрузки и размер фавикона, который вам нужен – в данном случае это либо 16×16, либо 32×32, и вы готовы к работе.

Одна интересная особенность FavIco заключается в том, что при создании фавикона, он автоматически сохраняется в онлайн-галерее. Создание нескольких фавиконов позволяет сравнить конечные результаты перед загрузкой.

Favicon It предлагает несколько различных вариантов стандартного генератора фавиконов.

С Favicon It вы следуете стандартной процедуре загрузки изображений, но там, где многие сайты предлагают только фавикон размером 16 или 32 пикселей – Favicon It генерирует фавиконы, apple touch icon и HTML заголовки для всех устройств и браузеров.

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

Генератор фавиконов Prodraw – это бесплатный онлайн-инструмент, который поможет вам преобразовать файлы логотипов, изображений и фотографий в фавиконы.

Его поддержка различных форматов файлов превосходит многие другие генераторы фавиконов в этом списке, и поддерживает не только обычные форматы файлов JPG, GIF, PNG, но также и BMP и TIF.

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

Prodraw старается прояснить различия. Например, если вам нужен фавикон с прозрачным фоном, было бы разумно загрузить изображение в формате GIF или PNG.

Prodraw также объясняет, как лучше всего использовать каждый размер каждого фавикона. Например, от 32×32 – иконка для рабочего стола, от 48×48 – большая XP иконка, до 128×128 пикселей – размер иконки Windows Vista в формате значка * .ICO.

Хотя некоторые из этих форматов устарели, можно использовать те же размеры для современных инструментов. Например, 128 пикселей – это правильный текущий размер для фавикона веб-магазина Google Chrome.

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

ICO converter делает то, что обещает.

Это простой онлайн-конвертер изображений .ico и генератор фавиконов. Он возьмёт любое изображение и конвертирует его в файл ICO для использования в качестве фавикона сайта или приложения Windows.

ICO converter позволяет вам выбрать, какой размер фавиконов вы хотите включить в окончательный ICO. Он предлагает 16 пикселей, 32 пикселей, 48 пикселей, 64 пикселей, 128 пикселей и 256 пикселей.

В отличие от многих своих конкурентов, ICO converter также позволяет вам выбрать окончательную битовую глубину вашего фавикона. Выберите битовую глубину 8 бит (256 цветов, палитра) или 32 бита (16,7 млн ​​цветов и альфа-прозрачность).

Таким образом, ICO converter обслуживает как более современные, так и классические стили фавиконов.

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

Фавикон, сокращение от избранная иконка (favorite icon), – это маленькая иконка, которую вы видите на каждой вкладке браузера, панели поиска, закладке, расширении и истории поиска, которые идентифицируют просматриваемый сайт.

Фавикон является значком сайта. Обычно он отображается в адресной строке браузера, вкладках, списке закладок, но также может отображаться в виде иконок на рабочем столе или иконок приложений.

Большинство компаний предпочитают использовать свой логотип в качестве фавикона, поскольку его легче всего идентифицировать. Вспомните знаменитую синюю птицу Твиттера или символ кнопки воспроизведения, что отождествляется с YouTube.

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

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

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

Преимущества добавления фавикона на ваш сайт:

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

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

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

Как добаввить фавикон на свой сайт

Создать собственный фавикон так же просто, как выбрать один из генераторов фавиконов из списка выше и загрузить файл изображения.

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

В то время как большинство браузеров принимают фавиконы в форматах изображений GIF, ICO, PNG и JPG, ICO является идеальным форматом по причине того, что он включает несколько размеров фавиконов в один файл.

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

link rel=”shortcut icon”

Если вы не знаете, что означает link rel =”shortcut icon” не волнуйся. Вы не одни.

Во-первых, вам не нужно писать этот код. Каждый генератор фавиконов в этом списке напишет его за вас. Просто загрузите предоставленный файл в каталог своего сайта и вставьте HTML-код в заголовок своего сайта.

Элемент LINK определяет ссылку на файл Фавикон, который вы загрузили.

Есть способ избежать кодинга, используя визуальный генератор фавиконов, такой как Zyro.

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

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

Стандартные размеры фавиконов – 16×16 и 32×32 пикселей. Однако разные платформы, например, иконки приложений, обычно требуют фавиконы разных размеров для лучшей видимости.

Вот полный список нынешних размеров фавиконов и соответствующего их использования:

• 16×16 пикселей (стандартный браузер)
• 32×32 (иконки для рабочего стола)
• 128×128 (иконка Chrome Web Store)
• 152×152 (iPad тач-иконка)
• 167×167 (iPad Retina тач-иконка)
• 180×180 (iPhone Retina)
• 192×192 (Google Developer Web App)
• 196×196 (Chrome для иконки Android)

В нашем списке вы найдёте генератор фавиконов, способный создавать файлы любого из этих размеров.

Генератор фавиконов. Итоги

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

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

Каждый генератор фавиконов в этом списке – подходящий выбор для вашего сайта. Просто подумайте, какие функции вам понадобятся, и сделайте соответствующий выбор.

Помните, что файл ICO может содержать файлы разных размеров. Таким образом, нет необходимости создавать более одного фавикона, даже если вы хотите создать несколько его типов.

Иконки для сайта, favicon ICO у нас сделать легко!

Как сделать иконки для сайта и зачем это надо? Бесплатная программа Icon Generator поможет создать иконку ico или favicon онлайн

Что такое иконка – прекрасно известно не только любому владельцу или разработчику сайта, но и обычному компьютерному пользователю. В какой бы программе вы не работали, будь то специализированное приложение или обычный Word – вы везде можете увидеть множество иконок, отображающих создание нового документа, удаление, сохранение и прочие действия. Да что там! Взять даже обычный рабочий стол ПК – у каждого здесь найдется пара иконок «Мой компьютер», «Мои документы», «Корзина» и т.д.

В Microsoft Windows для хранения иконок используется формат ICO. ICO-файл содержит в себе один или несколько значков, для каждого из которых отдельно задается цветность и размер. Как правило, можно задать любой размер, но чаще всего используются иконки ICO 16х16, 32х32, 48х48 пикселов. Структура иконки ICO близка к формату BMP, но имеет одно отличие – наличие дополнительного изображения-маски, которая накладывается на задний план для прозрачности рисунка.

В общем, иконки ICO мы видим повсюду. Но у многих пользователей возникает резонный вопрос: зачем эти значки нужны? Что такое favicon.ico? Какой программой воспользоваться для создания иконки для сайта в формате ICO? Итак, обо всем – по порядку.

Для чего нужны иконки ICO?

• Простота распознавания. Создать иконки для сайта ICO 16х16 или 48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях. Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями и иконками, стали плохо видны (для людей с плохим зрением это представить несложно). И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с легкостью делать в программе нужные действия благодаря привычным значкам.
• Узнаваемость. Решив создать иконку ICO, вы заметите, что каждый такой значок в отличие от надписи обладает своими собственными характеристиками – формой и цветом. Таким образом, чтобы отличить одну надпись от другой, вам нужно ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного взгляда.
• Запоминаемость. Экспериментально доказано, что картинки запоминаются лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные ассоциации в голове у пользователя. А ведь именно это вам и надо! Решив воспользоваться программой для создания иконки для сайта в формате ICO, в конечном итоге вы сможете создать значок, который настолько запомнится вашему пользователю, что в дальнейшем будет ассоциироваться у него только с вашим сайтом.
• Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку» — размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил название favicon.ico и позволил выделить определенный сайт из множества конкурентов. Но подробнее об этом – в следующем пункте.

Особенности и значение favicon.ico

Favicon (сокращение от FAVorites ICON – «значок для избранного») – иконка для сайта. Решив создать иконку favicon.ico для сайта, получившийся значок будет отображаться не только перед URL страницы в адресной строке, но и рядом с закладкой, во вкладках, в выдаче поисковика и прочих местах.

Решив создать favicon.ico, иконки для сайта, вы получаете возможность придать вашему ресурсу индивидуальность, сделать его более узнаваемым и популярным. Но как сделать иконку favicon.ico для сайта? Какую прогу использовать, чтобы конвертировать BMP, PNG в иконку ICO онлайн?

Icon Generator (Генератор): бесплатная программа-редактор favicon.ico и любых иконок для сайта и рабочего стола

Чтобы конвертировать BMP, PNG в ICO онлайн , требуется специальная программа для создания иконок для сайта. При этом, хочется найти приложение, которое поможет перевести изображение в иконку ICO 16х16, 32х32 не только быстро и качественно, но еще и бесплатно. Наша программа Icon Generator (Генератор) станет для вас идеальным решением!

• выберите на компьютере нужное изображение;
• загрузите его в нашу программу;
• нажмите «Создать ICO».

Инструкция по созданию и установке favicon.ico

Последнее обновление 25.06.2013 от SEOJedi

Инструкция по созданию и размещению фавикона

Приветствую всех!

При создании сайтов либо их SEO оптимизации, приходится общаться с людьми разного уровня компьютерной грамотности. Вот после одного такого общения я решил написать статью, подробно описывающую все этапы по созданию фавикона — «..картинки вверху, там, где названия пишутся..».
Фавикон (favicon) — это маленькая пользовательская иконка, которая отображается во вкладках браузера и находится слева от заголовка (Title) страницы. В качестве фавикона, чаще всего, используют логотип сайта, уменьшенный до 16 x 16 пикселей. Ниже приведен пример сайта, который имеет фавикон и тот, который не имеет.

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

Руководство по созданию фавикона

Шаг 1: Создаем свой образ
Если у вас уже есть логотип или изображение, которое представляет ваш сайт, просто откройте этот файл с изображением в графическом редакторе, например Adobe Photoshop или Fireworks. Если у вас еще нет такого редактора на компьютере, есть и другие варианты, такие как онлайн редактор pixlr.com.
Если вокруг вашего логотипа есть много белого пространства, не забудьте обрезать его, а затем уже уменьшить до требуемого размера 16 х 16 пикселей (я как-то сделал размер 32 Х 32 и нормально прокатило). Если логотип очень сложный по дизайну, и не хочет отображаться в размере 16 X 16 пикселей, его можно упростить, или даже использовать другое изображение, подходящее о смыслу и дизайну, к вашему сайту в целом. В этом случае постарайтесь включить в фавикон основные цвета вашего сайта. Но все же, лучше использовать логотип сайта.
После того как вы уменьшили размер изображения до 16 X 16 пикселей, сохраните файл в формате JPG, PNG, GIF,BMP, или TIF.

Шаг 2: преобразовать изображение
Теперь необходимо преобразовать изображение в файл ICO. Есть несколько интернет инструментов, которые можно использовать для достижения этой цели. Хороший, бесплатный генератор всевозможных иконок доступен по адресу prodraw.net . Просто загрузите ваше изображение, выделите размер значков, и все. Вы можете скачать ваш новый файл с расширением ICO. Но, естественно есть путь значительно легче:
Просто выделяем файл, кликаем правой кнопкой мыши, выбираем переименовать и меняем разрешение JPG, PNG, GIF, BMP, или TIF на ICO (для этого у вас должна быть активирована функция «Показывать расширения файлов » Пуск ->> Панель управления ->> Параметры папок ->> Вид ->> снять галочку в пункте «Скрывать расширения для зарегистрированных типов файлов»).

Шаг 3: Загрузите изображения
Теперь, когда у вас есть свой файл favicon.ico, вам нужно загрузить его в корневой каталог вашего сайта. Изображение должно быть видимым, когда вы переходите по адресу http://ваш сайт/favicon.ico после его загрузки (конечно заменив «ваш сайт» действительным именем домена). Не загружайте фавикон в папку с изображениями, такую как: http://ваш сайт/images/favicon.ico !!!

Шаг 4: Добавление кода
Большинство современных браузеров автоматически определяют наличие фавикона в корневом каталоге и показывают его во вкладке браузера. Поэтому, особого смысла в добавлении кода на ваши страницы нету, но если очень хочется, то можно добавить простые строчки кода в раздел <head>, чтобы все, без исключения, браузеры отображали ваш фавикон должным образом. Ниже приведен код, который вам нужно добавить.

*< link href=”favicon.ico” rel=”shortcut” type=”image/vnd.microsoft.icon” data-mce-href=”favicon.ico” / >

* — При копировании кода не забываем удалять пробел после < и перед >

Имейте в виду, что в разделе <head> вашего веб-сайта будут и другие элементы, такие как заголовок и мета-описания, а также ссылки на файлы CSS. Приведенный выше код можно добавить в любом месте между < head> < /head>.

Ну, вот в принципе и все, что я хотел по этому поводу сказать.

P.S.

Лайкаем, оцениваем, твиттим-ретвиттим, репостим и т.д. Вообщем делаем все, что обычно не делаем )))) Всем спасибо и успехов  !

Создать Favicon

Создать фавикон

Для создания favicon необходимо:

1. Выберите размер вашего фавикона
2. Выберите файл и нажмите Создать Favicon
3. Сохраните полученный Favicon на свой компьютер

Как добавить Favicon на сайт?

1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
3. Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
   • rel — тип ресурса: icon или icon shortcut
   • href — адрес файла
   • type — тип передаваемых данных. Зависит от формата файла.
     • image/x-icon — для формата ICO;
     • image/gif — для формата GIF;
     • image/jpeg — для формата JPEG;
     • image/png — для формата PNG;
     • image/bmp — для формата BMP.

Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.

Требования Яндекса к фавиконке

• Размер: 16×16, 32×32, 120×120 пикселей.
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Требования Google к фавиконке

• Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
• Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
• Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.

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

Favicon Generator — Текст в Favicon

Почему favicon.io?

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

Начало работы с генератором значков

Приведенный выше инструмент позволит вам создать значок из текста.Начните с выбора одной-двух букв для значка. генератор. Поскольку генератор favicon выводит очень маленькие изображения важно использовать несколько символов для максимального разборчивость. Однажды крутая функция с этим генератором значков что вы можете копировать и вставлять как символы Юникода, так и смайлики в текстовое поле. Это полезно, когда смайликов нет указан на странице значка смайликов. Вот пример его сохранения 💯

Делаем фон простым

Затем выберите форму фона.Есть три Доступны простые формы: квадрат, круг и закругленная. Эти являются наиболее распространенными формами, используемыми для создания значков. Ты можешь посмотреть примеры этих форм с ProductHunt, IndieHackers и HackerNews.

Выбор шрифта для фавикона

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

Пошив цветов

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

Как создать фавикон: полное руководство

Дизайн Favicon важнее, чем вы думаете. Размер здесь действительно имеет значение, поскольку хорошо продуманный логотип должен быть узнаваемым в любом размере. Его нужно масштабировать от огромных экранов до значка размером 16 x 16 пикселей, известного как значок. Отличный пример дизайна фавикона — логотип Google. Он идеально подходит для больших экранов с большой буквой G и характерным четырехцветным текстом.И он все еще так же узнаваем, когда его уменьшили до крошечной четырехцветной буквы G, видимой в адресной строке веб-браузера.

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

В этой статье мы рассмотрим процесс создания идеального значка.Мы включим конкретные советы по созданию значка для устройств Apple, Android, Chrome, Opera и Safari. Плюс удобное руководство по разным размерам и форматам значков, которые вам нужно знать. Используйте быстрые ссылки (справа), чтобы перейти прямо к нужному разделу.

Дизайн фавикона: быстрые ссылки

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

Итак, мы собираемся начать с нескольких основных советов о том, как должен выглядеть ваш значок, а затем перейдем к конкретным советам о том, как создать значок для разных контекстов. Мы будем использовать шаблон, доступный в Apply Pixels, чтобы легко сгенерировать различные требуемые размеры значков, и значок из Apply Pixels в качестве примера.

Правила дизайна фавикона

01. Сделайте его узнаваемым

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

02. Используйте свой логотип

Считайте значки значков трезвыми указателями, которые помогают пользователям узнавать ваш веб-сайт при просмотре списков закладок и домашних экранов. Следовательно, вы хотите использовать свой логотип или любой другой символ, который легче всего позволяет пользователю узнать ваш веб-сайт. Если у вас нет логотипа, который вписывается в квадратный холст, используйте наиболее узнаваемую часть вашего логотипа.

03. Держитесь подальше

Есть также несколько вещей, которых следует избегать. Не используйте значок в качестве маркетингового инструмента — это означает отсутствие ценников, «новых» или «обновленных» баннеров и т. Д. Фактически, вы вообще не хотите помещать текст внутри значка. Текст плохо масштабируется, и есть вероятность, что он все равно будет неразборчивым. Наконец, не используйте фотографию — она ​​будет мутной и неузнаваемой в том размере, в котором она появится.

04. Создайте две версии

Когда в Internet Explorer 5 впервые появились значки, они появлялись в строке URL и в списке закладок.Сегодня значки значков отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Это затрудняет прогнозирование того, как ваш значок будет отображаться для конечного пользователя.

Чтобы ваш значок хорошо выглядел в различных контекстах, в которых он будет отображаться, в идеале вы должны предоставить два стиля значка:

Логотип на прозрачном фоне
Эта версия отображается в строке URL, списках закладок и других местах где значок появляется рядом с URL-адресом или именем вашего веб-сайта.

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

Шпаргалка по размеру фавикона

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

Ранее значки должны были предоставляться в формате ICO.Сегодня можно предоставлять файлы в формате PNG (за исключением значка закрепленной вкладки Safari, который должен быть представлен как SVG).

Если вам нужен простой способ создания и экспорта значков всех размеров, взгляните на шаблон значков в разделе «Применить пиксели».

Теперь давайте более подробно рассмотрим конкретные требования различных вариантов использования.

Фавиконы настольного браузера

Как создать фавикон настольного браузера

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

Вам необходимо предоставить этот тип значка трех размеров, все в формате PNG с прозрачный фон .

Apple

Как создавать значки Apple Touch

Apple iOS использует значки Apple Touch для представления веб-сайтов, которые были сохранены на главном экране iOS в виде закладок.Это означает, что значок Apple Touch будет округлен до прямоугольной маски значков приложений iOS.

Он также будет отображаться на том фоне, который пользователь выбрал для своего рабочего стола. Имея это в виду, ваш Apple Touch Icon должен иметь сплошную заливку в стиле стиля .

Значки Apple должны быть представлены в формате PNG. .Вы можете обойтись без значка Apple Touch 180×180 , который автоматически масштабируется для различных размеров iPhone и iPad. В большинстве случаев это сработает.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

• 60×60
• 76×76
• 120×120
• 152×152
• 180×180

Android, Chrome и Opera

Как создать значок для Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome- 512×512.png , который рекомендует Google

С момента появления адаптивных значков в Android веб-сайты, добавленные на домашний экран Android, будут маскировать дизайн 192×192, поэтому значок принимает форму, соответствующую предпочтительному стилю маскирования пользователя.Это может быть квадрат, многоточие, прямоугольник, прямоугольник с закругленными углами или форма капли.

Вам необходимо создать значок PNG с сплошным фоном , при 192×192 и 512×512 .

Реализуйте эти значки, добавив на свой сайт файл manifest.json и сделав ссылку на него в тегах:

Вот код для файла manifest.json :

  {" name ":" "," short_name ":" "," icons ": [{" src ":" / android -хром-

192x192.png "," sizes ":" 192x192 "," type ":" image / png "}, {" src ":" / android-
chrome-512x512.png "," sizes ":" 512x512 "," type ":" image / png "}]," theme_color ":
"#ffffff", "background_color": "#ffffff", "display": "standalone"}  

Safari

Как создать значок для закрепленной вкладки Safari

Это странный вариант, и он только значок, который необходимо предоставить в векторном формате как файл SVG .Он отображается в виде значка эскиза, когда пользователь закрепляет вкладку в окне браузера Safari.

Этот значок должен быть 100% черным файлом SVG с прозрачным фоном . SVG может быть только одним слоем, и safari требует, чтобы для атрибута viewBox SVG было установлено значение « 0 0 16 16» .

Другие типы значков

Существуют некоторые размеры и форматы значков, которые не были включены в эту статью, например, Google TV, Интернет-магазин Chrome и значки Apple Touch до iOS 7. Почему? Потому что они устарели или потому что они редко актуальны для среднего веб-разработчика

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

Подробнее:

Как создать и установить favicon.ico (Linux, GNU, Windows, Unix)

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

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

Favicon — это сокращение от «Значок избранного» (для вас «Значок избранного» Американцы;).Название получено из списка закладок для Microsoft. Internet Explorer, который называется «Избранное» / «Список избранного». Когда вы добавляете сайт в список избранного / избранного, Internet Explorer (версия 5 и выше) спрашивает сервер, есть ли у него файл позвонил по номеру favicon.ico . Если присутствует, этот файл будет использоваться для отображения значка. рядом с текстом закладки.

Другие браузеры, такие как Mozilla, также добавили поддержку значков. В зависимости от в браузере значок может появляться в разных местах, а не только в список закладок (на самом деле он может вообще не отображаться в списке закладок).Он может отображаться в адресной строке или заголовке браузера. вкладку, например.

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

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

Имейте в виду, что для пользователя с медленным модемом favicon.ico может увеличиться. время загрузки страницы на несколько секунд, если оно слишком велико, поэтому не перестараться. Добавление альтернативы 32×32 должно быть достаточно, чтобы изображение будет хорошо смотреться даже в контекстах с более крупными значками.Добавление еще большего количества и больших альтернатив — ненужное раздувание. Постарайтесь, чтобы количество цветов было меньше 16 и создайте значок из 16 цветов, используя переключатель --colors 16 png2ico (или даже создать черно-белый значок с переключателем --colors 2 ). Это приведет к меньшему файл, который загружается быстрее.

Когда вы создаете изображения для включения в свой favicon.ico , не забывайте что значок может быть составлен на фоне разных цветов, чтобы вы должны использовать прозрачность, а не сплошной фон, если хотите чтобы ваш значок не отображался внутри поля.Обратите внимание, что ресурсы значков поддерживает только двоичную прозрачность, т.е. пиксель может быть видимым или невидимым но не что-то вроде 30% полупрозрачности.

Установка вашего Favicon

Чтобы добавить новый favicon.ico на веб-страницу, поместите его на сервер в в том же каталоге, что и веб-страница, для (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html ). Это первое место браузер будет искать. Если он не находит там значка, он проверяет каталог верхнего уровня сервера ( www.example.com/favicon.ico для сервера www.example.com ), поэтому, поместив его туда, вы можете получить значок по умолчанию для всех страниц в вашем домене. В зависимости от браузер и конфигурация, favicon.ico не всегда отображается, даже если он находится в одном из указанных выше мест, если веб-страница явно не заявляет о своем присутствии. Заявить, что на вашей веб-странице есть значок, вы добавляете следующие 2 строки в раздел вашей страницы:

Авторские права (c) 2000-2010, Матиас Бенкманн

[проверить эту страницу]

Создание значка для вашего веб-сайта

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

Создайте свой значок

Дизайн значков размером всего 16 на 16 пикселей может оказаться сложной задачей. Изображения и замысловатые логотипы компаний становятся неузнаваемыми при масштабировании до такого маленького размера, поэтому вам нужно будет придумать что-то простое и, да, знаковое — например, первую букву вашего имени или, возможно, один графический элемент из логотипа вашей компании. Вы можете создать значок с помощью любого графического редактора, но для этого примера мы будем использовать Adobe Photoshop CS4 ().Мы также создадим значок в новом формате .png, который позволяет использовать полноцветные значки со сглаженными краями. Обратите внимание, что значки значков могут быть больше квадрата 16 пикселей, чтобы учесть их использование в списках закладок и RSS-каналах, но в этой статье мы сосредоточимся на том, как создать значок, который будет отображаться в адресном окне вашего браузера.

Создавая свой значок, сохраняйте его обтекаемым и придерживайтесь линий сетки. Горизонтальные и вертикальные края, которые не прилегают к сетке, в конечном итоге будут выглядеть мутными и нечеткими.Избегайте слишком большого количества деталей; в конце концов, каждый квадрат сетки будет уменьшен до одного пикселя при уменьшении масштаба.

Загрузка вашего значка

Экспорт значка для использования в Интернете очень прост. Выберите «Файл» -> «Сохранить для Интернета и устройств», а затем выберите «PNG-24» во всплывающем меню «Предварительные настройки». Нажмите «Сохранить», введите favicon.png в качестве имени файла и еще раз нажмите «Сохранить». Теперь перейдите в Finder, найдите файл и переименуйте его в «favicon.ico». Finder попросит вас подтвердить, что вы хотите изменить расширение файла; нажмите «Использовать».ico », чтобы продолжить.

Последний шаг — загрузить файл на ваш веб-сайт. Запустите программу FTP и найдите корневой каталог вашего веб-сайта, в котором обычно находится ваша домашняя страница (например, home.html, index.html или index.shtml). Загрузите файл favicon.ico в этот каталог, и все готово. Используйте свой веб-браузер, чтобы посетить свою домашнюю страницу, и ваш новый значок должен появиться рядом с вашим веб-адресом в поле адреса. Если вы хотите быть абсолютно уверены, что ваш значок отображается, вы можете добавить следующий код в раздел заголовка своей страницы:

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

Фавиконы — это ценные украшения, которые сделают ваш сайт более запоминающимся. Они предоставляют посетителям визуальные подсказки и добавляют изысканности любому веб-сайту. И их на удивление легко создавать.

Крис Маквей — автор, иллюстратор и фотограф игрушек из Галифакса, Новая Шотландия.

Создание значка с использованием изображений PNG

Майкл Аргентини
Управляющий партнер, технологии и дизайн

Favicons — это те крошечные изображения, которые веб-сайты отображают на вкладках браузера и в закладках, как на синих квадратных значках Fynydd выше.

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

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

Большой вопрос, как создать этот файл. Для этого существуют инструменты, но если вы заинтересованы в создании одного из них самостоятельно и уже имеете (или можете создавать) изображения в виде файлов PNG, вы можете сделать это бесплатно.

Установите ImageMagick

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

OS X

Для пользователей Mac, которые используют диспетчер пакетов Homebrew, вы можете просто ввести это в Терминале:

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

Если вы предпочитаете установить ImageMagick без использования Homebrew, вы можете посетить Cactus Labs и загрузить созданный ими установщик.

Windows

Пользователи Windows могут посетить веб-сайт ImageMagick и загрузить установщик прямо с него. Используйте их рекомендованный установщик. Остальные предназначены для особых случаев использования.

Проверка установки

В терминале OS X или командной строке Windows выполните приведенную ниже команду, чтобы проверить установку.

Вы должны увидеть длинный список инструкций по использованию инструмента.

Создайте Favicon

Теперь, чтобы преобразовать несколько файлов .png в один файл .ico, просто следуйте этому формату в терминале:

  convert file1 file2 file3 [...] favicon.ico
  

Итак, соберите изображения PNG. Должен быть файл для каждого из следующих размеров пикселей: 16×16, 24×24, 32×32, 48×48 и 64×64. Назовите их что-то вроде «favicon-16.png», «favicon-24.png» и т. Д.

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

  convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico
  

Как использовать Favicon

Файл favicon.ico является частью старой технологии и поэтому не очень гибок в том, где его можно разместить. Поэтому убедитесь, что вы поместили его в корень вашего сайта.А также убедитесь, что вы ссылаетесь на него с абсолютным URL-адресом (включая http и т. Д.). Ниже приведен пример.

Значки сайтов для iOS и Android

Современные настольные и мобильные браузеры используют изображения PNG в качестве значков сайта. Так что всегда полезно включать теги и для них.

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

Значки сайтов для плиток Windows 8

Плитки Windows 8 также могут использовать значки так же, как современные браузеры используют изображения PNG. Синтаксис аналогичен, с добавлением определения цвета фона для самой плитки. Разместите эти теги в области разметки страницы.

Последнее обновление статьи: 21.04.2018.

Favicon — Как создать Favicon.ico

Попробуйте перед покупкой . Загрузите любой продукт Adobe и получите бесплатную 30-дневную пробную версию .

Попробуйте Adobe Stock бесплатно в течение одного месяца — скоро закончится!
Вот отличное предложение от Adobe, которое продлится только до конца ноября — получите 10 бесплатных изображений Adobe Stock. Предложение заканчивается 30 ноября. Ваш первый месяц будет возвращен, когда вы подпишетесь на один год в Adobe Stock (план 10 изображений в месяц) по цене 29,99 долларов США в месяц. (плюс применимые налоги) Отмена без риска в течение первого месяца.

Mysteries Of The Favicon.ico — Как создать Favicon в Photoshop

Favicon — это небольшой пользовательский значок, который появляется рядом с URL-адресом веб-сайта в адресной строке веб-браузера. Они также отображаются на сайтах, отмеченных закладками, на вкладках в браузерах с вкладками и в виде значков для ярлыков Интернета на рабочем столе или в других папках Windows. И когда я говорю «мало», я имею в виду 16 на 16 пикселей. Так что, если вам нравится хороший дизайнерский вызов, попробуйте свои силы в этом.

Все, что вам нужно для добавления значка Favicon на свой сайт, — это файл значков Windows (.ico), обычно называемый favicon.ico, который вы загружаете в основной каталог своего веб-сайта. В настоящее время большинство браузеров, помимо Internet Explorer, могут вместо этого использовать GIF (включая анимированные) или PNG (включая полную прозрачность). Но поскольку все браузеры, включая IE, понимают формат .ico, и поскольку в нем есть много интересных функций, которых нет в GIF и PNG, читайте дальше, чтобы узнать, как его создать.

Загрузить плагин
Вам понадобится плагин Photoshop в формате Windows Icon (ICO) для экспорта в формат.ico формат файла. Вы можете скачать плагин из Telegraphics. Плагин читает и записывает файлы ICO в 1, 4 и 8-битном индексированном и 24-битном режимах RGB, а также считывает и записывает 32-битные значки «XP» (с 8-битным альфа-каналом). Обязательно установите плагин, прежде чем приступить к этому руководству.

Давайте начнем
Поскольку 16 x 16 — это такая маленькая область холста, может быть очень сложно проявить творческий подход. Поэтому вместо этого начните свой проект с холстом, установленным на 64 x 64 (всегда используйте четные числа, если вы планируете изменять размер файлов).Сделайте это, выбрав «Файл»> «Создать» и открыв новый холст размером 64 x 64 пикселя.

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

Когда вы будете готовы протестировать дизайн, выберите меню «Изображение»> «Размер изображения» и введите 16 x 16. Щелкните «Resample Image» и выберите «Bicubic Sharper» из раскрывающегося меню (только CS для этого шага).Это лучшая настройка, позволяющая убедиться, что изображение не размывается при изменении размера. Если он по-прежнему недостаточно резкий, вернитесь и увеличьте резкость, перенасыщите и / или увеличьте контраст исходного изображения, а затем снова измените его размер.

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

Сохранение пользовательского значка
Перейдите в меню «Файл»> «Сохранить как» и убедитесь, что вы назвали файл значком «favicon».ico. В разделе «Формат» в раскрывающемся меню необходимо выбрать значок Windows (ICO). Этот формат будет доступен в Photoshop только после того, как вы загрузите и установите плагин. На следующем шаге вам нужно будет загрузить этот новый файл в корневую папку вашего веб-сайта, поэтому сейчас рекомендуется перейти и сохранить его в этом месте на жестком диске.

Загрузка файла Favicon.ico
Подключитесь к своему серверу и загрузите файл Favicon.ico на свой веб-сайт.Вы должны поместить его в тот же каталог, что и ваша домашняя (индексная) страница, и оставить его свободным, стараясь не помещать его в каталог изображений или другую папку. Стандартное расположение — это «корневая» папка вашего сайта, которая находится в том же каталоге, что и ваша домашняя (индексная) страница, а не внутри каталога изображений или другой папки. Если вы поместите его туда (и назовете его favicon.ico), большинство браузеров найдут его автоматически.

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

(Некоторые люди считают, что на самом деле более правильным является следующее: Вы можете использовать оба, если хотите!)

Если вы хотите использовать вместо этого GIF или PNG, используйте этот формат (просто помните, что он не будет работать в IE):
или

Тестирование
Если ваш новый значок Favicon не отображается сразу, попробуйте обновить страницу или очистить кеш — или поставить знак «?». в конце URL-адреса, что заставит браузер думать, что страница новая и не кэшируется.

Устранение неполадок
Проблемы с браузером : Microsoft IE 6 для Windows не будет отображать значок, пока URL-адрес не будет добавлен в избранное.Или попробуйте этот трюк: перейдите в адресную строку, щелкните существующий (обычно это IE по умолчанию) значок, затем немного «покачивайте» его и отпустите. Это перезагрузит страницу и должен появиться новый значок.

Safari для MAC не будет отображать обновленный значок, пока кеш браузера не будет очищен. Но выбор «пустой кеш» из меню не поможет, потому что Safari хранит значки в отдельном кеше. Выберите «Правка»> «Сбросить Safari» и установите флажок «Удалить все значки веб-сайтов». Если вы не можете этого найти, очистите кеш значков самостоятельно.Найдите его в «Пользователь»> «Библиотека»> «Safari»> «Иконки». В версии Safari для Windows найдите C: \ Documents and Settings \ YourUserName \ Local Settings \ Application Data \ Apple Computer \ Safari \ WebpageIcons.db. Закройте Safari, удалите файл, перезапустите Safari. (Иногда вам также необходимо перезагрузить компьютер.)

В FireFox очистите кеш и перезапустите браузер. В Opera просто обновите.

Windows на самом деле может самым верить в то, что не обновляет значки для ярлыков в Интернете (например, на рабочем столе).Этот совет от www.vistax64.com/tutorials :

1. Щелкните правой кнопкой мыши на рабочем столе.
2. Выберите «Персонализация» и выберите «Настройки дисплея» (или просто «Настройки» в XP).
3. Измените цвет с 32-битного на 16-битный и нажмите «Применить».
4. Измените цвет на 32 бита и нажмите «Применить».

Формат файла недоступен : Формат файла Windows Icon (ICO) будет недоступен до тех пор, пока вы не загрузите и не установите плагин, а затем не закроете и не перезапустите Photoshop.

Устранение неполадок Обновление
Один человек, у которого были проблемы с Internet Explorer 7, прислал нам небольшой совет:
У меня были проблемы с IE 7, но добавление этих двух строк кода решило проблему:


Я нашел информацию здесь:
www.webmasterworld.com/ html / 3251565.htm

И Шариф отправляет это: По моему опыту, Internet Explorer кажется немного нестабильным с точки зрения времени, которое требуется, прежде чем вы решите отобразить значок.Я пробовал много вариантов кода, но в большинстве случаев значок не отображается сразу, однако недавно я обнаружил полезный совет: как только вы разместите код на своих веб-страницах и загрузите файл favicon.ico на свой сервер, перейдите к файлу favicon.ico (www.yoursite.com/favicon.ico), и браузер (IE 7) немедленно отобразит значок и сохранит его.

Фавиконы с несколькими разрешениями
Так что, если вы зашли так далеко, вы уже можете видеть свой значок в адресной строке браузера, и он, вероятно, выглядит отлично.Вы амбициозны и хотите сделать еще один шаг?

Особенно в Windows значки значков появляются повсюду. Например, если вы помещаете ярлык на веб-сайт на свой рабочий стол, Windows часто использует значок сайта в качестве значка ярлыка. Но на рабочем столе Windows использует значок гораздо большего размера, обычно 48×48 пикселей. Когда это происходит, Windows должна масштабировать ваш значок, и он, вероятно, будет выглядеть размытым и уже не таким красивым.

Вы можете это исправить. Одна из замечательных вещей.ico заключается в том, что они могут содержать нескольких версий значка с разными размерами и глубиной цвета (вроде как анимированный GIF содержит несколько кадров). Когда они это делают, Windows использует наиболее подходящий размер и глубину цвета. Для размеров наиболее распространены 16×16, 24×24, 32×32 и 48×48 пикселей, и все они могут быть объединены в один файл .ico.

Создание значка с несколькими разрешениями не намного сложнее, чем то, что вы сделали для создания своего значка 16×16, Telegraphics, там же, где вы разместили свой плагин favicon, также имеет другой плагин http: // www.telegraphics.com.au/sw/info/icobundle.html, который позволяет объединить несколько значков в один файл .ico. На самом деле это не плагин, а отдельная программа для Windows (используется в командной строке) или MacOS (перетаскивание и уронить). Существует также множество автономных инструментов, которые создают для вас значок с разным разрешением из одного начального изображения. Вот пара, которую можно попробовать бесплатно: www.sibcode.com/icon-studio и www.aha-soft.com/anytoicon .

Что касается глубины цвета… опять же, если вы работаете в Windows, вы, возможно, заметили раньше, что некоторые значки на вашем рабочем столе имеют неровные края, в то время как другие плавно переходят по краям. Плавное наложение связано с тем, что эти значки содержат версию с 32-битной глубиной цвета, которая обеспечивает настоящую прозрачность, как и ваши слои в Photoshop. Вы можете создать 32-битную версию своего значка, а также 24-битную (16 миллионов цветов, прозрачность в формате gif), 16-битную (256 цветов) или даже 8-, 4- или 2-битную … все из которых снова можно было хранить в одном.ico файл!

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

16×16, 16-битные (256) цвета
16×16, 32-битные цвета
32×32, 16-битные (256) цвета
32×32, 32-битные цвета
48×48, 16-битные (256) цвета
48×48 , 32-битные цвета

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

Вдохновение
Если вам нужно вдохновение, просмотрите эту прекрасную коллекцию значков. Также обратите внимание на симпатичный категоризированный список из 50 замечательных значков в журнале Smashing Magazine. Вы можете найти что-то, что натолкнет вас на идею.

Вот и все. Наслаждайтесь своими избранными!

Скидка Creative Cloud — Скидка 40% на Adobe Creative Cloud

Текущие пользователи Creative Suite — Скидка 40% в первый год использования Adobe Creative Cloud.Предложение доступно для всех зарегистрированных пользователей отдельных продуктов и пакетов CS3 или более поздних версий. Недоступно для образовательных учреждений или клиентов с корпоративным лицензированием.

С Adobe Creative Cloud простая ежемесячная подписка дает вам всю коллекцию инструментов CS6 и многое другое. Любите печатать? Заинтересованы в веб-сайтах и ​​приложениях для iPad? Готовы редактировать видео? Вы можете все это сделать. Кроме того, участники Creative Cloud автоматически получают доступ к новым продуктам и эксклюзивным обновлениям сразу после их выпуска.А благодаря облачному хранилищу и возможности синхронизации с любым устройством ваши файлы всегда будут там, где они вам нужны. Creative Cloud доступен для отдельных лиц или групп.

Программа onOne для цифровых фотографов — эксклюзивная скидка 15%

Программа onOne — это самый быстрый и простой способ сделать ваши изображения необычными. Они работают везде — с Photoshop, Lightroom, Aperture и как отдельные приложения. Используйте код скидки PSSPPT06 , чтобы получить скидку 15% на любой продукт onOne.

Perfect Photo Suite
— Все, что вам нужно для реализации вашего фотографического видения
— Семь интегрированных продуктов для вашего рабочего процесса фотографии
— Perfect Effects: Создавайте впечатляющие изображения
— Perfect Portrait: Простое мощное ретуширование
— Perfect Resize (Настоящие фракталы ): Увеличение изображений для печати
— Perfect Layers: мощь слоев без Photoshop
— Perfect Mask: необходимый инструмент для вырезания
— FocalPoint: установите фокус там, где вы хотите
— PhotoFrame: границы, фон, текстуры и украшения

Perfect Effects
— Добавляйте популярные HDR и ретро-образы
— Воссоздайте внешний вид пленок и методов темной комнаты
— Завершите изображения с помощью виньеток, текстур и границ

Perfect Portrait
— Простое мощное ретуширование портрета
— Автоматическое сглаживание кожи и удаление пятен
— Мгновенное улучшение глаз и зубов

Perfect Mask
— Удаление фона с помощью одним щелчком мыши
— Легко обрезать такие жесткие вещи, как волосы, стекло и ветки деревьев
— Все лучшие инструменты маскирования без Photoshop

Perfect Resize
— Увеличение изображения высочайшего качества на основе Genuine Fractals
— Увеличить мобильный с телефона на цифровую зеркальную камеру до 1000%
— Сохранение резкости и детализации исходной фотографии

FocalPoint
— Мгновенное создание образа светосильных и дорогих объективов
— Управление глубиной резкости после снимка
— Имитация творчества Внешний вид объективов с наклоном и сдвигом

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

Perfect Layers
— Расширьте возможности редактирования изображений Lightroom & Aperture
— Объединение лучших частей нескольких фотографий
— Ретуширование портретов и пейзажей

Эксклюзивная скидка 15% на плагины, пакеты и обновления Topaz

Введите наш эксклюзивный код купона на скидку PHOTOSHOPSUPPORT во время процесса оформления заказа в Topaz Labs, чтобы получить мгновенную скидку 15% на любой продукт Topaz, включая комплекты и обновления.

Плагины Topaz Labs Photoshop специально разработаны для расширения творческого набора инструментов фотографа за счет использования мощных разработок в области технологий обработки изображений. Фотографы во всем мире теперь пользуются преимуществами творческих эффектов экспозиции, художественного упрощения, уникального манипулирования краями и первоклассного шумоподавления, предлагаемого в продуктах Topaz. Пакет плагинов Topaz для Photoshop — это сверхмощный пакет плагинов для Photoshop, который включает в себя следующие продукты Topaz:

Topaz Adjust
Создавайте потрясающие и динамичные изображения с помощью этого уникально мощного плагина, который имеет возможности HDR и улучшает экспозицию, цвет и деталь.
Topaz InFocus
Topaz InFocus использует последние достижения в технологии деконволюции изображений для восстановления, уточнения и повышения резкости деталей изображения.
Topaz Detail
Трехуровневый плагин настройки детализации, который специализируется на улучшении микроконтрастности и резкости без артефактов.
Topaz ReMask
Самая быстрая и эффективная программа маскирования и извлечения с уточнением маски в один клик.
Topaz DeNoise
Подключаемый модуль для высококачественного шумоподавления, который удаляет большинство шумов и цветовых шумов, сохраняя при этом большую часть деталей изображения.
Topaz Simplify
Обеспечивает творческое упрощение, художественные эффекты и акцентирование линий для легкого единственного в своем роде искусства.
Topaz Clean
Управляйте глубиной деталей ваших изображений с помощью обширных инструментов сглаживания, управления текстурой и улучшения краев.
Topaz DeJPEG
Значительно улучшает качество веб-изображений и других сжатых фотографий.

Узнайте больше о комплекте плагинов Topaz для Photoshop. Загрузите бесплатную пробную версию.


Веб-шаблон Photoshop — Учебник по дизайну веб-сайта
Узнайте, как создать веб-шаблон Photoshop с помощью этого руководства по дизайну веб-сайта.Включает готовую веб-страницу с кодом и ссылками на бесплатные ресурсы.

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

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


Блог Photoshop предлагает последние новости Photoshop и цифровой фотографии, обновления программного обеспечения, советы и руководства, а также случайные мысли от художника-графика, цифрового фотографа и эксперта по Photoshop Дженнифер Эппл.

Инструмент для веб-дизайна Site Grinder

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

По сути, Photoshop — это дизайнерская студия без ограничений, предлагающая художнику, казалось бы, бесконечный набор творческих возможностей. С другой стороны, HTML, CSS, Java и тому подобное следуют строгим правилам взаимодействия, требующим от разработчика принятия во внимание любого количества эзотерических проблем, чтобы гарантировать правильное отображение дизайна в сети.

Превратите Photoshop в полноценный инструмент веб-дизайна
SiteGrinder стремится преодолеть этот разрыв между дизайном и разработкой. По сути, SiteGrinder превращает Photoshop в простой в использовании и полнофункциональный инструмент веб-дизайна. С SiteGrinder дизайнеры теперь будут иметь возможность полностью дать волю своему творчеству, а затем, не пропуская ни секунды, перенести свои проекты в Интернет. SiteGrinder объединяет эстетические аспекты с практическими соображениями и представляет собой удивительно мощный инструмент, который станет фантастическим дополнением к набору уловок любого веб-дизайнера.Версии разблокируемой демоверсии SiteGrinder для Mac OS X и Windows доступны для скачивания.

Онлайн-библиотека lynda.com — просмотр бесплатных видеоклипов

Подписка на онлайн-библиотеку lynda.com обеспечивает доступ в любое время к десяткам тысяч видеоуроков по Photoshop, Illustrator, Dreamweaver, веб-дизайн, цифровые изображения, 3D, цифровое видео, анимация и многие другие темы.Просматривайте бесплатные видеоклипы.

Менее чем за доллар в день участники имеют возможность оставаться в курсе событий и сохранять навыки, изучать инновационные и продуктивные методы, а также обретать уверенность и конкурентоспособность — и все это в своем собственном темпе. Премиум-подписки включают файлы упражнений инструкторов, чтобы участники могли следить за точными примерами на экране. Клиенты учатся в своем собственном темпе и могут останавливать, перематывать и воспроизводить сегменты так часто, как это необходимо. Посмотреть несколько бесплатных видеоклипов (высокое разрешение).

Плагин Photoshop Masking Fluid Mask — эксклюзивная мгновенная скидка

Обзор Fluid Mask 4 1/2 из 5 на MacWorld начинается с того, что этот плагин Photoshop упрощает извлечение фона, «Fluid Mask — очень эффективный инструмент для отделения объектов от их фона. Он предлагает множество полезных функций для решения практически любого сложного изображения, от тонких волос до сложной листвы».Онлайн-видеоуроки и интерактивные тренинги помогают упростить процесс обучения ».

Наши друзья из Vertus, разработчики плагина Fluid Mask Photoshop, создали специальную эксклюзивную скидку на PhotoshopSupport.com. Перейдите на нашу страницу Fluid Mask, чтобы получить специальную информацию. , эксклюзивная ссылка на скидку.

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

Создание значка избранного (favicon.ico) для вашего сайта

Хотите узнать, как настроить значок, отображаемый с адресом вашего веб-сайта, или вы здесь, потому что ваш сервер сообщает, что favicon.ico — самый популярный отсутствующий файл на вашем сайте?

На этой странице я расскажу, как я сделал значки избранного на различных страницах своего сайта.На этом снимке экрана моей домашней страницы в Internet Explorer значки обведены красным:

Снимок экрана, показывающий значок избранного в адресной строке и список избранного в Internet Explorer

Что такое favicon.ico?

Это изобретение Microsoft. Internet Explorer будет искать его, когда кто-то зайдет на ваш сайт. Если он там есть, он будет отображаться в виде значка в адресной строке с вашим URL-адресом. Если его там нет, браузер показывает изображение листа бумаги IE по умолчанию с буквой «e».Он также будет отображаться вместе с названием вашей веб-страницы в списке избранного. Посетители могут перетащить значок из адресной строки на свой рабочий стол, чтобы там же была ссылка на ваш сайт, а логотип используется там в двойном размере.

Favicon.ico теперь также распознается Netscape.

Как мне его сделать?

1. Создайте файл изображения. Он должен быть 16×16 пикселей, хотя IE также масштабирует значок 32×32 на лету. Я использовал бесплатный Irfanview, чтобы изменить размер изображения и преобразовать его в формат ICO.
2. Загрузите его в корень вашего сервера как favicon.ico. Так и должно быть, но не всегда так получается.
3. Итак, включите этот код на своей веб-странице между тегами и: Но, очевидно, ссылка на ваш собственный значок. Когда вы ссылаетесь на свой значок таким образом, вы можете дать ему другое имя favicon.ico и иметь множество разных значков избранного для разных страниц вашего сайта, ссылаясь на разные значки с каждой страницы.Я создал разные значки для нескольких разделов своего сайта, как показано на скриншоте выше. Вам необходимо включить соответствующий код LINK REL на каждую веб-страницу вашего сайта, поэтому включение его в шаблон может значительно облегчить вашу жизнь.

Как сделать значок для iPod Touch или iPhone?

Браузер Safari в iPod Touch и iPhone позволяет пользователям добавлять в закладки сайты, которые отображаются в интерфейсе в виде ярлыков значков, как показано на фотографии справа.На жаргоне Apple они называются «закладками веб-клипов».

Чтобы настроить его для своего сайта, вам необходимо создать файл изображения размером 57×57 пикселей и сохранить его как файл PNG. Затем загрузите его в корень своего веб-сайта (где хранится ваша веб-страница по умолчанию, например index.htm) с именем apple-touch-icon.png. IPod Touch или iPhone нанесут на него стеклянную накладку, чтобы он выглядел как значок Apple.

Если он не работает, или если вы хотите иметь разные значки для разных страниц, вы можете добавить ссылку на значок, аналогично тому, как вы ссылаетесь на обычный значок:

… где customicon.png — имя файла вашего пользовательского значка, включая путь к нему, если необходимо.