Сделать favicon ico: Создать фавикон онлайн | favicon.ico для сайта

Создание фавикона (favicon.ico) для сайта Joomla!

Видео взято с канала: Dmitriy Sleptsov

️ Создать favicon (.ico) Онлайн Генератор Фавикон

Видео взято с канала: Роман Иванов

Как создать иконку для сайта в фотошопе | ico делаем Favicon icon

Видео взято с канала: Victor Stork

Уроки HTML, CSS Как добавить иконку сайта favicon

Привет друзья! В этом уроке мы с вами рассмотрим, как добавить иконку вашего сайта, чтобы она отображалась в закладке браузера. Это поможет выделиться вашему сайту из множества других таких же сайтов, которые открыты у посетителя в закладках браузера. Мы рассмотрим, как сделать иконку из готовой картинки, и как еще ее можно нарисовать самим. .
Кстати, создание сайта с нуля да еще в редакторе html страниц называется версткой сайта:).
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: https://wiseplat. org/.
1) Урок на сайте Wiseplat:.
✔ Сообщество программистов: https://wiseplat.org/.
✔ —
Вступай в группу Вк https://vk.com/wiseplat .
Группа FaceBook https://www.facebook.com/wiseplat/.
Инстаграм Wiseplat: https://www.instagram.com/wiseplat/.
Instagram: https://www.instagram.com/shpaginoleg/.
Twitter https://twitter.com/WiseplatSchool.
********************************.
Если Вам понравилась публикация, подписывайтесь на канал!
.
Ставьте лайки, тогда будем еще писать такой контент:).
Если есть вопросы или пожелания, то пишите, в комментариях..
********************************.
Уроки от #OlegShpagin ‍.
#htmlуроки #cssуроки #программированиедлядетей #иконкадлясайта

Видео взято с канала: Изучаем мир ИТ / Олег Шпагин / WISEPLAT

Как установить favicon Константин Хмелев

Видео взято с канала: Константин Хмелев

Быстрое создание favicon.ico

Видео взято с канала: Александр Tochcha

Как сделать Favicon для сайта и зачем это нужно? // Уроки разработки // #VA

Видео взято с канала: #VA

Как создать favicon.

Как создать favicon.ico для сайтов

Иконка фавикон (favicon.ico) – это маленькая, но хитрая иконка, которая отображается в браузере в строке адреса, рядом с URL сайта, а также в некоторых поисковых системах — например, в Яндексе. Пользователь, набирая поисковый запрос, видит фавикон.ико в выдаче (SERP) напротив названия ресурса. Иконка для сайтов FAVICON.ICO — это хорошее средство сделать сайт запоминающимся, интересным фавиконом можно заинтересовать пользователя в переходе не хуже, чем грамотно составленным сниппетом. Название фавикона происходит от сокращения «Favorite Icon» («любимая икона«).

Как создать фавикон: создание фавикона для сайта

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

Как нарисовать favicon.ico самостоятельно? Создание фавиконки.

Заготовку для фавиконки нетрудно найти в Интернете. В Яндексе и Гугле есть подходящая для этого опция поиска по изображениям — «поиск по типу картинки». Можно поступить и по-другому: пойти на какое-нибудь хранилище картинок и выбрать оттуда подходящую картинку по ключу “icon”. Можно конкретизировать поиск: например, если хочется иконку с автомобилем, то задать “auto icon”.

Совет по выбору заготовки для иконки favicon.ico из готовых картинок:

---

Постарайтесь подобрать для фавикона картинку с четкими контурами и без мелких деталей, лучше размера 48 на 48 пикселов. В другом случае при уменьшении изображения до размера favicon.ico 16×16 может потеряться разборчивость.

Затем, используя графический редактор ФотоШоп, следует обрезать размер картинки так, чтобы будущая иконка вписалась в квадрат, оставив минимум свободного места. После этого размер изображения делается 48×48 (именно для минимализации искажений мы и рекомендовали изначально взять такой), затем ее надо сохранить для web в формате GIF и обязательно без подложки — если, конечно, фон не несет какой-нибудь дополнительной смысловой нагрузки.

Программа Favicon Generator: как сделать favicon.ico

