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

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

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

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

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

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

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

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

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

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

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта WebMasterMix.ru.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px, для этого пройдите в меню «Файл» >> «Новый…» или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px, но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ «W» с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента «Заливка» (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент «Текст» (Т) добавил символ «W» и задал ему следующее значение цвета #FAC31D.

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

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню «Слой» >> «Объединить видимые» или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню «Фильтр» >> «Размытие» >> «Размытие по Гауссу…» и установить радиус 0,3 пикселя.

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

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню «Изображение» >> «Размер изображения» и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение .ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате .ico. Поэтому сохраните его в формате .png, для этого пройдите в пункт меню «Файл» >> «Сохранить как…» и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат .ICO

После этого мы конвертируем его в формат .ico при помощи сервиса favicon.ru. Зайдите на данный сервис и при помощи кнопки «Обзор» выберите  ранее сохраненный файл в формате PNG после чего нажмите на кнопку «Создать favicon.ico».

После этого на загрузившейся странице появится ссылка «Скачать favicon.ico!» кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

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

Если ваш сайт уже находится на хостинге то обычно эта папка называется «public_html». Затем, в каждую страницу вашего сайта, перед закрывающим тегом </head> добавьте следующие строки:

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

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

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

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

Если вы используете, какую либо другую CMS то все делайте по аналогии.

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

Материал подготовлен проектом: WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности

Опубликовано: 06 Январь 2011

Обновлено: 14 Октябрь 2013

Просмотров: 12982

Как создать иконку favicon.ico для сайта?

просмотров: 2495820 августа 2011 года

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

Казалось бы, простая задача по созданию иконки к сайту, нужно просто сохранить картинку размером 16×16x32 в формате *.ico

Да не тут та было… как оказалось, далеко не все программы поддерживают формат *.ico

Я привык работать в Photoshop CS5, но и тот даже в своих новых версиях  никак не сделает поддержку нужного нам формата. Раз не делает производитель — сделаем сами

 

Вариант 1. Установка плагина ICO для Photoshop

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

Скачать плагин для Фотошопа, который позволяет сохранять файлы *.ico

Плагин работает во всех версиях фотошопа, до CS5 включительно. Остальные версии не проверял.

2. Устанавливаем плагин. Закрываем Photoshop, копируем распакованный плагин icoformat.8bi в папку установки плагинов. Если вы устанавливали Photoshop CS3 в папку по умолчанию, то путь будет такой:

C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats\

Все. Теперь достаточно перезапустить Фотошоп и можно сохранять файлы в формате ICO. Для этого, после создания своей favicon, нажмите Ctrl+Shift+S или File(Файл)->Save As…(Сохранить как…):

 

Вариант 2.

Использование XnView

XnView — это кроссплатформенная программа для просмотра изображений, поддерживающая более 400 форматов файлов. Распространяется бесплатно для некоммерческого использования

Тут все просто.

1. Любым редактором создаем картинку 16×16 px в формате gif. Например, в том же Фотошопе или Paint

2. Открываем эту картинку в XnView

3. Нажимаем Файл->Сохранить rак…, выбираем формат файла ICO — Windows Icon

4. Нажимаем Сохранить.

 

После создания иконки, загружаем ее на сайт в корневой каталог с именем favicon.ico — именно такое имя нужно для наибольшей совместимости (некоторые браузеры проверяют наличие этого файла в корне сайта http://site.ru/favicon.ico)

Для отображения иконки, добавляем следующий код в секцию <head> … </head> (лучше вводить полный путь к иконке):

Метки: Favicon,Photoshop,Plugin,XnView

Анна (25 января 2012 года, 10:01:22)

Здравствуйте полезная статья я долго ломала голову как перевести иконку в нужный формат,но у меня вопрос с использованием программы XnView у меня картинка из размера 256×256 после смены формата становится маленькая хотя размер остаётся тот же,подскажите возможно ли это как то исправить?

Олег (1 февраля 2012 года, 16:23:59)

Вообще перед конвертированием надо ресайзить картинку в нужный размер — 16x16px.
Если Вы хотите более качественные иконки, используйте формат PNG.

Анна (1 февраля 2012 года, 17:09:52)

Ну что то у меня не чего не получается((

Олег (1 февраля 2012 года, 17:23:33)

Залейте картинку на какой-нибудь sendfile.su например и давайте я попробую преобразовть и описать как у меня это получилось

Анна (1 февраля 2012 года, 17:33:20)

Вот одна из тех которая не хочет преобразовываться  http://sendfile.su/515788

Олег (1 февраля 2012 года, 17:41:04)

Вообщем-то я последовал инструкциям “Вариант 2. Использование XnView”.. Изменил разрешение на 16x16px и пересохранил в .ICO, вот результат:
http://sendfile.su/515797

Анна (1 февраля 2012 года, 17:48:59)

Да она у меня такая же получилась,на вид она стала меньше а как её можно сделать побольше?

Олег (1 февраля 2012 года, 18:04:05)

Просто разрешение выставить больше — например 24×24. Какое максимальное для отображения на сайте — я не знаю… Узнайте опытным путем.

Анна (1 февраля 2012 года, 18:06:53)

Спасибо попытаюсь))

developer (6 июня 2013 года, 15:56:01)

Не хрена не работает!

Олег (10 июня 2013 года, 17:36:30)

2 developer: что не работает?))

