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

Всем привет. Сегодня я хочу рассказать вам о том, как создать фавикон — иконку favicon. Такую иконку вы можете наблюдать у любого сайта, перед его названием. Эта иконка имеет размер 16*16 или 32*32 пикселя. Как видите она совсем небольшая.

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

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

Как создать создать фавикон — иконку favicon? Иконка favicon для сайта.

Этой, небольшой иконкой может стать любое изображение, которое вы только сумеете найти. Для поиска изображения, я использую Яндекс.Картинки. Подумайте, каким бы вы хотели видеть свой favicon и введите примерное описание в сайт: http://images.yandex.ru. Для себя я выбрал «Жёлудь».

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

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

В итоги я скачиваю маленькую картинку этого желудя. Теперь эту, скачанную картинку, нужно сделать еще меньше, а именно или 16*16, или 32*32 пикселя, как я уже и сказал раньше. Для этого я использую фотохостинг — http://www.radikal.ru/. Там, без проблем, можно уменьшить это изображение до 32 пикселей.

Для этого при помощи кнопки «Выбрать файл», я выбираю скаченную картинку и ввожу размер 32 pixel. Затем нажимаю кнопку «Загрузить».

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

После чего скачиваю уменшенный вариант этого изображения. После чего переименовываю на «favicon» и загружаю уже в корневую папку своего блога. После чего открываю файл header.php и вставляю между тегами <head> и </head>, такую строчку:

<link href=’адрес изображения‘ rel=’icon’ type=’image/расширение(jpg или другое)‘/>. 

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

Если вам понравилась эта статья, то возможно, вам будет интересно почитать и эту: «Какое будущее у блогинга?«. А пока вы не начали её читать, я хотел бы попросить вас написать то, что вы думаете на счет того, как создается иконка favicon для сайта или то, как вы создаете ее! Кстати, если у вас остались вопросы о том, как создать фавикон — задавайте их в комментариях.

С уважением, Степан!
Все статьи

Добавить в закладки

19 комментариев к записи “Как создать фавикон — иконку favicon?”

  1. А я код не вставлял, просто закинул картинку в корень и работает, движок вордпресс. Это правильно или нет?

    • Степан:

      Ну если работает значит правильно :)

    • Константин:

      Да достаточно и в корень кинуть. Но можно прикрутить через код, например, к той же теме WordPress. Я так уже в одной теме сделал :-)

    • Сергей:

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

  2. Константин:

    И еще пару замечаний.

    Размеры стандартно именно 16 на 16. Плюс для Apple-устройств, как iPhone, iPad и т.д. нужна другая иконка размером 57 на 57. Добавляется apple-вская иконка через тег <link rel=»apple-touch-icon» href=»путь до иконки» />

    И я считаю, что иконку уменьшать лучше через Gimp или Photoshop

    • Степан:

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

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

    • Степан:

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

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

  4. О спасибо! Я сейчас два сайта на заказ создаю. Забыла там фавиконы сделать! А тут ваше напоминание! Пойду поработаю над этим!

    • Выбрала для фавиконов парочку картинок, а как поуменьшала их, так они мне и разонравились :) Во дела! Из 6 картинок только последняя и удалась.

  5. Я фавикон в самом начале поставил на своем блоге! Но правда хочу переделать!

  6. Максим:

    Оригинально придумано — желудь:)

  7. Саня:

    Иконку также можно создать в специальных сервисах например этот favicon .ru

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

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

Оставить комментарий

Комментаторы блога

Комментируй блог и получи 300 рублей! Подробности тут!

X

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