В сети Интернете достаточно он-лайновых сервисов, которые преобразовывают картинки любого формата в формат фавиконов. На самом деле это преобразование далеко не такое простое: ведь, помимо изображения 16 на 16, в favicon.ico входят и другие варианты (например, исходный размер 48 на 48 для размещения на рабочем столе Windows).

Онлайн-сервис для создания фавикона для сайтов FAVICON.RU.

На наш взгляд, лучшим онлайн-сервисом для создания фавикона.ико на сайты является http://favicon.ru/. Этот сайт позволяет сделать иконку из любой картинки. Для создания фавикона для сайта достаточно загрузить подготовленное изображение с локального компьютера, все остальное онлайновый генератор фавиконов Online Favicon Generator сделает самостоятельно. Остается скачать favicon.ico для сайта нажатием кнопки «Скачать favicon.ico!”. Сервис по созданию фавиконов работает совершенно бесплатно.

Как создать фавикон для сайта? Создание иконки favicon. ico на сайт из картинки

Все, иконка ФАВИКОН.ИКО готова и лежит на локальном компе с одноименным названием. Что дальше? А дальше осталось загрузить ее на хостинг и аккуратно прописать в секции HEAD на HTML-странице.

Как вставить favicon.ico на сайт? Установка фавикона

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

Рекомендация по размещению файла иконки favicon.ico на сервере:

---

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

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

Как поставить фавикон на сайт? Правила установки фавиконов.

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

То, что выделено жирным – путь к иконке (пример для этого сайта). Заодно можете оценить, насколько икона отображает суть тематики SEO и по цветовой гамме и стилистике делает сайт запоминабщимся. Если религиозные или политические соображения не позволяют Вам положить фавиконку в корень домена — то укажите полный путь к ней.

Отображение favicon.ico для сайта в браузерах и поисковиках.

Остается проверить, как отображается фавикон на сайте в браузере и поисковых системах. Если используется браузер Mozilla Firefox, то нужно закрыть его и затем открыть снова — новоявленная иконка должна появиться рядом с URL сайта.

Что же касается поисковых систем, то иконку favicon.ico они загрузят при следующем сканировании сайта, а отобразят лишь при очередной ротации поиска. И если с индексацией web-ресурса все в порядке, то можно фавикон рядом с заготовком сайта через одну…две недели.

Как сделать favicon с прозрачностью (прозрачный favicon) » Познавательный блог

Сегодня мы будем делать иконку для сайта, FAVICON с прозрачностью.

Что же такое Favicon?

Favicon (сокр. от англ. Favorites ICON) — значок сайта. Отображается браузером в адресной строке перед URL страницы, а также в качестве иконки к закладке, в табах и в других элементах интерфейса.
Обычно используется изображение размера 16×16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon. ico, т. к. исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде примерно в таком формате:

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

Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO).

Создаём прозрачность.

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

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

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

Сделаем это в Photoshop:

Изображение обязательно должно быть равносторонним. Ширина картинки равна Высоте. Если хоть на 1 пиксель ни будут отличаться, иконка получится кривая.
Размер иконки должен быть не менее 16×16 пикселов. Можно и больше, генератор сам уменьшит картинку.

Создали картинку, отредактировали, почистили как нам надо кисточкой. Учтите, чтобы получилась прозрачность нужно. Чтобы фон был прозрачным. Эту настройку указываем при создании изображение в фотошопе. Background Contents

После редактирования нажимает Ctrl + Alt + Shift + S и сохраняем нашу картинку в формате PNG.

Полученный файл загоняем в онлайн генератор. Я использовал https://tools.dynamicdrive.com/favicon/

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

Готово. Есть ведь разница? 🙂

Как сделать favicon собственными руками?

1. Изготовление фавикона или нахождение уже готового;
2. Установка его на сайт.

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

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

Графические редакторы

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

На скриншоте пример «шедевра», который я начал изображать с помощью сервиса Pixlr:

Результат можно сохранить в формате «. gif» или «.png».

Онлайн сервис Favicon.cc

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

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

Онлайн генераторы фавиконки

Еще один вариант решения задачи — веб-сервисы, которые в автоматическом режиме генерируют картинку. Например проект Логастер.

Так как сайт изначально заточен на разработку логотипов, то сначала придется начинать именно с него. Затем специальный инструмент подберет разные варианты favicon для вашего случая. Редактор позволяет менять внешний вид объектов картинки, текстов и оформления. Детальнее об этом читайте в статье про создание фавиконки в Логастере. Заметка пригодится новичкам, если сходу разобраться сложно.

