Subbay.ru
Пятница, 15.12.2017, 20:04
Мини-чат

Поиск

Вход на сайт

Архив записей

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

2017 » Сентябрь » 15 » Как создать favicon.ico для сайта?
10:58
Как создать favicon.ico для сайта?

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

Что такое favicon.ico и зачем она нужна?

Favicon в переводе с английского означает «значок для избранного», то есть своеобразная иконка для сайта или блога. Отображается она на вкладке блога:

f

 Она имеет размер 16х16 пикселей и размещается в корневой папке блога, то бишь в папке public_html.

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

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

Что такое favicon.ico мы разобрали, теперь пришло время рассказать как ее создать. Есть несколько вариантов:

  • Скачать готовую иконку из галереи.
  • Создать favicon.ico с нуля.
  • Создать из готового изображения.

1. Скачать готовые иконки

Ниже приведены адреса сайтов с галереями фавиконок, переходите на любой  из них и выбирайте:

www.thefavicongallery.com – эта галерея содержит не так много иконок, всего лишь 2 страницы, но обратить на нее внимание стоит.

www.iconj.com/gallery.php — очень большая галерея иконок – 122 страницы. Favicon можно сохранить в формате .gif или .ico. Нов ведь нам нужно в формате .ico, поэтому сохранять нужно именно это формат.

http://www.favicon.co.uk/gallery.php — еще одна галерея, здесь иконок тоже очень много – целых 53 страницы.

2. Создать favicon.ico  с нуля.

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

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

r

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

После создания фавикона можете скачать его на компьютер.

Также хочу выделить еще одно преимущество этого сервиса – прямо в нем можно сразу увидеть результат, здесь:

pri

И вот здесь:

mer

3. Создать из готового изображения.

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

Чтобы сделать фавикон из изображения нужно изменить его размеры и расширение, для этого можно воспользоваться сервисом favicon.ru/#load.

Переходите на этот сайт и загружаете изображение:

izo

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

ska

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

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

Для этого нужно сделать:

1.Зайти в корневую папку блога через ftp-клиент и загрузить в нее favicon.ico:

ftp

2.Далее переходите во вкладку Внешний вид-Редактор, открываете файл header.php. И прописываете вот этот код между тегами <head> и </head>.Конечно же, вместо «адрес сайта»пишите свой домен блога:

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

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

Я вставил прямо перед закрывающимся тегом </head>.

Теперь обновляйте файл и смотрите результат. Если вы все сделали правильно, то favicon.ico должен появиться сразу же.

avatar
Бегущая строка в HTMLWWW.SUBBAY.RU
Copyright Subbay.ru © 2017
uCoz
Яндекс.Метрика