Что скажем?

Сегодня мы будем делать иконку для сайта, 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, обычно она по умолчанию Transparent. Так и оставим.

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

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

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

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

Автор: kas

Сначала некоторая информация по favicon.

Favicon или просто по русски фавиконка, это рисунок (иконка) которая стоит рядом с названием сайта на вкладках браузера и закладках.

Фавиконка присутствует рядом с сайтом в выдаче Яндекса. А так же её используют некоторые каталоги.

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

Стандартный размер файла favicon, для браузеров — 16х16 пикселей. Выдача Яндекса, так же использует этот размер, а вот в каталогах размер может быть увеличен до 32х32 пикселя.
Если файл будет больше, ничего страшного, современные браузеры сумеют этот файл уменьшить до стандартных размеров (16х16 пикселей).
Как я уже сказал, обычно favicon имеет расширение -.ico, но допускается расширения и GIF, и PNG.

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

Сделать favicon можно с помощью Фотошопа, но следует знать что старые версии фотошопа, формат ico не поддерживают, требуется специальный плагин. Или воспользоваться одним из онлайн сервисов, например — http://www.favicon.cc. В этом сервисе можно создать фавикон самостоятельно нарисовав его, из вашей загруженной фотографии или картинки, или скачав уже готовый.
Favicon может быть анимированным если он с расширением ICO или GIF. Но, к сожалению, анимацию поддерживает только браузер фаерфокс. В Опере и Хроме, будет статическая фавиконка.

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

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

Для расширения ico:

<link rel="shortcut icon" href="http://zarabotok-na-site.narod.ru/favicon.ico" type="image/x-icon">

или

Для картинки PNG:

<link rel="shortcut icon" href="http://zarabotok-na-site.narod.ru/favicon.png" type="image/png">

или

Для GIF анимации:

<link rel="shortcut icon" href="http://zarabotok-na-site.narod.ru/favicon.gif" type="image/gif">

Ну и конечно же заменить адрес моего сайта на свой.

Наверх ↑

Как создать невидимый ярлык на рабочем столе Windows

АрхивСистема

автор : Андрей Крупин   05.04.2007

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

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

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

Чтобы добиться этого, проделываем серию следующих простых операций.

1. Заходим в свойства ярлыка и меняем закрепленный за ним значок на прозрачный. Обычно таковой присутствует в библиотеке Shell32.dll, расположенной в системной директории System32. Если бесцветной иконки нет, то её без труда можно отыскать в интернете по ключевому слову «blank.ico».

2. Нажимаем «Применить» и выходим из окна настроек.

3. Переименованием избавляемся от названия ярлыка. Обычным пробелом его забить не удастся, а вот неразрывным — вполне.

Для этого удерживая Alt, набираем на цифровой клавиатуре 0160 (убедитесь, что включен режим Num Lock), жмём Enter и получаем такую картинку:

4. Остается устранить стрелку с уже почти исчезнувшей иконки (вполне возможно, что в Windows XP выполнять этот шаг не потребуется). Для этого открываем редактор реестра (меню «Пуск -> Выполнить… -> regedit.exe»), находим ветку HKEY_LOCAL_MACHINE\SOFTWARE\Classes\lnkfile и удаляем в ней строковый параметр IsShortcut. Затем перезагружаем компьютер и получаем такой вот симпатичный результат:

Ну, как? Согласитесь, здорово! Во-первых, теперь ничего не мешает лицезрению фоновой картинки Windows. А, во-вторых, эффектно: можно сродни фокуснику кликать мышью по заранее известным областям рабочего стола и запускать программы, удивляя друзей или коллег по работе. Наконец, имея на руках Windows XP, можно аналогичным образом прятать директории от любопытных пользователей.

Добавить комментарий

Закрыть меню