Установка favicon

Какой бы из вариантов вы бы не выбрали, создание фавикона дело не очень сложное и интересное. Установка так же проблем не доставит. После того как вы сохраните готовую иконку на компьютере, ее можно будет конвертировать в формат «.ico», или использовать файлы «.gif» или «.png». Принципиальной разницы не будет, практически любой вариант при желании в последующем можно будет анимировать. Остается последнее — залить фавикон в «корень» сайта (с именем favicon) и добавить фрагмент кода в head секцию:

<link rel="shortcut icon" href="Путь_к_иконке/favicon.ico" type="image/ico" />
<link rel="icon" href="Путь_к_иконке/favicon.ico" type="image/x-icon" />

<link rel=»shortcut icon» href=»Путь_к_иконке/favicon.ico» type=»image/ico» /> <link rel=»icon» href=»Путь_к_иконке/favicon.ico» type=»image/x-icon» />

(Если у вас фавикон формата отличного от «. ico», нужно указать нужный тип файла)

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

P.S. Постовой. Читаем и смотрим про Web-дизайн в стиле ретро — интересная статья!
Важный шаг в раскрутке это поисковая оптимизация сайта или блога.
Полезный онлайн журнал handmade — все, что сделано своими руками.

Создание favicon. Favicon генератор. Как создать фавикон для всех браузеров и устройств

Иконка сайта (фавикон) — очень важный элемент дизайна сайта. Она делает ваш ресурс заметней в выдаче, повышает его узнаваемость. Часто разработчики оставляют создание фавикона на последний момент, и вовсе о нем забывают. В лучшем случае, вставят одну строчку link тега только с одним вариантом favicon.

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

Внимание мелочам!

Сам фавикон не так прост, как нам хотелось бы думать. Да, для десктопа всё просто и тривиально. А что делать со смартфонами, для которых иконка должна быть представлена в разных размерах. А с ГуглТВ что делать?

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

Десктопный фавикон

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

А поддерживаемый формат — как.png, так и.ico (.ico только для старых версий Internet Explorer).

Фавикон для Андроида

Тут уже мы должны учитывать разрешение экрана мобильного устройства. Именно от него и зависит итоговый размер фавикона. Разрешение смартфона — это плотность пикселей на дюйм (PPI). Именно из-за разных разрешений устройств необходимо делать иконки в разных физических размерах:

• 36×36 — PPI = 0.75
• 48×48 — PPI = 1
• 72×72 — PPI = 1.5
• 96×96 — PPI = 2
• 144×144 — PPI = 3
• 192×192 — PPI = 4

Android отлично понимает.png иконки, а также использует файл manifest.json, в котором можно прописать дополнительные параметры вывода. А если вы забыли сделать фавикон под андроид, то система будет использовать apple-touch-icon.

Favicon для Apple устройств

«Яблочные» устройства также имеют разный PPI в зависимости от модели и года выпуска, также в них используются Retina-экраны. Поэтому мы вынуждены также делать разные иконки для них:

• 57×57 — для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
• 60×60 — для iPhone с не ретина дисплеем и iOS версии 7.0
• 72×72 — для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
• 76×76 — для iPad с не ретина дисплеем и iOS версии 7. 0
• 114×144 — для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
• 120×120 — для iPhone с ретина дисплеем и iOS версии 7.0
• 144×144 — для iPad с ретина дисплеем и iOS версии 6.0 и ниже
• 152×152 — для iPad с ретина дисплеем и iOS версии 7.0
• 180×180 — для iPhone 6 Plus c iOS версии 8.0

Другие фавиконки

Есть ещё некоторые нестандартные параметры иконок, к примеру:

• Для IE10 под Windows 8 обязательно требуется указать цвет фона
• Браузер IE11 под Windows 8 и 10 понимает несколько видов иконок, опирается на XML файл параметров browserconfig.xml
• Safari под Mac OS X El Capitan обязательно требует наличие SVG иконки для закрепленных табов
• 96×96 — используется в Google TV
• 228×228 — используется в Opera Coast

Теперь вы понимаете, что на вопрос «какой размер фавикона использовать» ответом будет — ВСЕ размеры для ВСЕХ устройств!

А как всё это будем подключать?

Вручную всё это делать — убить очень много времени. Поэтому будем генерировать фавиконки онлайн с помощью сервиса.

Генератор фавикон для разных устройств: RealFaviconGenerator.net

Данный онлайн генератор фавикона из одной вашей иконки (идеально, если размер будет 260х260 пикс.) создает все необходимые размеры под все устройства буквально в один клик!

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

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

Favicon – это отображаемая в открытой вкладке браузера, левее от названия открытой странички, пиктограмма, так называемый мини-логотип. Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона. Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.

Назначение favicon

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

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

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

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

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

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

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

Разберемся с каждым способом подробнее.

Галереи готовых значков

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

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

1. www.iconj.com/favicon-gallery-page1.html – содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на сайте ICON J

1. – большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

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

Допишите /favicon.ico в конце названия сайта

Что делать если не отображается фавикон в Яндексе

Если в поисковике не визуализируется недавно добавленная пиктограмма, скорее всего проблема кроется в следующем:

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

Заключение

Добавление favicon способно не только сделать сайт красивее, но и повысить количество его посетителей. А как это сделать, вы уже знаете!

Буду признателен за каждый лайк.

Favicon — (от англ. FAVorites ICON в переводе «значок для избранного») — значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.

Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.

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

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

Куда загрузить фавикон чтобы он был онлайн?

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

Зачем указывать путь к Фавикону?

При использовании одного значка сайта на всем сайте, если favicon. ico находится в корневой папке, путь к нему можно не указывать — браузеры сами его найдут и выведут в виде значка сайта. Большие или уникальные ресурсы используют разные значки сайта к каждой из своих категорий. Для этого в соответствующих шаблонах у них прописан путь к разным favicon.ico.

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

X-Icon-Editor

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

Благодаря специальной панели, в процессе рисования favion-ки вы будете сразу видеть, как она смотрится в пределах браузера Internet Explorer.

Antifavicon

Стандартный размер favicon-ки (16×16) — это конечно же маловато для текста. Однако Antifavicon позволяет поместить две строчки текста в это маленькое пространство. Используемый шрифт конечно не ахти, но что поделаешь:).

Заданные рамки конечно же сковывают. Однако, посмотрев некоторые примеры, можно придумать что-то довольно-таки интересное.

Faviconist

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

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

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

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

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

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

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

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

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

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

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

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

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

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.4 Favicon-Generator.org

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

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

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

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

2.3.1 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 (Заголовок) и найти строчку, она должна выглядеть примерно так (она может немного отличаться в зависимости от темы):

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

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

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

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

Favicon: размер. Создание favicon. Favicon-генератор

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

Что такое favicon для сайта?

Он представляет собой небольшую картинку, которая будет отображаться во вкладке браузера. Размер favicon составляет 16×16 пикселей. Также эта картинка отображается в результатах выдачи поисковых систем, и если favicon на сайте будет отсутствовать, то рядом с сайтом в выдаче будет пусто. Стоит отметить, что фавикон помогает пользователю отыскать конкретно ваш сайт среди сотни других, поэтому его присутствие на сайте хоть и не является обязательным, но строго рекомендовано. И да, размер favicon не обязательно должен быть 16×16. Некоторые вебмастера делают фавикон размером 32×32 и даже 64×64. Но в своих рекомендациях поисковые системы Google и «Яндекс» пишут, что идеальный размер favicon — 16×16. Поэтому лучше следовать этим советам поисковых систем.

Как создать favicon?

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

Допустим, вы создали блог по бытовой технике и полностью настроили его, но остался последний штрих — фавикон. Пишите в поиске Google запрос appliances и смотрите первые 10 сайтов. Фавиконы этих сайтов идеально подойдут вашему новому блогу. Если какая-нибудь картинка вам понравилась, открывайте исходный код страницы и ищите запись favicon.ico. Там будет указан адрес расположениях фавикона. Откройте его и скачайте на компьютер, затем загрузите на сайт и подключите (о подключении ниже).

Второй способ создания favicon размером 16×16 пикселей — использовать специальный сервис генерации фавиконов. Он работает по следующему принципу: вы загружаете изображение (любого размера и расширения), которое подходит для титульной иконки сайта, и нажимаете на кнопку на кнопку Create Favicon. Через секунду получаете готовый фавикон, который можно скачать, загрузить на свой сайт и подключить. Самый популярный сервис — Favicon Generator.

Отметим, что данный сервис лишь немного упрощает процесс создания иконок. То же самое можно сделать и самому. Просто найдите картинку, которая вам подходит, измените ее размер до 16×16 пикселей и сохраните с расширением ico. Все это проделывается в течение одной минуты в программе Paint.

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

Подключение

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

Чаще всего этих действий достаточно для отображения фавиконов. Поисковые системы (например, «Яндекс») автоматически распознают наличие фавикона в корневом каталоге и используют его в своей выдаче. Однако с «Яндексом» иногда бывают недоразумения. Многие вебмастера жалуются, что фавиконки пропадают из индекса, а затем появляются заново. Чтобы этого не происходило, нужно подключить его.

Для подключения favicon «Яндекс» рекомендует использовать метатег <link> с указанием конкретных атрибутов. Этот тег нужно поместить в раздел сайта <head>.

Весь код подключения должен иметь следующий вид:

<link rel=»icon» href=»/market/article.php?post=/favicon.ico» type=»image/x-icon»>

Этот код работает для поисковых систем и всех браузеров. Могут быть проблемы с отображением в браузере Internet Explorer, но во всех остальных браузерах отображение будет точным.

Обратите внимание на адрес расположения изображения /favicon.ico. Его можно сделать таким: /favicon.gif. Тогда необходимо в корень сайта поместить изображение с расширением .gif, иначе отображаться фавикон не будет. Как известно, картинки в формате .gif могут представлять собой слайдеры. Этим пользуются вебмастеры и делают при этом анимированные фавиконы для своих сайтов. Выглядит это интересно, но не более того.

Фавикон как инструмент продвижения сайта

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

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

Как поисковик «Яндекс» понимает фавиконки?

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

Конфликт иконок

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

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

Как создать значок Favicon (.ICO) в Photoshop

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

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

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

Как должен выглядеть фавикон?

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

Характеристики значка Favicon (файл .

Фавикон:

• Квадратный рисунок
• 16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
• Заканчивается расширением .ico .

Фавикон изначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо .ico (PNG, GIF (включая анимированные GIF-файлы)), но .ico чаще всего используется во всех браузерах и, следовательно, является стандартом, который вы должны использовать для своего веб-сайта.

Создайте свой файл Favicon (.ICO) в Photoshop

Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл. Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, перейдите к «Сохранить для Интернета» и сохраните в формате .png с разрешением 72 DPI (точек на дюйм).

Скрытый файл в .ICO с помощью Converter Tool

Зайдите на ICO Converter — бесплатный веб-сайт, который преобразует ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и разрядность и сохраните на свой компьютер.

Добавьте значок Favicon на свою веб-страницу

После того, как вы получите свою фавиконку.ico сохранен и готов к работе, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon.ico каталогом, в который вы загрузили свой значок):

example.com/favicon.ico»/>

Мы не рекомендуем вам использовать относительный путь (href=»favicon.ico»), поскольку это может привести к потере путей при перемещении вашего веб-сайта, а также к краже ссылок.Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок значка.

Загрузите Favicon на свой веб-сервер

После того, как вы добавили URL-адрес файла favicon на свою веб-страницу, вам нужно убедиться, что favicon.ico действительно находится там, где вы его указали (в приведенном выше примере, в корне вашего документа (корневая папка вашего веб-сайт — например, /public_html или /www на серверах Linux)).

См. Favicon в действии!

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

Photoshop по-прежнему лучший?

Adobe Photoshop по-прежнему является стандартным программным обеспечением для редактирования фотографий, но является ли он лучшим? Наши эксперты углубляются и узнают в нашем обзоре Photoshop.Узнайте, на что способна последняя версия Photoshop, а также чем она отличается от конкурентов!

Удалось ли вам создать и отобразить свой новый значок?

Как создать файл ICO Favicon из изображения PNG, JPG или SVG

Фавикон веб-сайта является неотъемлемой частью фирменного стиля, аналогично логотипу веб-сайта. Однако обычно это файл ICO по сравнению с обычными форматами изображений, такими как PNG, JPG или SVG. В этой статье мы увидим, как мы можем преобразовать обычное изображение в фавикон.ico без использования каких-либо программ для редактирования фотографий, таких как Photoshop или GIMP.

Понимание истории Favicon.

Файл favicon.ico содержит изображения разных размеров и подобен файлам ICON, используемым на настольных компьютерах. Впервые он появился в 1999 году, когда Microsoft выпустила Internet Explorer 5 и добавила поддержку фавиконов.

Файл favicon изначально должен был быть файлом favicon.ico в корне вашего домена. Например, http://ваш домен.com/favicon.ico. Позднее W3C определил стандартную реализацию файлов значков, используя HTML-элемент в разделе с атрибутом href, указывающим местоположение файла значка. Согласно новой схеме, этот файл favicon может находиться в любом каталоге веб-сайта и может иметь любой формат файла изображения. Однако IE поддерживал формат файла ICO только с версии 5 до версии IE 10.

Таким образом, несмотря на то, что форматы файлов PNG и JPG поддерживаются другими браузерами, для обеспечения совместимости со старыми версиями Internet Explorer рекомендуется указывать значок веб-сайта как .файл ico. Позже мы увидим, как вы также можете указывать значки в метатегах для Android и iOS, и они будут использоваться, когда пользователь закрепляет ваш сайт на своем домашнем экране.

Создание логотипа и фавиконки

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

Создайте фавиконку из изображения

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

Шаг 1. Получите начальное изображение для Favicon

Мы начнем со следующего PNG-изображения для нашего фавикона. Как правило, вы должны использовать логотип своего веб-сайта или модифицированную версию логотипа. Убедитесь, что изображение вашего фавикона может поместиться внутри квадратного значка и быть разборчивым даже при маленьком размере. Начальное изображение лучше иметь размером не менее 260 x 260 пикселей.

Изображение выше является частью векторного набора элементов поп-арта и доступно для бесплатного скачивания с нашего сайта в форматах AI, EPS, SVG, PSD и PNG.

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

Шаг 2. Создайте фавикон из изображения

Когда у вас есть начальное изображение, перейдите на веб-сайт realfavicongenerator.net и загрузите свое изображение с помощью кнопки «Выберите изображение для фавиконки». Этот веб-сайт поможет вам создать фавикон, совместимый практически со всеми браузерами и платформами.

Далее веб-сайт попросит вас настроить фавикон для разных устройств, включая iOS, Android, Windows и macOS.Эти конфигурации необходимы для отображения вашего фавикона на главном экране пользователя этих устройств. Убедитесь, что вы изменили настройки, такие как цвет фона, размер полей, цвет темы и т. д., в зависимости от цветов вашего фавикона. Можно увидеть предварительный просмотр в реальном времени, который поможет вам настроить эти значения.

Шаг 3. Создание фавикона

После того, как вы выбрали параметры по своему вкусу, нажмите кнопку «Создать ваши фавиконы и HTML-код», и веб-сайт создаст пакет фавиконов вместе с HTML-кодом, подобный следующему:

   png">




  

Шаг 4. Добавьте Favicon на веб-сайт

Вам необходимо загрузить пакет favicon, сгенерированный веб-сайтом, и извлечь его содержимое в корень вашего веб-сайта.После извлечения вы обнаружите, что ваше изображение было преобразовано в favicon.ico вместе с изображениями favicon разных размеров, файлом browserconfig.xml и файлом manifest.json. Эти дополнительные файлы необходимы для указания значка веб-сайта на различных устройствах, таких как iOS, Android и Windows 10.

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

Я надеюсь, что этот урок по созданию фавикона из изображения был вам полезен. При желании вы также можете создать фавикон из текста с помощью Google Fonts. Дайте нам знать, если у вас возникнут какие-либо проблемы, и мы постараемся помочь в максимально возможной степени.

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

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

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

Тайны Favicon.ico — Как создать фавиконку в Photoshop

Фавикон — это небольшой настраиваемый значок, который появляется рядом с 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. Нажмите «Пересэмплировать изображение» и выберите «Бикубическая резкость» в раскрывающемся меню (только CS для этого шага).Это лучший параметр для того, чтобы изображение не размывалось при изменении его размера. Если оно все еще недостаточно резкое, вернитесь назад и сделайте резкость, перенасыщение и/или повысьте контрастность исходного изображения, а затем снова измените его размер.

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

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

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

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

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

Тестирование
Если ваш новый фавикон не отображается сразу, попробуйте обновить страницу или очистить кеш — или поставить ‘?’ в конце 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 очистите кеш и перезапустите браузер. В Опере просто обновите.

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

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

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

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

 Я нашел информацию здесь:
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 заключается в том, что они могут содержать 90 130 разных версий 90 131 значка с разными размерами и глубиной цвета (подобно тому, как анимированный GIF содержит несколько кадров). Когда они это делают, Windows использует наиболее подходящий размер и глубину цвета. Наиболее распространены размеры 16×16, 24×24, 32×32 и 48×48 пикселей, и все они могут быть объединены в один файл .ico.

Создание значка с несколькими разрешениями не намного сложнее, чем то, что вы сделали, чтобы создать свой значок 16×16, Телеграфика, там же, где вы получили свой плагин для значка, также есть другой плагин 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×437 , 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

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

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

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

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

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

введите наш эксклюзивный скидок код купона Photoshopsupport в процессе заказа в TOPAZ лаборатории для любой продукт Topaz, включая комплекты и обновления.

Плагины Topaz Labs для Photoshop специально разработаны для расширения набора творческих инструментов фотографа за счет использования мощных разработок в области технологий обработки изображений. Фотографы во всем мире теперь пользуются преимуществами творческих эффектов экспозиции, художественного упрощения, уникальных манипуляций с краями и первоклассного шумоподавления, предлагаемых в продуктах Topaz. Пакет подключаемых модулей Topaz Photoshop Plugins Bundle — это сверхмощный пакет подключаемых модулей 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 — просмотр бесплатных видеоклипов Dreamweaver, веб-дизайн, цифровые изображения, 3D, цифровое видео, анимация и многие другие темы.Просмотр бесплатных видеоклипов.

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

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

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

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

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

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

Как создать и установить favicon.ico (Linux,GNU,Windows,Unix) [Обзор]   [Новости]   [Утилиты]   [Статьи] [Наука]   [Старый]

---

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

favicon. ico

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

Фавикон — это сокращение от «Значок избранного» («Значок избранного» для вас американцы ;).Имя получено из списка закладок для 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.ico на веб-страницу, поместите его на сервер в тот же каталог, что и веб-страница, для которой она предназначена (например, www. example.com/foo/favicon.ico для www.example.com/foo/index.html ). Это первое место браузер будет искать. Если он не находит там иконку, он проверяет каталог верхнего уровня сервера ( www.example.com/favicon.ico для сервера www.example.com ), поэтому, разместив его там, вы можете получить значок по умолчанию для всех страниц в вашем домене. В зависимости от браузер и конфигурация, favicon.ico не всегда отображается, даже если он находится в одном из указанных выше мест, если веб-страница явно не заявляет о своем присутствии. Заявить, что на вашей веб-странице есть значок, вы добавляете следующие 2 строки в раздел вашей страницы:

<ссылка rel="icon" href="favicon.ico" type="image/x-icon">

---

[Обзор]   [Новости]   [Утилиты]   [Статьи] [Наука]   [Старый]

---

Copyright (c) 2000-2010 Маттиас Бенкманн

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

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

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

Фавиконы — это крошечные изображения, которые веб-сайты отображают на вкладках браузера и в закладках, как на синих квадратных значках 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, просто следуйте этому формату в терминале:

  конвертировать файл1 файл2 файл3 [...] favicon.ico
  

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

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

  конвертировать 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.ico) для вашего сайта

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

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

.

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

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

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

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 — это имя файла вашего пользовательского значка, включая путь к нему, если необходимо.

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

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

Favicons может быть сложно создать как с технической, так и с эстетической точки зрения из-за их необычного формата файла и небольшого размера изображения. Добавление кросс-браузерной поддержки также может оказаться сложной задачей.Черт возьми, есть даже путаница вокруг произношения favicon (я слышал, что говорят «fah-vee-con» и «fave-eye-con», хотя первое встречается чаще). Итак, давайте разберемся с этим и избавимся от мусора.

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

Первый шаг к созданию фавиконки — дизайн. Хороший фавикон должен отражать суть вашего сайта в глифе размером с смайлик и отражать ваш бренд в очень компактном пространстве. Чаще всего это логотип компании (а не полный логотип с текстом и товарными знаками).

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

Также рекомендуется исключить любой текст, потому что значки слишком малы, чтобы слова были разборчивы. Единственным исключением из этого правила является текст значка логотипа. Например, Википедия использует свою узнаваемую букву «W», а Facebook использует хорошо известную букву «F».

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

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

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

Для редактирования значков мне нравится использовать программу редактирования растровых изображений, такую ​​как Photoshop или Pixelmator. Обычно я начинаю с уменьшения размера моего большого логотипа до 64×64 пикселей, потому что это самый большой размер фавикона, который мне понадобится. Затем с помощью инструмента «Карандаш» я буду редактировать по одному пикселю, пока фавикон не станет четким.Это чрезвычайно утомительный процесс, который может занять час или два, но он дает наилучшие результаты.

Когда я буду доволен версией значка 64×64, я проделаю тот же процесс, чтобы создать версии 32×32, 24×24 и 16×16. Вот для чего предназначен каждый размер:

• 64×64 — Список для чтения Safari и значки сайтов Windows
• 24×24 — Закрепленный сайт в IE9
• 32×32 — дисплеи с высоким разрешением или «ретина» обычно используют этот размер
• 16×16 — наиболее часто используемый размер в таких браузерах, как IE, Safari, Chrome и др.

Возможно, вам будет достаточно изменить размер версии 64×64 до этих меньших размеров, но часто потребуется больше редактирования на уровне пикселей.Имейте в виду, что вы можете включить альфа-прозрачность в эти изображения, если хотите. Раньше это было проблемой, но почти все современные браузеры поддерживают прозрачность фавикона.

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

После того, как вы закончите редактирование значков для каждого из различных размеров, сохраните каждый из них в прозрачный 24-битный файл PNG. В Photoshop вы можете сделать это с помощью функции «Сохранить для Интернета», доступной через меню «Файл».

Затем вам нужно объединить все ваши PNG-изображения в один файл ICO.В качестве альтернативы вы можете использовать комбинацию файлов PNG и ICO, но часто даже Safari и Chrome все равно будут использовать файл ICO. На мой взгляд, проще всего придерживаться одного файла ICO. ICO не является широко используемым форматом файлов, но есть несколько инструментов, которые могут вам помочь. Мне нравится использовать для этого X-Icon Editor. Это бесплатный веб-инструмент, который позволяет легко загружать ваши изображения в слоты соответствующего размера, а затем экспортировать один ICO. Просто следуйте пронумерованным шагам на их сайте.Если вы сумасшедший, вы можете даже попробовать использовать их пиксельный редактор, хотя мне проще вносить изменения в более надежном инструменте, таком как Photoshop.

Редактор X-Icon упрощает загрузку изображений в формате PNG, а затем экспортирует один файл ICO всего за несколько шагов.

Добавление фавикона на веб-сайт

После того, как вы экспортировали файл ICO из такого инструмента, как X-Icon Editor, вы готовы разместить его на своем веб-сайте. Убедитесь, что вы назвали файл favicon.ico , а затем просто поместите его в корень вашего сайта, рядом с index.html и другими обычными битами. Другими словами, вы должны иметь возможность зайти на //example.com/favicon.ico и увидеть свой значок.

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

Обновление Favicon

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

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

.

Это заставит браузер думать, что это уникальный URL-адрес, поэтому он будет вынужден извлекать новые активы. После обновления значка полностью удалите этот HTML-код. Если вам нужно внести дополнительные изменения в значок, просто используйте ту же технику и каждый раз увеличивайте номер версии «v» в строке запроса.Таким образом, URL-адрес всегда будет уникальным и заставит браузер загрузить новую версию. Опять же, просто обязательно удалите этот код перед развертыванием своего сайта.

Создание более сложных фавиконов

Эта статья предназначена для быстрого и простого пути к созданию фавиконов, которые будут работать практически везде, но всегда есть чему поучиться, когда дело доходит до веб-дизайна и разработки. Если вы действительно хотите углубиться в создание более сложных фавиконов, сенсорных значков для домашних экранов iOS, значков для плиток метро Windows, значков Google TV и многого другого, я настоятельно рекомендую вам прочитать эту памятку по фавиконам.